3

问题

为什么 importmaps 命令生成的源不能与 Bootstrap 4.6.1 一起使用，但相同版本的 jquery 的修改源可以工作？

问题详情

我使用 importmaps 创建了一个 rails 7 应用程序来管理 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)

但是，当我手动将 jquery 源更新importmap.rb为

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"
4

1 回答 1

-1

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

import jquery from 'jquery'
window.$ = jquery

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap
于 2022-02-18T21:15:32.450 回答