我在应用程序中使用Webpack,我在其中创建了两个入口点——bundle.我的所有JavaScript文件/代码和供应商的js.jQuery和React等所有库的js.我该怎么做才能使用那些依赖jQuery的插件,我希望这些插件也能在供应商中使用.js?如果这些插件有多个依赖项呢?
目前我正在try 使用这个jQuery插件-https://github.com/mbklein/jquery-elastic.网页文档提到providePlugin和导入加载器.我使用了providePlugin,但jQuery对象仍然不可用.以下是我的网页包.配置.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;
但尽管如此,它仍然会在浏览器控制台中抛出一个错误:
未捕获的ReferenceError:未定义jQuery
类似地,当我使用导入加载程序时,它会抛出一个错误,
"需求未定义"
在这方面:
var jQuery = require("jquery")
然而,当我不把它添加到我的供应商时,我可以使用相同的插件.js文件,而是以正常的AMD方式要求它,就像我包含其他JavaScript代码文件一样,比如-
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
但这不是我想做的,因为这意味着jquery.有弹力的来源js与我的JavaScript代码Bundle 在一起.js,我希望我所有的jQuery插件都在供应商那里.js包.那么,我该如何实现这一目标呢?