वेबपैक में jquery ऑब्जेक्ट में jquery प्लगइन्स को सही तरीके से कैसे जोड़ें?

Question

टीएल; डीआर प्लगइन के साथ jQuery ऑब्जेक्ट को विस्तारित करने, इसे वैश्विक रूप से उजागर करने और वेबपैक में ES6 मॉड्यूल के साथ बाहरी एएमडी libs का उपयोग करने का उचित तरीका क्या है? क्या वेबपैक कार्य के लिए सही उपकरण है, या SystemJs ES6 मॉड्यूल को एक विरासत ऐप को दोबारा सुधारने की स्थिति के अनुरूप होगा?

मैं वेबपैक और ईएस 6 मॉड्यूल के साथ काम करने के आसपास अपने सिर को लपेटने की कोशिश कर रहा हूं। मेरे पास एक विरासत ज्यादातर jquery ऐप है जिसे मैं वर्तमान में परिवर्तित कर रहा हूं। मैं निम्नलिखित चुनौतियों का सामना करना पड़ रहा हूँ:

1. webpack/कोलाहल-लोडर कार्यप्रवाह
2. में सर्वोत्तम प्रथाओं को खोजने पता लगाना जो लोडर/प्लगइन का उपयोग करने के लिए जो उद्देश्य
3. हो रही एएमडी संसाधनों jQuery और jQuery प्लगइन्स की तरह के लिए बाकी मॉड्यूल के साथ अच्छा खेलते हैं।
4. jQuery वैश्विक, सभी प्लग-इन और jQuery ui को

मैं निम्न संसाधनों पर भरोसा किया है के साथ बढ़ाया उजागर: हालांकि यह निर्यात लोडर का उल्लेख नहीं करता यह महान जवाब है, एक बहुत बताते हैं, जो मैं कर रहा हूँ ज्यादातर इस पर भरोसा करते हैं: https://stackoverflow.com/a/28989476/2613786

http://webpack.github.io/docs/shimming-modules.html - दस्तावेज़ीकरण में कई संभावनाएं सूचीबद्ध हैं, लेकिन मुझे यह तय करने का अनुभव नहीं है कि कौन सा सही है। ऐसा लगता है कि एक्सपोज़र लोडर के बजाय ProvidePlugin का उपयोग करना पसंद किया जाता है। अफसोस की बात है कि मैं इसे एक विस्तारित jQuery ऑब्जेक्ट के साथ काम करने के लिए नहीं मिला। न तो यह <script> टैग में आवंटित मॉड्यूल फ़ंक्शंस के उपयोग के लिए काम करता है।

मैं अभी भी प्रोग्रामेटिक समाधान खोजने के लिए संघर्ष करता हूं और यह तय करता हूं कि नौकरी के लिए कौन सी वेबपैक प्लगइन सही है। एक अनुभवी वेबपैक उपयोगकर्ता से कुछ सलाह या उदाहरणों की बहुत सराहना की जाती है।

मेरे webpack.config.js मैं jQuery का पर्दाफाश और कोलाहल के साथ transpile के लिए निम्न लोडर है:

module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: {modules: 'common'} 
     }, 
     { 
      test: /jquery\.js$/, 
      exclude: /node_modules/, 
      loader: 'expose?jQuery', 
     }, 
     { 
      test: /jquery\.js$/, 
      exclude: /node_modules/, 
      loader: 'expose?$', 
     }, 
     { 
      test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/, 
      loader: "imports?define=>false" 
     } 
    ] 
}, 
amd: { jQuery: true }, 
// plugins: [ 
//  new webpack.ProvidePlugin({ 
//  $: 'jquery', 
//  jQuery: 'jquery', 
//  'window.jQuery': 'jquery', 
//  'root.jQuery': 'jquery' 
// }) 
// ], ... 

मेरी entry.js में दाखिल मैं निम्नलिखित तरीके से jQuery में शामिल हैं:

import 'expose?jQuery!expose?$!./vendor/jquery'; 
import './jquery/jquery-ui'; 
import './vendor/jquery.sparkline'; 

मैं था ProvidePlugin पर टिप्पणी करने के लिए, जब मैं इसका उपयोग करता हूं, jQuery अब कस्टम प्लगइन्स के साथ विस्तारित नहीं होता है, कोई विचार यह क्यों है? क्या इसे ES6 मॉड्यूल सिंटैक्स का उपयोग करके प्लगइन के साथ करना है?

मुझे loader: "imports?define=>false"jquery.sparkline.js के लिए इसे पहचानने के लिए जोड़ना पड़ा। क्या यह वास्तव में जरूरी है, या ऐसा करने का एक बेहतर तरीका है?

jquery-ui के बारे में मुझे एक पुराना संस्करण ढूंढना पड़ा जो jquery ऑब्जेक्ट में जोड़ने के लिए एएमडी परिभाषित नहीं करता था। ऐसा करने का सही तरीका क्या होगा?

किसी भी मदद और सलाह की सराहना की जाती है, सिस्टमजे और जेएसपीएम पर स्विच करने का एक कारण भी एक समाधान हो सकता है।

Answer 1

मैं इस के साथ मुद्दों पड़ा है और ऐसा लगता है कि ऐसा इसलिए है क्योंकि कुछ प्लग $ मान और दूसरों jQuery मान, लेकिन निम्नलिखित अंत में मेरे लिए काम किया, भले ही यह नहीं बल्कि बदसूरत है:

संपादित, टिप्पणी कि मैं प्लगइन के लिए परीक्षण कर रहा हूं जिन्हें jquery.xyz.js नाम दिया गया है, आपको उचित रूप से रेगेक्स समायोजित करना होगा। इसके अलावा, मुझे यकीन नहीं है कि jQuery के लिए दो अलग-अलग एक्सपोज़र लोडर समस्याएं पैदा कर रहे हैं, लेकिन अब तक यह काम करता है।

// webpack.config.js 
... 
"module": { 
    "loaders": [ 
     { 
      test: require.resolve("jquery"), 
      loader: "expose?$!expose?jQuery" 
     }, 
     { 
      test: /jquery\..*\.js/, 
      loader: "imports?$=jquery,jQuery=jquery,this=>window" 
     } 
...