我在我的应用程序中使用Webpack，在其中我创建了两个入口点-所有JavaScript文件/代码的bundle.js，以及所有库(如jQuery和React)的vendor .js。为了使用有jQuery作为依赖项的插件，我想要在vendor .js中也有它们，我该怎么做?如果这些插件有多个依赖项怎么办?
目前我正在尝试使用这个jQuery插件在这里- https://github.com/mbklein/jquery-elastic。Webpack文档中提到了providePlugin和imports-loader。我使用了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;
但尽管如此，它仍然在浏览器控制台抛出一个错误:
未定义jQuery
类似地，当我使用导入加载器时，它抛出一个错误，
Require没有定义
在这一行中:
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捆绑包中。那么我该怎么做呢?
您混合了包括遗留供应商模块的不同方法。我是这样处理的:
1. 首选非最小化的CommonJS/AMD而不是dist
大多数模块在package.json的主字段中链接dist版本。虽然这对大多数开发人员都很有用，但对于webpack来说，最好使用src版本的别名，因为这样webpack可以更好地优化依赖关系(例如，当使用DedupePlugin时)。
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};
然而，在大多数情况下，dist版本也可以很好地工作。
2. 使用ProvidePlugin注入隐式全局变量
大多数遗留模块依赖于特定全局变量的存在，就像jQuery插件在$或jQuery上所做的那样。在这种情况下，你可以配置webpack，每当它遇到全局$标识符时，将var $ = require("jquery")前置。
var webpack = require("webpack");
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
3.使用导入加载器来配置它
一些遗留模块依赖于它作为窗口对象。当模块在CommonJS上下文中执行时，This等于module.exports，这就成了一个问题。在这种情况下，您可以使用导入加载器覆盖它。
运行npm i imports-loader——save-dev然后
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?this=>window"
}
]
}
导入加载器还可以用于手动注入各种类型的变量。但是大多数时候，当涉及到隐式全局变量时，ProvidePlugin更有用。
4. 使用导入加载器禁用AMD
有一些模块支持不同的模块样式，比如AMD、CommonJS和legacy。然而，大多数情况下，他们首先检查define，然后使用一些古怪的代码来导出属性。在这些情况下，可以通过设置define = false强制使用CommonJS路径。
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?define=>false"
}
]
}
5. 使用脚本加载器(不再维护)全局导入脚本
如果不关心全局变量，只想让遗留脚本正常工作，也可以使用脚本加载器。它在全局上下文中执行模块，就像您通过<script>标记包含了它们一样。
6. 使用noParse包含大的dist
当没有AMD/CommonJS版本的模块，你想包括dist，你可以标记这个模块为noParse。然后webpack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何需要AST的特性(如ProvidePlugin)都不能工作。
module: {
noParse: [
/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
]
}
您混合了包括遗留供应商模块的不同方法。我是这样处理的:
1. 首选非最小化的CommonJS/AMD而不是dist
大多数模块在package.json的主字段中链接dist版本。虽然这对大多数开发人员都很有用，但对于webpack来说，最好使用src版本的别名，因为这样webpack可以更好地优化依赖关系(例如，当使用DedupePlugin时)。
// webpack.config.js
module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};
然而，在大多数情况下，dist版本也可以很好地工作。
2. 使用ProvidePlugin注入隐式全局变量
大多数遗留模块依赖于特定全局变量的存在，就像jQuery插件在$或jQuery上所做的那样。在这种情况下，你可以配置webpack，每当它遇到全局$标识符时，将var $ = require("jquery")前置。
var webpack = require("webpack");
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
3.使用导入加载器来配置它
一些遗留模块依赖于它作为窗口对象。当模块在CommonJS上下文中执行时，This等于module.exports，这就成了一个问题。在这种情况下，您可以使用导入加载器覆盖它。
运行npm i imports-loader——save-dev然后
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?this=>window"
}
]
}
导入加载器还可以用于手动注入各种类型的变量。但是大多数时候，当涉及到隐式全局变量时，ProvidePlugin更有用。
4. 使用导入加载器禁用AMD
有一些模块支持不同的模块样式，比如AMD、CommonJS和legacy。然而，大多数情况下，他们首先检查define，然后使用一些古怪的代码来导出属性。在这些情况下，可以通过设置define = false强制使用CommonJS路径。
module: {
loaders: [
{
test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
loader: "imports-loader?define=>false"
}
]
}
5. 使用脚本加载器(不再维护)全局导入脚本
如果不关心全局变量，只想让遗留脚本正常工作，也可以使用脚本加载器。它在全局上下文中执行模块，就像您通过<script>标记包含了它们一样。
6. 使用noParse包含大的dist
当没有AMD/CommonJS版本的模块，你想包括dist，你可以标记这个模块为noParse。然后webpack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何需要AST的特性(如ProvidePlugin)都不能工作。
module: {
noParse: [
/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
]
}
