如何使用 importmap 在 Rails 7 中安装 jQuery？

我有一个新的 Rails 7 应用程序。我目前正在尝试学习自 Rails 5 以来的所有新功能。我想在我的 javascript 文件中使用以下代码，但到目前为止我收到以下错误：Uncaught ReferenceError: $ is not defined.

$(document).on("turbo:load", () => {
  console.log("turbo!");
});

这是另外两个相关文件。如果我需要发布其他内容，请告诉我。

导入映射.rb

pin "application", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js", 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 "el-transition", to: "https://ga.jspm.io/npm:[email protected]/index.js"

pin_all_from "app/javascript/controllers", under: "controllers"

应用程序.js

import "@hotwired/turbo-rails"
import "jquery"

$(document).on("turbo:load", () => {
  console.log("turbo!");
});

只需切换到CDN即可jspm, jQuery导入时将是全球性的：

# config/importmap.rb

# NOTE: pin jquery to jsdelivr instead of jspm
pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"

// app/javascript/application.js

import "jquery"; // this import first
import "script"; // then your other imports that use `$`

// NOTE: don't use relative imports: `import "./script"`
//       add `pin "script"` to `importmap.rb`

console.log($); // ok

// app/javascript/script.js
console.log($)  // ok

一切都正常，一次导入，多次导入，jquery 插件。无需额外吊装。

使用jspm时，jQuery必须在需要时显式导入，就像任何其他模块一样：

// app/javascript/place_where_i_need_jquery.js

import $ from "jquery";

// NOTE: don't make jQuery global, this only kind of works.
// window.$ = window.jQuery = $;

console.log($); // ok

澄清并提出window休息的事情。它适用于stimulus，因为控制器是imported具有动态的import()它通常在 jquery 加载后运行，并且有时间将其分配给window，但这并不能保证。这就是为什么你必须做吊装工作以确保$在任何其他进口之前成为全球性的。

请记住，默认情况下导入映射是延迟的，因此您不能使用$在你的内联脚本中（不是没有向后扭转你的手臂），因为 jquery 是在页面加载后加载的。