您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法:
大多数模块dist
在其main
字段中链接版本package.json
。尽管这对于大多数开发人员很有用,但对于webpack而言,最好为src
版本加上别名,因为webpack能够更好地优化依赖关系(例如,使用时DedupePlugin
)。
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};
但是,在大多数情况下,该dist
版本也可以正常工作。
大多数旧版模块都依赖于特定全局变量的存在,例如jQuery插件on $
或jQuery
。在这种情况下,您可以配置webpack,使其在var $ = require("jquery")
每次遇到全局$
标识符时都在前面。
var webpack = require("webpack");
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
一些旧模块依赖于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
当涉及到隐式全局变量时,它会更有用。
有些模块支持不同的模块样式,例如AMD,CommonJS和legacy。但是,大多数情况下,它们首先检查define
然后使用一些古怪的代码导出属性。在这些情况下,通过设置可以帮助强制CommonJS路径define = false
。
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?define=>false"
}
]
}
如果您不关心全局变量,而只希望使用旧脚本,则也可以使用脚本加载器。它将在全局上下文中执行模块,就像您已通过<script>
标签将其包括在内一样。
如果该模块没有AMD /CommonJS版本,并且要包含dist
,则可以将此模块标记为noParse
。然后,webpack将仅包含模块而不对其进行解析,这可用于缩短构建时间。这意味着任何需要AST的功能(例如ProvidePlugin
)都将无法使用。
module: {
noParse: [
/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
]
}