J'utilise Webpack dans mon application, dans laquelle je crée deux points d'entrée - bundle.js pour tous mes fichiers / codes JavaScript et vendors.js pour toutes les bibliothèques comme jQuery et React. Que dois-je faire pour utiliser des plugins qui ont jQuery comme dépendances et je veux les avoir aussi dans vendors.js? Et si ces plugins ont plusieurs dépendances?
Actuellement, j'essaie d'utiliser ce plugin jQuery ici - https://github.com/mbklein/jquery-elastic . La documentation Webpack mentionne providePlugin et imports-loader. J'ai utilisé providePlugin, mais toujours l'objet jQuery n'est pas disponible. Voici à quoi ressemble mon 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;
Mais malgré cela, il lance toujours une erreur dans la console du navigateur:
UnCaught ReferenceError: jQuery n'est pas défini
De même, lorsque j'utilise le chargeur d'importations, il génère une erreur,
exiger n'est pas défini »
dans cette ligne:
var jQuery = require("jquery")
Cependant, je pouvais utiliser le même plugin lorsque je ne l'ajoutais pas à mon fichier vendors.js et le demandais à la place de la manière AMD normale comme j'inclus mes autres fichiers de code JavaScript, comme-
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});
Mais ce n'est pas ce que je veux faire, car cela signifierait que jquery.elastic.source.js est fourni avec mon code JavaScript dans bundle.js, et je veux que tous mes plugins jQuery soient dans le bundle vendors.js. Alors, comment dois-je procéder pour y parvenir?