如何使用 webpack 在 ES6 项目中加载 Bootstrap 5 jQuery 插件？

Question

我目前正在将一个 ES6 项目从 Bootstrap 4 迁移到 Bootstrap 5，并收到此错误：

Uncaught TypeError: bootstrapElement.Tooltip is not a function

正如Migration Notes 中所述，Bootstrap 5 已经放弃了 jQuery 的默认集成。但是，Bootstraps jQuery plugins will still be loaded, if jQuery is detected in the window object。

就我而言，我导入了 jQuery，但 Bootstrap 似乎没有检测到它：

import $ from "jquery";
import {Tooltip} from "bootstrap";
import {getjQuery} from "bootstrap/js/src/util";

...

console.log(getjQuery()); // returns null
bootstrapElement.Tooltip({ title: "Element Tooltip" }); // throws the above error

但即使我尝试手动将 jQuery 加载到window 对象中，也会出现错误：

if(!getjQuery()) {
    window.jQuery = window.$ = $;
}
console.log(getjQuery()); // returns jQuery now
bootstrapElement.Tooltip({ title: "Element Tooltip" }); // still throws the error

我想这是因为我在导入 Tooltip 之后将 jQuery 加载到 window 中，并且插件会在导入期间加载。它不会，因为 jQuery 尚未设置为 window。

我知道我可以通过使用直接使用该插件

let elementTooltip = new Tooltip(bootstrapElement, { title: "Element Tooltip" });
elementTooltip.show();

而不是

bootstrapElement.Tooltip({ title: "Element Tooltip" });
bootstrapElement.Tooltip("Show");

但后来当我再次尝试删除工具提示时遇到问题，因为我无法再访问 elementTooltip 并且创建一个新实例不会解决问题。解决这个问题意味着项目架构中需要做大量工作（主要是因为这不是我使用的唯一插件），我想避免这种情况。

是否有可能以 Bootstrap 5 能够检测到并加载其 jQuery 插件的方式导入 jQuery？

Answer 1

我最终使用了expose-loader。

通过npm安装后

$ npm install expose-loader --save-dev

你可以将你的模块暴露给全局变量。这意味着在我的情况下：我可以加载 jQuery，所以 Bootstrap 可以访问它。

//entry.js
import $ from "expose-loader?exposes=$,jQuery!jquery";

之后，当您导入引导插件时，它们也将在 jQuery 中可用：

import {Tooltip} from "bootstrap";
bootstrapElement.tooltip({ title: "Element Tooltip" });

注意tooltip 是小写的。在Bootstrap documentation 中，它是大写的，但由于某种原因它以小写形式加载。

Answer 2

Bootstrap 非常清楚，您必须在 window 对象上定义 jQuery 属性。

因此，您需要在 Bootstrap 加载之前（正确地）定义该属性。

您可以通过以下几种方式实现这一目标：

单独加载 jQuery

与其导入 jQuery，不如将其作为单独的资源加载（就像 2007 年一样）并将其视为已定义的全局窗口。您可以通过“jquery”的别名来简化生活，该别名指向一个仅导出 window.jQuery 的模块。

由于多种原因，它并不理想，但它可以解决您的问题。

在加载 Bootstrap 之前加载一个 jQuery 模块（设置 window.jQuery）。

这有点棘手，因为 webpack 完全不需要管理加载顺序，但知道 webpack 将根据导入的顺序评估模块会有所帮助。

添加一个名为“SetjQueryGlobal”的新模块，然后将其导入您的入口点：

// SetjQueryGlobal.js
import $ from "jquery";
window.jQuery = $;

// entry.js
import "./SetjQueryGlobal";
import $ from "jquery";
import {Tooltip} from "bootstrap";

bootstrapElement.Tooltip({ title: "Element Tooltip" });

Webpack 将在继续加载 Bootstrap 之前评估您的 SetjQueryGlobal 模块，包括设置 window 属性。

这可能是我推荐的方法，但是很大程度上取决于您的设置，并且没有足够的信息表明这绝对是适合您的解决方案。