javascript - كيفية تجميع البرامج النصية للبائعين بشكل منفصل وتتطلب منهم حسب الحاجة مع Webpack؟




external-dependencies (5)

أيضًا لست متأكدًا إذا كنت أفهم حالتك تمامًا ، ولكن هنا مقتطف التهيئة لإنشاء أجزاء مورد منفصلة لكل حزمة من حزمك:

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

وربط إلى المستندات CommonsChunkPlugin : http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

أحاول أن أفعل شيئًا أعتقد أنه ممكن ، لكنني حقًا لا أفهم كيفية تنفيذ ذلك من وثائق حزمة الويب.

أقوم بكتابة مكتبة JavaScript تحتوي على وحدات متعددة قد تعتمد أو لا تعتمد على بعضها البعض. علاوة على ذلك ، يتم استخدام jQuery من قبل جميع الوحدات ، وبعضها قد يحتاج إلى ملحقات jQuery. سيتم استخدام هذه المكتبة بعد ذلك على عدة مواقع مختلفة قد تتطلب بعض أو كل الوحدات.

كان تحديد الاعتماديات بين وحداتي أمرًا سهلاً للغاية ، ولكن يبدو أن تعريف اعتمادات الطرف الثالث كان أصعب مما كنت أتوقعه.

ما أود تحقيقه : بالنسبة إلى كل تطبيق أريد الحصول على ملفي حزمة واحد مع تبعيات ضرورية من جهة خارجية والأخرى مع الوحدات الضرورية من مكتبتي.

مثال : دعنا نتخيل أن مكتبتي تحتوي على الوحدات التالية:

  • (يتطلب: jquery ، jquery.plugin1)
  • ب (يتطلب: jquery ، أ)
  • c (يتطلب: jquery، jquery.ui، a، b)
  • د (يتطلب: jquery، jquery.plugin2، a)

ولدي تطبيق (انظر إليه كملف دخول فريد) يتطلب وحدات a و b و c. يجب أن يقوم Webpack لهذه الحالة بإنشاء الملفات التالية:

  • حزمة البائع : مع jquery و jquery.plugin1 و jquery.ui؛
  • حزمة الموقع الإلكتروني : مع الوحدات (أ) و (ب) و (ج)

في النهاية ، أفضل أن يكون jQuery كعامل عالمي لذا لست بحاجة إلى طلب ذلك في كل ملف واحد (يمكن أن أطلبه فقط على الملف الرئيسي ، على سبيل المثال). وستعمل الإضافات jQuery على توسيع النطاق العالمي في حالة طلبها (لا تمثل مشكلة إذا كانت متوفرة لوحدات أخرى لا تحتاج إليها).

بافتراض أن ذلك ممكن ، ما هو مثال ملف تهيئة webpack لهذه الحالة؟ لقد جربت عدة مجموعات من اللوادر والظواهر والمكونات الإضافية في ملف التكوين الخاص بي ، لكنني لا أحصل على ما يقومون به بالفعل وأيها يجب أن أستخدمه. شكرا لكم!


إذا كنت مهتمًا بتجميع البرامج النصية تلقائيًا بشكل منفصل عن تلك الخاصة بالبائعين:

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

يمكنك قراءة المزيد حول هذه الميزة في الوثائق الرسمية .


في ملفي webpack.config.js (الإصدار 1،2،3) ، لدي

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

في مجموعة ملحقاتي

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

الآن لدي ملف يضيف فقط ليبس طرف ثالث إلى ملف واحد كما هو مطلوب.

إذا كنت تريد الحصول على المزيد من التفاصيل حيث تفصل بين مورديك وملفات نقطة الدخول:

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

لاحظ أن ترتيب المكونات الإضافية يهمك كثيرًا.

أيضا ، هذا سوف يتغير في الإصدار 4. عندما يكون ذلك رسميًا ، أقوم بتحديث هذه الإجابة.

تحديث: تغيير البحث indexOf لمستخدمي ويندوز


لست متأكدًا إذا كنت أتفهم مشكلتك تمامًا ، لكن بما أنني واجهت مشكلة مماثلة مؤخرًا ، فسأحاول مساعدتك.

حزمة البائع.

يجب عليك استخدام CommonsChunkPlugin لذلك. في التكوين الذي تحدده اسم القطعة (مثل vendor ) ، واسم الملف الذي سيتم إنشاؤه ( vendor.js ).

new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),

الآن جزء مهم ، يجب عليك الآن تحديد ماذا يعني مكتبة vendor وتقوم بذلك في قسم الدخول. عنصر واحد آخر إلى قائمة الإدخال بنفس الاسم كاسم القطعة الجديدة (أي "البائع" في هذه الحالة). يجب أن تكون قيمة هذا الإدخال قائمة بكافة الوحدات النمطية التي تريد نقلها إلى حزمة vendor . في حالتك ، يجب أن تبدو كما يلي:

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

JQuery باعتبارها عالمية

كان نفس المشكلة وحلها مع ProvidePlugin . هنا أنت لا تحدد كائن عالمي ولكن نوع من shurtcuts إلى وحدات. أي يمكنك تكوينه من هذا القبيل:

new webpack.ProvidePlugin({
    $: "jquery"
})

والآن يمكنك فقط استخدام $ في أي مكان في التعليمات البرمجية - سوف يقوم webpack بتحويل ذلك تلقائيًا إلى

require('jquery')

آمل أن يساعد. يمكنك أيضًا الاطلاع على ملف تهيئة webpack الموجود here

أنا أحب webpack ، ولكن أوافق على أن الوثائق ليست أجمل واحدة في العالم ... ولكن يا .. الناس كانوا يقولون الشيء نفسه عن الوثائق الزاوية في البداية :)

تصحيح:

لجعل قطع مورد المدخل محددة فقط استخدام CommonsChunkPlugins عدة مرات:

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

ثم إعلان مكتبات extenral مختلفة لملفات مختلفة:

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

إذا كانت بعض المكتبات متداخلة (وبالنسبة لمعظمها) بين نقاط الدخول ، فيمكنك استخراجها إلى ملف شائع باستخدام نفس المكون الإضافي مع تكوين مختلف فقط. انظر this المثال.


يمكنك استخدام equalTo() لإيجاد أي طفل حسب القيمة. في حالتك name :

ref.child('users').orderByChild('name').equalTo('John Doe').on("value", function(snapshot) {
    console.log(snapshot.val());
    snapshot.forEach(function(data) {
        console.log(data.key);
    });
});

الغرض من orderByChild() هو تحديد الحقل الذي تريد ترشيح / البحث فيه. equalTo() الحصول على قيمة equalTo() وقيمة int وقيمة منطقية.

كما يمكن استخدامها مع المفاتيح التي تم إنشاؤها تلقائيا ( pushKey ) أيضا.

يمكنك العثور على جميع الوثائق here





javascript webpack external-dependencies