如何使用导入映射在Rails 7中安装jQuery？

Question

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

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

这是另外两个相关的文件。如果我需要发其他东西，请告诉我。

importmap.rb

pin "application", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/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:el-transition@0.0.7/index.js"

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

application.js

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

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

Answer 1

在使用jspm时，必须显式导入jQuery：

// app/javascript/application.js

import jQuery from "jquery";

// NOTE: make jQuery global if needed
window.$ = window.jQuery = jQuery;

console.log($); // ok

另一种方法(IMHO的最佳方式)是切换到jspm以外的CDN：

# config/importmap.rb

# NOTE: pin jquery to jsdelivr instead of jspm
pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"

// app/javascript/application.js

import "jquery";
console.log($); // ok

一切都正常，不需要吊装黑客。

请记住，默认情况下，导入映射是延迟的(每个浏览器？，所以您不能在内联脚本中使用$ (除非向后弯曲)，因为jquery是在加载页面之后加载的。

相关：

Answer 2

我需要在我的application.js文件中添加几行代码。

import "@hotwired/turbo-rails"
import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

Answer 3

做其他答案说的会有效，但当你插入一个新的包裹时，它就会停止工作。

原因是所谓的javascript挂起的工作方式，这意味着它将重新排序您必须以块方式重新组织导入的代码。这将刹车jQuery窗口分配。

为了避免这种情况，提取

import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

在另一个文件中，并在单个导入时调用它。

就我而言，我有：

application.js

import "./src/jquery"

$(function(){
  console.log("Hey!")
})

以及上面代码的src/jquery.js。