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




external-dependencies (3)

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

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

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

ما أود تحقيقه : بالنسبة لكل تطبيق ، أريد أن يكون لديّ ملفان من حزمة واحدة أحدهما معتمدين على الطرف الثالث الضروري والآخر مع الوحدات النمطية الضرورية من مكتبتي.

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

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

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

  • حزمة البائع : مع jquery و jquery.plugin1 و jquery.ui ؛
  • حزمة موقع الويب : مع الوحدات النمطية a و b و c ؛

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

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


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

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


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

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'})
  ]
};

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


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

حزمة البائع.

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

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

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

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

مسج عالمي

لديه نفس المشكلة وحلها مع 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 المثال.





external-dependencies