वेबपैक प्रोपलगिन बनाम एक्सटर्नल?

Question 1

मैं Backbone.js के साथ वेबपैक का उपयोग करने का विचार तलाश रहा हूं ।

मैंने त्वरित शुरुआत गाइड का पालन किया है और वेबपैक कैसे काम करता है, इसका एक सामान्य विचार है, लेकिन मैं इस बात पर अस्पष्ट हूं कि निर्भरता पुस्तकालय जैसे कि jquery / रीढ़ / अंडरस्कोर को कैसे लोड किया जाए।

क्या उन्हें बाहरी रूप से लोड किया जाना चाहिए <script>या यह कुछ Webpack की तरह है जिन्हें आवश्यकता हैJJS शिम?

के अनुसार webpack डॉक: मॉड्यूल shimming , ProvidePluginऔर externalsयह करने के लिए संबंधित दिखने (ताकि है bundle!लोडर कहीं), लेकिन मैं समझ नहीं कर सकते हैं जब जो उपयोग करने के लिए।

धन्यवाद

Question 2

यह दोनों संभव है: आप पुस्तकालयों को एक <script>(यानी एक सीडीएन से पुस्तकालय का उपयोग करने के लिए) शामिल कर सकते हैं या उन्हें उत्पन्न बंडल में शामिल कर सकते हैं।

यदि आप इसे <script>टैग के माध्यम से लोड करते हैं , तो आप अपने मॉड्यूल में externalsलिखने की अनुमति देने के विकल्प का उपयोग कर सकते हैं require(...)।

CDN से लाइब्रेरी के साथ उदाहरण:

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }

// inside any module
var $ = require("jquery");

बंडल में शामिल पुस्तकालय के साथ उदाहरण:

copy `jquery-git2.min.js` to your local filesystem

// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }

// inside any module
var $ = require("jquery");

ProvidePluginकरने के लिए (मुक्त) चर मॉड्यूल मैप कर सकते हैं। तो अगर आप निर्धारित कर सकते हैं: "हर बार जब मैं (मुक्त) चर का उपयोग xyzएक मॉड्यूल आप (webpack) स्थापित करना चाहिए अंदर xyzकरने के लिए require("abc")।"

बिना उदाहरण ProvidePlugin:

// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);

उदाहरण के साथ ProvidePlugin:

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

// If you use "_", underscore is automatically required
_.size(...)

सारांश:

CDN से लाइब्रेरी: <script>टैग और externalsविकल्प का उपयोग करें
फाइलसिस्टम से लाइब्रेरी: बंडल में लाइब्रेरी शामिल करें। (शायद resolveपुस्तकालय खोजने के विकल्पों को संशोधित करें)
externals: मॉड्यूल के रूप में वैश्विक संस्करण उपलब्ध कराएं
ProvidePlugin: मॉड्यूल को मॉड्यूल के अंदर मुफ्त चर के रूप में उपलब्ध कराएं

Question 3

ध्यान देने योग्य बात यह है कि यदि आप संपत्ति के ProvidePluginसाथ संयोजन में इसका उपयोग करते externalsहैं तो यह jQueryआपके वेबपैक मॉड्यूल को बंद करने के लिए स्पष्ट रूप से जाने के बिना अनुमति देगा require। यह कई अलग-अलग फ़ाइलों के संदर्भ के साथ विरासत कोड को फिर से सक्रिय करने के लिए उपयोगी हो सकता है $।

//webpack.config.js
module.exports = {
  entry: './index.js',
  output: { 
    filename: '[name].js' 
  },
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
    })
  ]
};

अब index.js में

console.log(typeof $ === 'function');

नीचे संकलित कुछ के साथ संकलित आउटपुट होगा webpackBootstrap:

/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function($) {
        console.log(typeof $ === 'function');

    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = jQuery;

/***/ }
/******/ ])

इसलिए, आप देख सकते हैं कि सीडीएन से $वैश्विक / खिड़की को संदर्भित किया jQueryजा रहा है, लेकिन इसे बंद कर दिया जा रहा है। मुझे यकीन नहीं है कि यह इरादा कार्यक्षमता या एक भाग्यशाली हैक है, लेकिन यह मेरे उपयोग के मामले के लिए अच्छी तरह से काम करता है।

Question 4

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन यह उल्लेख करना उपयोगी होगा कि वेबपैक स्क्रिप्ट लोडर इस मामले में भी उपयोगी हो सकता है। वेबपैक डॉक्स से:

"स्क्रिप्ट: वैश्विक संदर्भ (जैसे स्क्रिप्ट टैग) में एक बार जावास्क्रिप्ट फ़ाइल निष्पादित करता है, की आवश्यकता नहीं है।"

http://webpack.github.io/docs/list-of-loaders.html

https://github.com/webpack/script-loader

मुझे यह विशेष रूप से उपयोगी लगता है जब जेएस विक्रेता फ़ाइलों और ऐप फ़ाइलों को एक साथ जोड़ने वाली पुरानी बिल्ड प्रक्रियाओं को माइग्रेट करता है। चेतावनी का एक शब्द यह है कि स्क्रिप्ट लोडर केवल ओवरलोडिंग के माध्यम से काम करने लगता है require()और जहां तक मैं एक webpack.config फ़ाइल में निर्दिष्ट करके बता सकता हूं, वह काम नहीं करता है। हालांकि, कई तर्क देते हैं कि ओवरलोडिंग requireखराब अभ्यास है, यह एक बंडल में वेंडर और ऐप स्क्रिप्ट को छिपाने के लिए काफी उपयोगी हो सकता है, और साथ ही जेएस ग्लोबल्स को उजागर करने के लिए इसके अलावा वेबपैक बंडल में शर्मिंदा होने की आवश्यकता नहीं है। उदाहरण के लिए:

require('script!jquery-cookie/jquery.cookie');
require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history');
require('script!momentjs');

require('./scripts/main.js');

यह इस बंडल के अंदर और बाहर $ .cookie, History और क्षण को विश्व स्तर पर उपलब्ध कराएगा, और इन विक्रेता के लिबास को main.js स्क्रिप्ट के साथ बंडल करेगा और यह सब required फाइल है।

इसके अलावा, इस तकनीक के साथ उपयोगी है:

resolve: {
  extensions: ["", ".js"],
  modulesDirectories: ['node_modules', 'bower_components']
},
plugins: [
  new webpack.ResolverPlugin(
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
   )
]

जो कि Bower का उपयोग कर रहा है, mainप्रत्येक required पुस्तकालयों के पैकेज में फाइल को देखेगा । उपरोक्त उदाहरण में, History.js में कोई mainफ़ाइल निर्दिष्ट नहीं है , इसलिए फ़ाइल के लिए पथ आवश्यक है।