如何在 rails 7 中将 clipboard.js 与 importmap 一起使用

Question

我想在 Rails 7 项目的 Ruby 页面中添加一个 复制到剪贴板 按钮。

config/importmap.rb:

pin "clipboard.js", to: "https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js", preload: true

app/javascript/application.js:

import { ClipboardJS } from "clipboard.js"

...

document.addEventListener('turbo:load', (event) => {
  new ClipboardJS('.js-clipboard', {
    text: function(trigger) {
      return trigger.getAttribute('data-clipboard-text')
    }
  })
})

但是在页面加载后出现错误：

Uncaught SyntaxError: import not found: ClipboardJS

Rails 7.0.2.3
Ruby 3.0.2

Answer 1

您好尝试使用命令安装剪贴板

bin/importmap pin clipboard

然后不使用 import { ClipboardJS } from "clipboard.js" 导入模块 ClipboardJS，而是只导入 class 这样的：

import ClipboardJS from 'clipboard'

其他都正确。

如何在 rails 7 中将 clipboard.js 与 importmap 一起使用

How can I use clipboard.js with importmap in rails 7

javascript

ruby-on-rails

clipboard.js

import-maps

ruby-on-rails-7