Rails 7 导入映射的引脚与 Jquery源代码不兼容。

Question

问题

为什么使用importmaps命令生成的源代码无法与Bootstrap 4.6.1配合使用，但是同样版本的jquery的修改后源代码可以工作？

问题细节

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

我手动将一个旧版本的Bootstrap（4.6.1）固定在importmap.rb中。

当我运行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"

- Joe Thor

---

根据文档，它说 Popper 应该在 Bootstrap 之前： https://getbootstrap.com/docs/4.6/getting-started/introduction/ “如果您决定使用单独的脚本解决方案，则必须先加载 Popper（如果您使用工具提示或弹出窗口），然后再加载我们的 JavaScript 插件。” 尝试一下，也许会有所帮助。 - helmutrs

https://jasonfleetwoodboldt.com/courses/stepping-up-rails/rails-7-bootstrap/ - Jason FB

可以说，这确实是Rails 7目前最令人沮丧的部分之一。因此，我建议非高级开发者坚持使用JSBUNDLING + CSS BUNDLING，这样做显著更容易，并且可以让您与Rails 6上的webpacker保持一致，这也是每个人都习惯的方式。我自己已经做了15年的Rails，感觉导入映射的东西只是让我陷入了几个兔子洞，浪费了我数周甚至数月的时间，所以我只能说我感同身受。 - Jason FB

Answer 1

我有类似的设置，它很有效。使jQuery在整个页面中可用，将application.js中的导入替换为:

import jquery from 'jquery'
window.$ = jquery

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

- springy

---

这与现代JS范例相悖，现代JS范例是只在需要时导入库。 - Jason FB

这就是困惑和问题所在——老一辈的开发者在不真正理解现代范式的情况下，将其过时的期望强加于现代范式上。 - Jason FB

我有完全相同的问题。我正在尝试使用selectize，一个jquery插件，但即使使用上面的代码，我仍然会得到“Uncaught TypeError：Cannot read properties of undefined (reading 'jQuery')”（与bootstrap无关，但是同样的问题）。 - tkhobbes

@tkhobbes 也可以尝试使用 window.jQuery = jquery - springy

有没有关于“现代JS范式”的学习建议？另外，@springy，欢迎来到SO！继续努力回答问题，你会掌握的！ - Jared Menard

我同时转向了jsbundling。我发现importmaps太麻烦了。但还是谢谢！ :) - tkhobbes

Answer 2

我曾经为这个问题苦恼，最后解决的方法是：

• 使用Jquery添加到importmap
• 现在，您可以进入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 }

- Pádua Lima