मैं अपने एप्लिकेशन में वेबपैक का उपयोग कर रहा हूं, जिसमें मैं अपने सभी जावास्क्रिप्ट फ़ाइलों / कोडों के लिए दो एंट्री पॉइंट्स- बंडल-जेएस बनाता हूं, और jQuery और रिएक्ट जैसे सभी पुस्तकालयों के लिए वेंडर्स.जेएस। मैं प्लगइन्स का उपयोग करने के लिए क्या करता हूं जिसमें उनकी निर्भरता के रूप में jQuery है और मैं उन्हें वेंडर्स.जेएस में भी रखना चाहता हूं? क्या होगा अगर उन प्लगइन्स में कई निर्भरताएं हैं?
वर्तमान में मैं यहां इस jQuery प्लगइन का उपयोग करने की कोशिश कर रहा हूं - https://github.com/mbklein/jquery-elastic । वेबपैक डॉक्यूमेंट में प्रोपलगिन और आयात-लोडर का उल्लेख है । मैंनेPPugugin का उपयोग किया था, लेकिन अभी भी 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 परिभाषित नहीं है
इसी तरह, जब मैं आयात-लोडर का उपयोग करता हूं, तो यह एक त्रुटि फेंकता है,
आवश्यकता परिभाषित नहीं है '
इस पंक्ति में:
var jQuery = require("jquery")हालाँकि, मैं उसी प्लगइन का उपयोग कर सकता हूं जब मैं इसे अपने वेंडर्स.जेएस फाइल में नहीं जोड़ता हूं और इसके बजाय सामान्य एएमडी तरीके से इसकी आवश्यकता होती है जैसे कि मैं अपनी अन्य जावास्क्रिप्ट कोड फ़ाइलों को शामिल करता हूं, जैसे-
define(
[
'jquery',
'react',
'../../common-functions',
'../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
$("#myInput").elastic() //It works
});लेकिन यह वह नहीं है जो मैं करना चाहता हूं, क्योंकि इसका मतलब होगा कि jquery.elastic.source.js को बंडल में मेरे जावास्क्रिप्ट कोड के साथ बंडल किया गया है। और मैं चाहता हूं कि मेरे सभी jQuery प्लगइन्स विक्रेताओं के .j बंडल में हों। तो मैं इसे कैसे प्राप्त करूं?