Ich verwende Webpack in meiner Anwendung, in der ich zwei Einstiegspunkte erstelle: bundle.js für alle meine JavaScript-Dateien / -Codes und vendor.js für alle Bibliotheken wie jQuery und React. Was mache ich, um Plugins zu verwenden, deren Abhängigkeiten jQuery sind, und ich möchte sie auch in vendor.js haben? Was ist, wenn diese Plugins mehrere Abhängigkeiten haben?
Derzeit versuche ich, dieses jQuery-Plugin hier zu verwenden - https://github.com/mbklein/jquery-elastic . In der Webpack-Dokumentation werden ProvidePlugin und Imports-Loader erwähnt. Ich habe requirePlugin verwendet, aber das jQuery-Objekt ist immer noch nicht verfügbar. So sieht meine webpack.config.js aus:
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;
Trotzdem wird immer noch ein Fehler in der Browserkonsole ausgegeben:
Nicht erfasster ReferenceError: jQuery ist nicht definiert
Wenn ich den Import-Loader verwende, wird ebenfalls ein Fehler ausgegeben:
erfordern ist nicht definiert '
in dieser Zeile:
var jQuery = require("jquery")
Ich könnte jedoch dasselbe Plugin verwenden, wenn ich es nicht zu meiner Datei vendor.js hinzufüge und es stattdessen auf normale AMD-Weise benötige, wie ich meine anderen JavaScript-Codedateien einbinde, wie z.
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
Dies ist jedoch nicht das, was ich tun möchte, da dies bedeuten würde, dass jquery.elastic.source.js zusammen mit meinem JavaScript-Code in bundle.js gebündelt wird und ich möchte, dass alle meine jQuery-Plugins im Bundles vendor.js enthalten sind. Wie gehe ich vor, um dies zu erreichen?