এক্সপ্লুড বনাম ওয়েবপ্যাক সরবরাহ করুন?

Question 1

আমি ব্যাকবোন.জেএস দিয়ে ওয়েবপ্যাক ব্যবহার করার ধারণাটি অন্বেষণ করছি ।

আমি দ্রুত প্রারম্ভিক গাইডটি অনুসরণ করেছি এবং ওয়েবপ্যাক কীভাবে কাজ করে সে সম্পর্কে একটি সাধারণ ধারণা পেয়েছি তবে আমি কীভাবে জ্যাকুয়ারি / ব্যাকবোন / আন্ডারস্কোরের মতো নির্ভরতা লাইব্রেরিটি লোড করব সে সম্পর্কে আমি অস্পষ্ট।

এগুলি কি বাহ্যিকভাবে লোড করা উচিত <script>বা এটি কি ওয়েবপ্যাকটি প্রয়োজনীয় জেএসের শিমের মতো পরিচালনা করতে পারে?

মতে webpack ডক: মডিউল shimming , ProvidePluginএবং externalsএই সংক্রান্ত হবে বলে মনে হচ্ছে (তাই হয় bundle!লোডার কোথাও) কিন্তু আমি চিন্তা করতে পারে না যখন যা ব্যবহার করতে।

ধন্যবাদ

Question 2

এটি উভয়ই সম্ভব: আপনি একটি <script>(যেমন একটি সিডিএন থেকে একটি লাইব্রেরি ব্যবহার করার জন্য) সহ লাইব্রেরিগুলি অন্তর্ভুক্ত করতে পারেন বা উত্পন্ন বান্ডেলে অন্তর্ভুক্ত করতে পারেন।

আপনি যদি <script>ট্যাগের মাধ্যমে এটি লোড করেন তবে আপনি আপনার মডিউলগুলিতে externalsলেখার অনুমতি দেওয়ার জন্য বিকল্পটি ব্যবহার করতে পারেন require(...)।

সিডিএন থেকে পাঠাগার সহ উদাহরণ:

<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মডিউলের অভ্যন্তরে (ফ্রি) ভেরিয়েবলটি ব্যবহার করি তখন আপনার (ওয়েবপ্যাক) সেট 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(...)

সারসংক্ষেপ:

সিডিএন থেকে পাঠাগার: <script>ট্যাগ এবং externalsবিকল্প ব্যবহার করুন
ফাইল সিস্টেম থেকে পাঠাগার: বান্ডলে লাইব্রেরি অন্তর্ভুক্ত করুন। ( resolveগ্রন্থাগারটি সন্ধানের জন্য বিকল্পগুলি সংশোধন করতে পারেন)
externals: বিশ্বব্যাপী ভার্সনগুলিকে মডিউল হিসাবে উপলব্ধ করুন
ProvidePlugin: মডিউলগুলির ভিতরে মুক্ত ভেরিয়েবল হিসাবে মডিউলগুলি উপলব্ধ করুন

Question 3

মনে রাখার মতো দুর্দান্ত কিছু হ'ল আপনি যদি সম্পত্তির ProvidePluginসাথে সংমিশ্রণটি ব্যবহার করেন তবে এটি আপনাকে স্পষ্টভাবে না ছাড়াই আপনার ওয়েবপ্যাক মডিউলটি বন্ধ externalsকরার অনুমতি দেবে । প্রচুর বিভিন্ন ফাইলের রেফারেন্স সহ লিগ্যাসি কোডটি রিফ্যাক্টর করার জন্য এটি কার্যকর হতে পারে ।jQueryrequire$

//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

আমি জানি এটি একটি পুরানো পোস্ট তবে ভেবেছিলাম যে ওয়েবপ্যাক স্ক্রিপ্ট লোডার এই ক্ষেত্রেও কার্যকর হতে পারে mention ওয়েবপ্যাক ডক্স থেকে:

"স্ক্রিপ্ট: একবার বিশ্বব্যাপী প্রসঙ্গে (স্ক্রিপ্ট ট্যাগের মতো) একটি জাভাস্ক্রিপ্ট ফাইল চালায়, প্রয়োজনীয় বিশ্লেষণ করা হয় না" "

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

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

পুরানো বিল্ড প্রক্রিয়াগুলি জেএস বিক্রেতার ফাইল এবং অ্যাপ্লিকেশন ফাইলগুলিকে একত্রে স্থানান্তরিত করার সময় আমি এটি বিশেষভাবে দরকারী বলে মনে করেছি। সতর্কতার একটি শব্দ হ'ল স্ক্রিপ্ট লোডারটি কেবল ওভারলোডিংয়ের মাধ্যমে কাজ করে require()এবং একটি ওয়েবপ্যাক.কনফিগ ফাইলের মধ্যে নির্দিষ্ট করে আমি যতটা বলতে পারি ততক্ষণ কাজ করে না। যদিও, অনেকের যুক্তি রয়েছে যে ওভারলোডিং 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');

এটি এই বান্ডিলটির অভ্যন্তরে এবং বাইরে b। কুকি, ইতিহাস এবং মুহূর্তটি বিশ্বব্যাপী উপলভ্য করবে এবং মেইন.জেএস স্ক্রিপ্ট এবং এটির সমস্ত requireডি ফাইলের সাহায্যে এই বিক্রেতার লিবগুলি বান্ডিল করবে ।

এছাড়াও, এই কৌশলটির সাথে দরকারী:

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

যা বোভার ব্যবহার করছে, mainপ্রতিটি requireডি লাইব্রেরি প্যাকেজ.জেসনে ফাইলটি দেখবে। উপরের উদাহরণে, ইতিহাস.js এর কোনও mainফাইল নির্দিষ্ট করা নেই, সুতরাং ফাইলের পথটি প্রয়োজনীয়।