如何在Rails 7中使用ImportMap安装JQuery？

Question

我有一个新的Rails 7应用程序。我目前正在尝试从Rails 5开始学习所有新功能。我想在我的JavaScript文件中使用以下代码，但是到目前为止，我会收到以下错误：nuck fustrauct referacterror：$ bess nestion nswins nswind In定义。

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

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

importmap.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"

应用程序

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

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

Answer 1

只需切换到< 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 `
只需切换到< 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"



// 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插件。不需要额外的提升。

Answer 2

做其他答案说的事情将有效，但是当您固定新包装时，它将停止工作。

原因是所谓的JavaScript工作方式，这意味着它将重新排序您必须在块中重新组织导入的代码。这将打破jQuery窗口分配。

为避免这种情况，请

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

在另一个文件中提取并将其调用单个导入。

就我而言，我有：

application.js

import "./src/jquery"

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

和src/jquery.js带有上述代码。

Answer 3

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

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

Answer 4

我在这里尝试了所有其他建议，但这些建议都没有起作用。

这是您解决这个问题的方法：

1. pin jquery
   bin/importMap Pin jQuery

2. 使用jsdelivr.net或importmap.rb中的本地文件

   jspm由于某些未知原因而无法工作

   < br> a） pin“ jquery”，to：“ https：//cdn.jsdelivr.net/npm/jquery/jquery/dist/jquery.js”

   br> b） pin“ jquery”，to：“ jquery.js”
   如果您使用本地文件，则需要下载jquery.js到app/javascript/jquery.js

   如果您想要该

   c） <代码> pin“ jQuery”，to：“ https：//cdn.jsdelivr.net/npm/< href =” // cdn-cgi/l/l/email-protection“ class =” __ cf_email__“ data-cfemail > [email＆nbsp; prected] /dist/jquery.js“

3. 在application.js文件中，您只需要添加此

   导入“ jquery”

4. 当您想在视图中使用jQuery时，您需要在脚本标签上使用type =“模块”

<script type="module">

 $(document).ready(function(){
   console.log($)
 })
</script>