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

Question

我目前正在將一個 ES6 項目從 Bootstrap 4 遷移到 Bootstrap 5 並收到此錯誤：

Uncaught TypeError: bootstrapElement.Tooltip is not a function

如遷移說明中所述，Bootstrap 5 已放棄 jQuery 的默認集成。 但是， 如果在window ，Bootstraps jQuery 插件仍將被加載

就我而言，我導入了 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 object 中，也會出現錯誤：

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 文檔中，它是大寫的，但由於某種原因它以小寫形式加載。

Answer 2

Bootstrap 非常清楚，您必須在jQuery上定義window屬性。

因此，您需要在 Bootstrap 加載之前（正確地）定義該屬性。

以下是您可以實現這一目標的幾種方法：

單獨加載jQuery

與其導入 jQuery，不如將其加載為單獨的資源（如 2007 年）並將其視為已定義的 window 全局。 您可以通過“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 將評估您的 SetjQueryGlobal 模塊，包括設置 window 屬性，然后再繼續加載 Bootstrap。

這可能是我推薦的方法，但是很大程度上取決於您的設置，並且沒有足夠的信息表明這絕對是適合您的解決方案。