你如何用Webpack導入jQuery插件？

Question

我正在使用 Webpack v4，我有 jQuery 插件，我目前使用webpack-merge-and-include-globally globally webpack 插件加載到我們的應用程序中（然后使用<script>標簽手動將它們加載到 html 文件中）但是我希望能夠將其移動到我們的主要應用程序代碼中，以便 webpack 可以知道它們。 存在一些依賴項/類被加載兩次的問題，一次是在上面提到的合並插件中，另一次是在 Webpack 動態導入中。

到目前為止，嘗試讓 jQuery 插件加載並正確連接到 jQuery object 時遇到了麻煩。

是否有推薦的導入 jQuery 插件的方法，因為它不像普通的 JavaScript ES6 class ，您可以只使用前綴export class ClassName或export default class ClassName ，因為該插件被包裝在 IIFE 中（Immediate88359）。

Answer 1

一些潛在的解決方案：

選項 1 - jQuery 不需要自己全局的插件

import 'myapp/jquery-plugins/MyjQueryPlugin';

這個似乎好得令人難以置信/太容易了，因為它不需要新的裝載機。

添加不帶名稱的導入語句，僅添加腳本路徑。 這應該會自動執行腳本，類似於它從 HTML 加載時的方式。

請注意，這不適用於需要全局的腳本。 為此，使用選項 2 中的 expose-loader 來指定要公開的全局變量。

當我發現我必須使用的每個插件/庫/類都需要不同的處理方式時，我還會提到一些我發現有用的其他方法，並且可能對其他人有用：

選項 2 - 全局變量，例如 jQuery

import 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';

這將導入並執行它，以便下一個導入行可以直接使用全局變量。

選項 3 - 全局變量的替代方案

import MyClass from './views/MyClass';
window.MyClass = MyClass;

您可以自己導入，然后在 window 上設置，但是如果您有多個導入語句，而后者依賴於第一個已經可用的語句，那么這將不起作用，因為它尚未定義。 參見選項 2。這是我最不喜歡的，但值得一提作為備用。

選項 4

使用[webpack-merge-and-include-globally][1]插件，但這是我試圖避免/減少使用的插件，因為它在“webpack 的意識”之外。

其他

還有其他加載器，如raw-loader ，您可以像往常一樣使用!! 在導入中，或使用 a.then promise 來控制加載后的執行。

import('raw-loader!someScript.js').then(rawModule => eval.call(null, rawModule.default))

這是script-loader 中的文檔作為替代方案給出的示例，因為 script-loader 已被棄用。