我在我的应用程序中使用 Webpack,我在其中创建了两个入口点 - bundle.js 用于我的所有 JavaScript 文件/代码,以及 vendor.js 用于所有库,如 jQuery 和 React。为了使用以 jQuery 作为其依赖项的插件并且我希望它们也包含在 vendor.js 中,我该怎么做?如果这些插件有多个依赖项怎么办?
目前我在这里尝试使用这个 jQuery 插件 - https://github.com/mbklein/jquery-elastic . Webpack 文档提到 providePlugin和进口装载机。我使用了providePlugin,但jQuery 对象仍然不可用。这是我的 webpack.config.js 的样子-
var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';
var config = {
addVendor: function (name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp(path));
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jQuery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
],
entry: {
app: ['./public/js/main.js'],
vendors: ['react','jquery']
},
resolve: {
alias: {
'jquery': node_dir + '/jquery/dist/jquery.js',
'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
}
},
output: {
path: './public/js',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'jsx-loader' },
{ test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
]
}
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');
module.exports = config;
但尽管如此,它仍然在浏览器控制台中抛出错误:
Uncaught ReferenceError: jQuery is not defined
同样,当我使用imports-loader时,它会抛出一个错误,
require is not defined'
在这一行:
var jQuery = require("jquery")
但是,当我不将它添加到我的 vendor.js 文件时,我可以使用相同的插件,而是以正常的 AMD 方式需要它,就像我如何包含我的其他 JavaScript 代码文件一样-
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
但这不是我想要做的,因为这意味着 jquery.elastic.source.js 与我的 JavaScript 代码捆绑在 bundle.js 中,我希望我的所有 jQuery 插件都在 vendor 中。 js bundle 。那么我该如何实现呢?
最佳答案
您已经混合了如何包含旧 vendor 模块的不同方法。这就是我的处理方式:
1。更喜欢未缩小的 CommonJS/AMD 而不是 dist
大部分模块链接dist
main
中的版本他们的领域package.json
.虽然这对大多数开发人员很有用,但对于 webpack,最好将 src
作为别名。版本,因为这样 webpack 能够更好地优化依赖关系(例如,当使用 DedupePlugin
时)。
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};
但是,在大多数情况下,dist
版本也很好用。
2。使用 ProvidePlugin
注入(inject)隐式全局变量
大多数遗留模块依赖于特定全局变量的存在,就像 jQuery 插件在 $
上所做的那样或 jQuery
.在这种情况下,您可以配置 webpack,在前面添加 var $ = require("jquery")
每次遇到全局$
标识符。
var webpack = require("webpack");
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
3。使用 imports-loader配置this
一些遗留模块依赖于 this
成为 window
目的。当模块在 this
的 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 也可以用来手动注入(inject)各种变量。但大多数时候ProvidePlugin
在隐式全局变量方面更有用。
4。使用 imports-loader禁用 AMD
有些模块支持不同的模块样式,例如 AMD、CommonJS 和 legacy。然而,大多数时候他们首先检查 define
然后使用一些古怪的代码来导出属性。在这些情况下,可以通过设置 define = false
来强制使用 CommonJS 路径。 .
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?define=>false"
}
]
}
5。使用 script-loader (不再维护)全局导入脚本
如果您不关心全局变量而只希望遗留脚本工作,您也可以使用脚本加载器。它在全局上下文中执行模块,就像您通过 <script>
包含它们一样。标记。
6。使用noParse
包括大型区域
当模块没有 AMD/CommonJS 版本并且您想要包含 dist
时,您可以将此模块标记为 noParse
.然后 webpack 将只包含模块而不解析它,这可用于改善构建时间。这意味着任何需要 AST ,如 ProvidePlugin
, 不起作用。
module: {
noParse: [
/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
]
}
关于javascript - 在 webpack 中管理 jQuery 插件依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28969861/