你如何使用 Webpack 导入 jQuery 插件？

Posted 2023-05-09

【中文标题】你如何使用 Webpack 导入 jQuery 插件？

【英文标题】：How do you import jQuery plugins with Webpack?

【发布时间】：2020-11-19 08:31:41

【问题描述】：

我正在使用 Webpack v4，并且我有 jQuery 插件，我目前使用 webpack-merge-and-include-globally webpack 插件将它们加载到我们的应用程序中（然后使用 <script> 标签手动将它们加载到 html 文件中）但我想要能够将它移动到我们的主应用程序代码中，以便 webpack 可以知道它们。存在一些依赖项/类被加载两次的问题，一次是在上面提到的合并插件中，另一次是在 Webpack 动态导入中。

到目前为止，尝试让 jQuery 插件加载并正确附加到 jQuery 对象的尝试屡屡失败。

有没有推荐的方法来导入 jQuery 插件，因为它不像普通的 javascript ES6 类，你可以只用 export class ClassName 或 export default class ClassName 作为前缀，因为插件包装在 IIFE（立即调用函数表达式）中.

【参考方案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;

您可以导入，然后自己在窗口上设置，但如果您有多个导入语句，而后者依赖于第一个已经可用的语句，那么这将不起作用，因为它尚未定义。请参阅选项 2。这是我最不喜欢的，但值得一提的是备用。

选项 4

使用[webpack-merge-and-include-globally][1] 插件，但这是我试图避免/减少使用的插件，因为它超出了“webpack 的意识”。

其他

还有其他加载程序，例如 raw-loader，您可以在导入时使用 !!，或者使用 .then 承诺来控制加载后的执行。

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

这是example given by the docs in script-loader 作为替代方案，因为不推荐使用脚本加载器。