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

llycmphe 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(236)

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

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

这里有另外两个相关的文件。如果我需要张贴任何其他请让我知道。

导入Map.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"

应用程序.js

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

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

jquery

来源：https://stackoverflow.com/questions/72288802/how-can-i-install-jquery-in-rails-7-with-importmap

3条答案

按热度按时间

2hh7jdfx1#

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

// app/javascript/application.js

import jQuery from "jquery";

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

console.log($); // ok

另一种方法（恕我直言，是最好的方法）是切换到CDN而不是jspm：
第一个
一切都只是工作，没有起重hacks需要。
请记住，默认情况下，importmap是延迟的（每个浏览器都不确定），所以您不能在内联脚本中使用$（除非您的手臂向后扭），因为jquery是在页面加载之后加载的。
相关：* 如何在rails 6或rails 7 alpha引擎中使用jqueryUI *

赞(0）回复(0）举报 2022-11-03

xmjla07d2#

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

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

赞(0）回复(0）举报 2022-11-03

eblbsuwk3#

按照其他答案所说的去做会起作用，但当你钉住一个新的包时，它就会停止工作。
原因是所谓的javascript提升的工作方式，这意味着它将重新排序代码，你必须重新组织块中的导入。这将阻止jQuery窗口分配。
要避免这种情况，请提取

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

在另一个文件中，并在单个导入时调用它。
就我而言，我有：

应用程序.js

import "./src/jquery"

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

和src/jquery.js与上面的代码。

赞(0）回复(0）举报 2022-11-03

我来回答

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

3条答案

相关问题

热门标签

最新问答