Uncaught ReferenceError: Clipboard is not defined: when using clipboard.js with Rails 6

Question

我正在尝试在我的 Rails 6 应用程序中使用“clipboard.js”将当前位置复制到剪贴板，以便用户粘贴到电子邮件中。我的第一次尝试是使用“clipboard-rails”，但没有成功，所以手动尝试了。

app/views/layouts/application.html.erb:-
----------------------------------------
<%= javascript_pack_tag 'clipboard', 'data-turbolinks-track': 'reload' %>



app/javascript/packs/application.js:-
-------------------------------------
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("packs/clipboard")

var clipboard = new Clipboard('.clipboard-btn');

clipboard.on('success', function(e) {
    console.log(e);
});

clipboard.on('error', function(e) {
    console.log(e);
});


import "bootstrap"




app/views/bundles/show.html.erb:-
---------------------------------
<p class="link" id="bar"><%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %></p>
<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>

我在浏览器控制台中不断收到 'Uncaught ReferenceError: Clipboard is not defined' 错误，并且按下按钮什么也没做。我试过“剪贴板”和“剪贴板JS”。我正在 Windows 10 上开发。

Answer 1

您可能必须将要求分配给剪贴板：

    const Clipboard = require("packs/clipboard");
    var clipboard = new Clipboard('.clipboard-btn');