Rails 7 Importmap Pins不兼容的Jquery源答案

【问题标题】：Rails 7 Importmap Pins incompatible Jquery sourceRails 7 Importmap Pins不兼容的Jquery源
【发布时间】：2022-07-27 10:47:57
【问题描述】：

问题

为什么 importmaps 命令生成的源码不能在 Bootstrap 4.6.1 下工作，但修改后的同版本 jquery 的源码可以工作？

问题详情

我创建了一个使用 importmaps 来管理 javascript 的 rails 7 应用程序。

我在 importmap.rb 中手动固定旧版本的 Bootstrap (4.6.1)

当我跑步时 bin/importmap pin jquery 以下内容被添加到 importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

加载站点并查看 Chrome Web 工具会显示此错误消息，并且下拉菜单和手风琴等 jquery 功能不起作用

Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (bootstrap.min.js:6:2464)

但是，当我在 importmap.rb 中手动更新 jquery 源时

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/jquery.js"

错误消息已解决，功能已恢复。

在我看来，来源几乎相同，都是 jquery 3.6.0

https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js

https://ga.jspm.io/npm:jquery@3.6.0/jquery.js

工作配置

application.js


// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
import "controllers"

import  "jquery";
import * as bootstrap from "bootstrap";

importmap.rb

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 "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js", preload: true
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js"

【问题讨论】：

根据文档，它说 popper 应该在 bootstrap 之前运行：getbootstrap.com/docs/4.6/getting-started/introduction "如果您决定使用单独的脚本解决方案，必须先使用 Popper（如果您使用的是工具提示或弹出框)，然后是我们的 JavaScript 插件。”试试看，可能会有帮助
jasonfleetwoodboldt.com/courses/stepping-up-rails/…
可以说这确实是 Rails 7 在这一点上最令人沮丧的部分之一。出于这个原因，我建议非高级开发人员坚持使用 JSBUNDLING + CSS BUNDLING，这要容易得多，并且可以与每个人都习惯的 Rails 6 上的 webpacker 相提并论。我自己已经做 Rails 15 年了，感觉 importmap 的东西让我陷入了几个兔子洞，花了我几周甚至几个月的时间，所以我只能说我感受到了你的痛苦。

标签： jquery ruby-on-rails bootstrap-4 ruby-on-rails-7 import-maps

【解决方案1】：

我有一个类似的设置，它可以工作。使 jQuery 可用于整个页面，将 application.js 中的导入替换为：

import jquery from 'jquery'
window.$ = jquery

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap

【讨论】：

这违背了现代 JS 范式，即只在需要的地方导入库。
这是混乱和问题的一部分 - 老开发人员在没有真正了解现代范式本身的情况下将他们过时的期望强加于现代范式。
我也有同样的问题。我正在尝试使用 selectize，一个 jquery 插件，但即使使用上面的代码，我也会收到“Uncaught TypeError: Cannot read properties of undefined (reading 'jQuery')”（与引导程序无关，但同样的问题）。
@tkhobbes 也试试 window.jQuery = jquery
关于去哪里学习“现代 JS 范式”有什么建议吗？另外，@springy，欢迎来到 SO！继续努力回答问题。你会得到它的窍门！

【解决方案2】：

我一直在努力解决这个问题，为我解决的问题是：

在importmap 中添加了 Jquery
现在，你去Rails配置路径“@hotwired/stimulus”配置“jquery”在：app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"
...
import jQuery from "jquery"

window.jQuery = jQuery
window.$ = jQuery
...

仅供参考，就我而言，它看起来像这样：

import { Application } from "@hotwired/stimulus"
import jQuery from "jquery"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application
window.jQuery = jQuery
window.$ = jQuery

export { application }

【讨论】：