Rails 7 Importmap Pins不兼容的Jquery源代码

Question

问题

为什么导入映射命令生成的源代码不能用于引导4.6.1，而使用相同版本的jquery修改后的源代码呢？

问题细节

我使用导入映射创建了一个rails 7应用程序来管理javascript。

我正在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工具将显示此错误消息，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"

错误消息被解析，功能被恢复。

在我看来，源代码几乎是相同的，它们都是jQuery3.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"

Answer 1

我也有类似的设置，而且效果很好。使整个页面都可以使用jQuery，将application.js上的导入替换为：

import jquery from 'jquery'
window.$ = jquery

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

Answer 2

我一直在为这件事而挣扎，而为我解决问题的是：

在importmap

• Now，中添加Jquery的
• ，您可以转到Rails配置路径“@hotwired/”，以在：app/javascript/controllers/application.js中配置"jquery“

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 }