在Webpack中管理jQuery插件依赖性

在Webpack中管理jQuery插件依赖性

您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法：

1.优先使用最小的CommonJS / AMD

dist

大多数模块

dist

在其

main

字段中链接版本

package.json

。尽管这对于大多数开发人员很有用，但对于webpack而言，最好为

src

版本加上别名，因为webpack能够更好地优化依赖关系（例如，使用时

DedupePlugin

）。

// webpack.config.jsmodule.exports = {    ...    resolve: {        alias: { jquery: "jquery/src/jquery"        }    }};

但是，在大多数情况下，该

dist

版本也可以正常工作。

---

2.使用

ProvidePlugin

注入隐式全局变量

大多数旧版模块都依赖于特定全局变量的存在，例如jQuery插件on

$

或

jQuery

。在这种情况下，您可以配置webpack，使其在

var $ =require("jquery")

每次遇到全局

$

标识符时都在前面。

var webpack = require("webpack");    ...    plugins: [        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery"        })    ]

---

3.使用imports-loader进行配置

this

一些旧模块依赖于

this

成为

window

对象。当模块在

this

equals
的CommonJS上下文中执行时，这将成为问题

module.exports

。在这种情况下，您可以

this

使用imports-
loader覆盖。

运行

npm i imports-loader --save-dev

然后

module: {    loaders: [        { test: /[/\]node_modules[/\]some-module[/\]index.js$/, loader: "imports-loader?this=>window"        }    ]}

imports-loader也可以用于手动注入各种变量。但是在大多数情况下，

ProvidePlugin

当涉及到隐式全局变量时，它会更有用。

---

4.使用imports-loader禁用AMD

有些模块支持不同的模块样式，例如AMD，CommonJS和legacy。但是，大多数情况下，它们首先检查

define

然后使用一些古怪的代码导出属性。在这些情况下，通过设置可以帮助强制CommonJS路径

define= false

。

module: {    loaders: [        { test: /[/\]node_modules[/\]some-module[/\]index.js$/, loader: "imports-loader?define=>false"        }    ]}

---

5.使用脚本加载器全局导入脚本

如果您不关心全局变量，而只希望使用旧脚本，则也可以使用脚本加载器。它将在全局上下文中执行模块，就像您已通过

<script>

标签将其包括在内一样。

---

6.

noParse

用于包括大距离

如果该模块没有AMD /CommonJS版本，并且要包含

dist

，则可以将此模块标记为

noParse

。然后，webpack将仅包含模块而不对其进行解析，这可用于缩短构建时间。这意味着任何需要AST的功能（例如

ProvidePlugin

）都将无法使用。

module: {    noParse: [        /[/\]node_modules[/\]angular[/\]angular.js$/    ]}