我想将“复制到剪贴板”按钮添加到 Ruby on Rails 7 项目中的页面。
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
javascript ruby-on-rails clipboard.js import-maps ruby-on-rails-7
新领域：Rails 7.0.1、Ruby 3.1.0
rails new rails7app
bin/importmap pin bootstrap将引导程序添加到应用程序。
Bootstrap是js和css的结合体。bootstrap-icons看起来基本上都是css。使用yarn/npm方法yarn install bootstrap-icons可以工作，但是使用Rails 7并且没有npm则bin/importmap pin bootstrap-icons不起作用。有点预期，因为这是 css。
如何添加bootstrap-icons到基本 Rails 7 应用程序？
我刚刚将 Rails 6 应用程序更新到 Rails 7，我发现很难将旧的“Vanilla Javascript”代码挂接到 Rails 的Turbo、Stimulus和 ImportMaps 新设置中。
为了使事情变得更容易，我简单地rails new NewAppName在命令行上运行，然后将旧的遗留文件一点一点迁移到新应用程序中。
ImportMap 是由 Rails 为我生成的。我只添加了最后一行来包含我的旧自定义 Javascript 文件。
配置/导入映射.rb：
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/components", under: "components" # these are the custom JS files from my old Rails 6 app
应用程序/视图/布局/application.html.erb：
<head>
... …我试过：
./bin/importmap pin chart.js
将其添加到 config/importmap.rb
pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@3.9.1/dist/chart.mjs"
在 application.js 中我添加了：
import 'chart.js'
当我尝试创建新图表时，我收到“图表未定义”。
如果我尝试
import Chart from 'chart.js'
我收到“请求的模块‘chart.js’不提供名为‘default’的导出”
import Chart from 'chart.js/auto'
说“无法解析模块说明符‘chart.js/auto’”
我有一个FooService通过import-map加载的 Singleton-Class 。我想（a）等待它并在各种异步函数中使用它，如下所示：
declare global {
interface Window {
System: System.Module
}
}
const module = window.System.import('@internal/foo-service')
const fooService = module.FooService
async function func1() {
await fooService.doBar()
.
.
}
async function func2() {
await fooService.doBar2()
.
.
}
但我只能让它像这样工作：
declare global {
interface Window {
System: System.Module
}
}
async function getfooService() {
const module = await window.System.import('@internal/foo-service')
return module.FooService
}
function func1() {
getfooService().then(fooService => fooService .doBar())
.
.
}
function func2() {
getfooService().then(fooService …我有一个新的 Rails 7 应用程序，它使用importmap-railsgem 来管理 javascript 前端库。
我正在尝试使用 Semantic-UI 库，但 Semantic-UI javascript 无法识别 jQuery 的依赖项。
我无法通过 importmap 固定 Semantic-UI 库，所以我手动添加了这个库importmap.rb。这是我正在使用的semantic.min.js 的cdn 链接。
Chrome Web Tools 的控制台中出现以下错误消息，并且我在页面上验证 JavaScript 的可折叠折叠面板无法正常工作。
Uncaught ReferenceError: jQuery is not defined
at semantic.min.js:11:6043
(anonymous) @ semantic.min.js:11
被引用的行semantic.min.js看起来像这样
(jQuery,window,document)
我认为 Semantic-UI 和 jQuery 导入发生的顺序可能是问题所在（根据许多其他Stack Overflow 问题和Github 问题）。
但是，我在 Semantic-UI 导入之前进行了 jQuery 导入。
如果我注释掉 Semantic-UI 导入，我就可以毫无问题地使用 jQuery。
我已切换文件preload上的变量importmap.rb 以查看 Semantic-UI …
Actioncable - 概述。
\n我正在使用 jruby 9.2.16（因此 ruby 2.5.7）和 Rails 6.1.6.1。
\n我不确定 Actioncable 是否仅在开发中或仅在没有 ssl (wss) 的情况下可以与简单客户端一起使用：
\nvar ws = new WebSocket(\'ws://0.0.0.0:3000/channels\');\nws.onmessage = function(e){ console.log(e.data); }\n但至少我没有让它在生产中使用 wss 运行“从通道流式传输”，因为它在本地工作（在终端中启动“redis-cli”，然后“监视”）。
\n所以我尝试实现可操作的客户端脚本，因此浪费了 8 天的时间。
\n首先，我对没有任何完整的描述感到困惑。许多人发布特定的解决方案，但这就像赌博：也许你很幸运。
\n其次，文件的命名方式似乎很通用，即使它们仅与可操作相关（文件夹“javascript”或“application.js”）\n不将它们称为“actioncable_files”会产生误导。 ' 和 \'actioncable_app.js\' 和 voil\xc3\xa0 由于多个同名文件而出现问题。
\n下一个问题是，只需更改很多内容，因为文件的有序结构被忽略。Javascript 不再位于 asset 中，但为什么？\n它们可能位于 asset/javascripts/actioncable/ 中？\n因此，manifest.js 必须更改，甚至必须在 application.rb 中添加属性（attr_accessor :importmap）。您在论坛几天后发现的东西。
\n但更令人困惑的是： importmap 是一个 gem，它需要一些目录，并且必须以某种方式安装（rake app:update:bin、rails importmap:install），有人写道，gems 的顺序是相关的，但你不能只卸载Actioncable gem，因为 Rails 依赖于它。可以使用优先级排列来组织依赖关系。
\nimportmaps 在 Firefox 中不起作用，因此您还需要垫片
\nimport-maps ×7
ruby ×3
javascript ×2
actioncable ×1
chart.js ×1
clipboard.js ×1
jquery ×1
jruby ×1
stimulusjs ×1
system.js ×1
turbo ×1
typescript ×1