gruntjs - NPM مقابل Bower مقابل Browserify مقابل Gulp مقابل Grunt مقابل Webpack




(6)

ما هو webpack و webpack-dev-server؟ تقول الوثائق الرسمية إنها وحدة مجمعة ، لكنها بالنسبة لي مجرد عداء للمهمة. ماهو الفرق؟

webpack-dev-server هو webpack-dev-server ويب يُعاد تحميله مباشرة يستخدمه مطورو Webpack للحصول على ملاحظات فورية عما يقومون به. يجب استخدامه فقط أثناء التطوير.

هذا المشروع مستوحى بشدة من أداة اختبار وحدة nof5 .

Webpack كما يوحي الاسم سيخلق سن حزمة SINGLE للويب . سيتم تصغير الحزمة ، ودمجها في ملف واحد (ما زلنا نعيش في عصر HTTP 1.1). يقوم Webpack بسحر الجمع بين الموارد (JavaScript و CSS والصور) وحقنها مثل هذا: <script src="assets/bundle.js"></script> .

يمكن أيضًا تسميتها الوحدة المجمعة لأنه يجب أن تفهم تبعيات الوحدة ، وكيفية الحصول على التبعيات وتجمعها معًا.

أين كنت تستخدم متصفح؟ لا يمكننا أن نفعل الشيء نفسه مع واردات العقدة / ES6؟

يمكنك استخدام Browserify في نفس المهام بالضبط حيث يمكنك استخدام Webpack . - Webpack أكثر إحكاما ، رغم ذلك.

لاحظ أن ميزات أداة تحميل الوحدة النمطية ES6 في Webpack2 تستخدم System.import ، وهو ما لا يدعمه مستعرض واحد محليًا.

متى يمكنك استخدام gulp / grunt على الإضافات npm +؟

يمكنك أن forget Gulp و Grunt و Brokoli و Brunch و Bower . استخدم البرامج النصية لسطر الأوامر npm مباشرة بدلاً من ذلك ويمكنك إزالة الحزم الإضافية مثل هذه من أجل Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

ربما يمكنك استخدام مولدات ملفات التكوين Gulp و Grunt عند إنشاء ملفات config لمشروعك. بهذه الطريقة لن تحتاج إلى تثبيت Yeoman أو أدوات مشابهة.

أحاول تلخيص معرفتي بمديري حزم جافا سكريبت الأكثر شعبية ، المجمعين ، ومهربي المهام. أرجوا أن تصحح لي إذا كنت مخطئا:

  • npm و bower هم مديري الحزم. إنهم يقومون فقط بتنزيل التبعيات ولا يعرفون كيفية إنشاء مشاريع بمفردهم. ما يعرفونه هو استدعاء webpack / webpack / grunt بعد جلب كل التبعيات.
  • bower npm يشبه npm ، لكنه يبني أشجار التبعيات المسطّحة (على عكس npm التي تفعل ذلك بشكل متكرر). يعني npm إحضار التبعيات لكل تبعية (قد يجلب نفس الشيء عدة مرات) ، في حين يتوقع منك bower أن تتضمن التبعيات الفرعية يدويًا. في بعض الأحيان ، يتم استخدام npm و npm معًا للواجهة الأمامية والخلفية على التوالي (نظرًا لأن كل ميغا بايت قد تكون مهمة على الواجهة الأمامية)
  • grunt و gulp من المتسابقين في المهام لأتمتة كل ما يمكن أن يكون آلياً (أي تجميع CSS / Sass ، تحسين الصور ، إنشاء حزمة وتقليلها / نقلها).
  • grunt مقابل gulp (يشبه gradle مقابل gradle أو التكوين مقابل رمز). يعتمد Grunt على تكوين مهام مستقلة منفصلة ، كل مهمة تفتح / تعالج / تغلق الملف. يتطلب Gulp مقدارًا أقل من الكود ويستند إلى تدفقات Node ، مما يسمح له ببناء سلاسل أنابيب (بدون إعادة فتح نفس الملف) ويجعله أسرع.
  • webpack ( webpack-dev-server ) - بالنسبة لي ، إنه عداء webpack-dev-server مع إعادة التحميل السريع للتغييرات التي تتيح لك نسيان جميع مراقبي JS / CSS.
  • npm / bower + plugins قد تحل محل عدائي المهام. غالبًا ما تتقاطع قدراتهم ، لذلك هناك آثار مختلفة إذا كنت بحاجة إلى استخدام npm / grunt على الإضافات npm +. لكن من الأفضل بالتأكيد أن يكون العداؤون على المهام المعقدة (على سبيل المثال ، "في كل تصميم ، قم بإنشاء حزمة ، نقل من ES6 إلى ES5 ، وتشغيلها في جميع برامج محاكاة المحاكاة ، وعمل لقطات شاشة ونشرها على صندوق الإسقاط عبر بروتوكول نقل الملفات").
  • browserify يسمح وحدات التعبئة والتغليف عقدة للمتصفحات. browserify مقابل node require هو في الواقع AMD مقابل CommonJS .

الأسئلة:

  1. ما هو webpack و webpack-dev-server ؟ تقول الوثائق الرسمية إنها وحدة مجمعة ، لكنها بالنسبة لي مجرد عداء للمهمة. ماهو الفرق؟
  2. أين كنت تستخدم browserify ؟ لا يمكننا أن نفعل الشيء نفسه مع واردات العقدة / ES6؟
  3. متى يمكنك استخدام npm / grunt على الإضافات npm
  4. يرجى تقديم أمثلة عندما تحتاج إلى استخدام مجموعة

Webpack و Browserify

تقوم Webpack and Browserify بنفس المهمة إلى حد كبير ، حيث تقوم بمعالجة التعليمات البرمجية الخاصة بك لاستخدامها في بيئة مستهدفة (المستعرض بشكل أساسي ، على الرغم من أنه يمكنك استهداف بيئات أخرى مثل Node). نتيجة هذه المعالجة هي حزمة واحدة أو أكثر - نصوص مجمعة مناسبة للبيئة المستهدفة.

على سبيل المثال ، لنفترض أنك كتبت رمز ES6 مقسمًا إلى وحدات نمطية وتريد أن تكون قادرًا على تشغيله في المتصفح. إذا كانت هذه الوحدات النمطية عبارة عن وحدات عقدة ، فلن يفهم المستعرض هذه العناصر لأنها موجودة فقط في بيئة العقدة. لن تعمل وحدات ES6 أيضًا في المتصفحات الأقدم مثل IE11. علاوة على ذلك ، ربما تكون قد استخدمت ميزات اللغة التجريبية (مقترحات ES التالية) التي لا تنفذها المتصفحات حتى الآن ، لذا فإن تشغيل هذا البرنامج النصي من شأنه أن يلقي الأخطاء. هذه الأدوات مثل Webpack و Browserify تعمل على حل هذه المشكلات عن طريق ترجمة هذه الشفرة إلى مستعرض نموذج قادر على التنفيذ . علاوة على ذلك ، فإنها تجعل من الممكن تطبيق مجموعة كبيرة من التحسينات على تلك الحزم.

ومع ذلك ، Webpack و Browserify يختلفان بعدة طرق ، Webpack يقدم العديد من الأدوات بشكل افتراضي (على سبيل المثال تقسيم الشفرة) ، في حين أن Browserify لا يمكنه القيام بذلك إلا بعد تنزيل الإضافات ولكن باستخدام كلاهما يؤدي إلى نتائج متشابهة للغاية . يتعلق الأمر بالتفضيل الشخصي (Webpack هو الأكثر عصرية). راجع للشغل ، Webpack ليس عداءًا للمهام ، إنه مجرد معالج لملفاتك (يقوم بمعالجتها بما يسمى بوادر التحميل والإضافات) ويمكن تشغيله (من بين طرق أخرى) بواسطة عداء المهام.

خادم Webpack ديف

يوفر Webpack Dev Server حلاً مماثلاً لـ Browsersync - خادم تطوير يمكنك من خلاله نشر تطبيقك بسرعة أثناء العمل عليه ، والتحقق من تقدم التطوير على الفور من خلال خادم dev الذي يقوم تلقائيًا بتحديث المتصفح في تغييرات الرمز أو حتى نشر الرمز الذي تم تغييره إلى المتصفح دون إعادة تحميل مع ما يسمى استبدال وحدة الساخنة.

العدائين مهمة مقابل البرامج النصية NPM

كنت أستخدم Gulp من أجل إيجازها وكتابتها السهلة للمهام ، ولكن اكتشفت لاحقًا أنني لا أحتاج إلى Gulp أو Grunt على الإطلاق. كل ما أحتاجه من أي وقت مضى كان يمكن القيام به باستخدام البرامج النصية NPM لتشغيل أدوات الطرف الثالث من خلال API الخاصة بهم. يعتمد الاختيار بين نصوص Gulp أو Grunt أو NPM على ذوق وخبرة فريقك.

في حين أن المهام في Gulp أو Grunt سهلة القراءة حتى بالنسبة للأشخاص غير المطلعين على JS ، فهي أداة أخرى تتطلب وتعلم ، وأنا شخصياً أفضل لتضييق تبعياتي وجعل الأمور بسيطة. من ناحية أخرى ، قد يكون استبدال هذه المهام بمزيج من البرامج النصية NPM والبرامج النصية (ربما JS) التي تعمل أدوات الطرف الثالث (على سبيل المثال ، تكوين العقدة rimraf لأغراض التنظيف) أكثر صعوبة. لكن في معظم الحالات ، هؤلاء الثلاثة متساوون من حيث النتائج.

أمثلة

بالنسبة إلى الأمثلة ، أقترح عليك إلقاء نظرة على مشروع React starter هذا ، والذي يظهر لك مجموعة رائعة من البرامج النصية NPM و JS التي تغطي عملية الإنشاء والنشر بأكملها. يمكنك العثور على هذه البرامج النصية NPM في package.json في المجلد الجذر ، في خاصية تسمى scripts . هناك سوف تصادف في الغالب أوامر مثل babel-node tools/run start . Babel-node هي أداة CLI (غير مخصصة لاستخدام الإنتاج) ، والتي تقوم في البداية بتجميع tools/run ملفات ES6 (ملف run.js الموجود في tools ) - وهي أداة مساعدة في الأساس. يأخذ هذا العداء وظيفة كوسيطة وينفذها ، وهو في هذه الحالة هو start - أداة أخرى (start.js) مسؤولة عن تجميع ملفات المصدر (كل من العميل والخادم) وبدء تشغيل خادم التطبيق والتطوير (سيكون خادم dev) ربما Webpack Dev Server أو Browsersync).

التحدث بشكل أكثر دقة ، ينشئ start.js كلاً من حزم جانب العميل والخادم ، ويبدأ الخادم السريع وبعد البدء الناجح في متصفح Browser- المزامنة ، والذي بدا وقت كتابة هذا التقرير (يرجى الرجوع إلى مشروع رد فعل المبتدئين للحصول على أحدث رمز).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

الجزء المهم هو proxy.target ، حيث يقومون بتعيين عنوان الخادم الذي يرغبون في وكيله ، والذي يمكن أن يكون http: // localhost: 3000 ، ويبدأ Browsersync خادم الاستماع على http: // localhost: 3001 ، حيث يتم تقديم الأصول التي تم إنشاؤها مع الكشف عن التغيير التلقائي واستبدال وحدة الساخنة. كما ترون ، هناك files خصائص تكوين أخرى بها ملفات أو أنماط فردية تقوم Browser-sync بمراقبتها لإجراء تغييرات وإعادة تحميل المتصفح في حالة حدوث بعض ، ولكن كما يقول التعليق ، Webpack يعتني بمشاهدة مصادر js بمفرده باستخدام HMR ، لذلك تعاون هناك.

الآن ليس لدي أي مثال مكافئ على تكوين Grunt أو Gulp ، لكن مع Gulp (وبالمثل مع Grunt) ، يمكنك كتابة مهام فردية في gulpfile.js مثل

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

حيث ستقوم بشكل أساسي بنفس الأشياء كما في مجموعة المبتدئين ، هذه المرة مع عداء المهام ، الذي يحل بعض المشاكل لك ، ولكنه يعرض مشكلاته الخاصة وبعض الصعوبات أثناء تعلم الاستخدام ، وكما أقول ، مزيد من التبعيات لديك ، وأكثر يمكن أن تسوء. وهذا هو السبب في أنني أحب التخلص من هذه الأدوات.



يمكنك العثور على بعض المقارنة الفنية على npmcompare

مقارنة Browsify مقابل. grunt مقابل gulp مقابل webpack

كما ترون ، يتم صيانة حزمة الويب جيدًا مع إصدار جديد يصدر كل 4 أيام في المتوسط. ولكن يبدو أن Gulp لديها أكبر مجتمع منهم جميعًا (مع وجود أكثر من 20 ألف نجم على Github) يبدو Grunt مهملاً بعض الشيء (مقارنة بالآخرين)

لذلك إذا دعت الحاجة إلى اختيار واحد على الآخر سأذهب مع Gulp


حسنًا ، جميعهم لديهم بعض أوجه التشابه ، ويفعلون نفس الأشياء من أجلك بطرق مختلفة ومتشابهة ، أقسمهم في 3 مجموعات رئيسية على النحو التالي:

1) حزم المجمعات

حزمة الويب والتصفح كأنها شائعة ، تعمل مثل عدائي المهام ولكن مع مزيد من المرونة ، سوف تجمع أيضًا كل شيء معًا كإعداد ، حتى تتمكن من الإشارة إلى النتيجة على هيئة bundle.js على سبيل المثال في ملف واحد واحد بما في ذلك CSS و Javascript ، من أجل مزيد من التفاصيل عن كل منها ، انظر إلى التفاصيل أدناه:

webpack

webpack عبارة عن حزمة مجمعة لتطبيقات JavaScript الحديثة. عندما تقوم حزمة الويب بمعالجة التطبيق الخاص بك ، فإنها تقوم بشكل متكرر بإنشاء رسم بياني تبعية يتضمن كل وحدة نمطية يحتاجها التطبيق الخاص بك ، ثم حزم كل هذه الوحدات في عدد صغير من الحزم - غالباً واحدة فقط - ليتم تحميلها بواسطة المتصفح.

إنه قابل للتكوين بشكل لا يصدق ، ولكن للبدء ، ما عليك سوى فهم مفهوم Four Core Concepts: الإدخال والإخراج ومحمل الإضافات والإضافات.

تهدف هذه الوثيقة إلى تقديم نظرة عامة رفيعة المستوى على هذه المفاهيم ، مع توفير روابط لحالات استخدام مفصل محددة.

المزيد here

browserify

Browserify هي أداة تطوير تتيح لنا كتابة وحدات نمطية node.js تجمع للاستخدام في المستعرض. تمامًا مثل العقدة ، نكتب وحداتنا في ملفات منفصلة ، نصدر الطرق والخصائص الخارجية باستخدام الوحدة النمطية. تصدير وتصدير المتغيرات. يمكننا حتى أن نطلب وحدات أخرى باستخدام وظيفة الطلب ، وإذا تجاهلنا المسار النسبي ، فسيتم حلها إلى الوحدة النمطية في دليل node_modules.

المزيد here

2) العدائين المهمة

gulp و grunt هما عدائيان للمهام ، وهما ما يقومان به أساسًا ، ويخلقان المهام ويديرانها وقتما تشاء ، على سبيل المثال ، يمكنك تثبيت مكون إضافي لتقليل CSS الخاص بك ، ثم تشغيله في كل مرة للقيام بتصغير ، مزيد من التفاصيل حول كل منهما:

بلع

gulp.js عبارة عن مجموعة أدوات جافا سكريبت مفتوحة المصدر من Fractal Innovations ومجتمع المصادر المفتوحة في GitHub ، يستخدم كنظام للبث المباشر في تطوير الشبكة الأمامية. إنه عداء للمهام مبني على Node.js و Node Package Manager (npm) ، يستخدم لأتمتة المهام المستهلكة للوقت والمتكررة المشاركة في تطوير الويب مثل التصغير والتسلسل وخرق ذاكرة التخزين المؤقت واختبار الوحدة والانتقاء والتحسين وما إلى ذلك. نهج الكود الزائد لتحديد مهامه ويعتمد على المكونات الإضافية الصغيرة ذات الغرض الواحد لتنفيذها. يحتوي النظام البيئي gulp 1000+ هذه الإضافات المتاحة للاختيار من بينها.

المزيد here

الناخر

Grunt هو عداء مهام جافا سكريبت ، وهي أداة تُستخدم لتنفيذ المهام التي يتم استخدامها بشكل متكرر تلقائيًا مثل التصغير ، التجميع ، اختبار الوحدة ، الفحص ، إلخ. وهي تستخدم واجهة سطر أوامر لتشغيل المهام المخصصة المحددة في ملف (يُعرف باسم Gruntfile) . تم إنشاء Grunt بواسطة Ben Alman وتم كتابتها باللغة Node.js. يتم توزيعها عبر npm. يوجد حاليًا أكثر من خمسة آلاف مكون إضافي في نظام Grunt البيئي.

المزيد here

3) مديري الحزمة

مديرو الحزم ، ما يفعلونه هو إدارة المكونات الإضافية التي تحتاجها في التطبيق الخاص بك وتثبيتها لك من خلال github وغيرها باستخدام package.json ، وهو مفيد جدًا لتحديث وحداتك وتثبيتها ومشاركة التطبيق الخاص بك ، مزيد من التفاصيل لكل:

الآلية الوقائية الوطنية

npm هو مدير الحزم للغة برمجة JavaScript. هذا هو مدير الحزم الافتراضي لبيئة تشغيل جافا سكريبت Node.js. وهو يتألف من عميل سطر الأوامر ، يُطلق عليه أيضًا npm ، وقاعدة بيانات عبر الإنترنت للحزم العامة ، تسمى سجل npm. يتم الوصول إلى السجل عبر العميل ، ويمكن تصفح الحزم المتاحة والبحث فيها عبر موقع npm.

المزيد NPM

كوخ ريفي

يمكن لـ Bower إدارة المكونات التي تحتوي على HTML أو CSS أو JavaScript أو الخطوط أو حتى ملفات الصور. لا يقوم Bower بتسلسل أو تصغير الكود أو القيام بأي شيء آخر - إنه يقوم فقط بتثبيت الإصدارات الصحيحة من الحزم التي تحتاجها وتبعياتها. للبدء ، يعمل Bower عن طريق جلب الحزم وتثبيتها من كل مكان ، والعناية بالصيد والبحث عن وتنزيل وحفظ الأشياء التي تبحث عنها. يقوم Bower بتتبع هذه الحزم في ملف بيان ، bower.json.

المزيد Bower

وأحدث مدير للحزم لا ينبغي تفويته ، إنه صغير وسريع في بيئة العمل الحقيقية مقارنة بالـ npm التي كنت أستخدمها من قبل ، لإعادة تثبيت الوحدات النمطية ، يقوم بفحص مزدوج لمجلد node_modules للتحقق من وجود الوحدة النمطية ، يبدو أيضًا أن تثبيت الوحدات يستغرق وقتًا أقل:

غزل

الغزل هو مدير الحزم لرمزك. يسمح لك باستخدام ومشاركة الكود مع مطورين آخرين من جميع أنحاء العالم. يقوم الغزل بهذا بسرعة وأمان وأمان حتى لا تقلق أبدًا.

يتيح لك Yarn استخدام حلول المطورين الآخرين لمشاكل مختلفة ، مما يسهل عليك تطوير برنامجك. إذا كانت لديك مشكلات ، فيمكنك الإبلاغ عن مشكلات أو المساهمة مرة أخرى ، وعندما يتم إصلاح المشكلة ، يمكنك استخدام Yarn للحفاظ على تحديثها.

تتم مشاركة الرمز من خلال ما يسمى الحزمة (يشار إليها أحيانًا كوحدة نمطية). تحتوي الحزمة على جميع الكود الذي تتم مشاركته بالإضافة إلى ملف package.json الذي يصف الحزمة.

المزيد here


تحديث أكتوبر 2018

إذا كنت لا تزال غير متأكد من واجهة Front-end ، فيمكنك إلقاء نظرة سريعة على مصدر ممتاز هنا.

https://github.com/kamranahmedse/developer-roadmap

تحديث يونيو 2018

تعلم JavaScript الحديث صعب إذا لم تكن هناك منذ البداية. إذا كنت الوافد الجديد ، تذكر التحقق من هذا مكتوب ممتاز للحصول على نظرة عامة أفضل.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

تحديث يوليو 2017

لقد عثرت مؤخرًا على دليل شامل حقًا من فريق Grab حول كيفية التعامل مع التطوير الأمامي في عام 2017. يمكنك التحقق من ذلك على النحو التالي.

https://github.com/grab/front-end-guide

لقد بحثت أيضًا عن هذا منذ فترة طويلة نظرًا لوجود الكثير من الأدوات هناك ، وكل منها يفيدنا في جانب مختلف. ينقسم المجتمع عبر أدوات مثل Browserify, Webpack, jspm, Grunt and Gulp . قد تسمع أيضًا عن Yeoman or Slush . هذه ليست مشكلة حقًا ، إنها مربكة لكل من يحاول فهم مسار واضح للأمام.

على أي حال ، أود أن أساهم بشيء.

1. مدير الحزمة

يبسط مديرو الحزم تثبيت وتحديث تبعيات المشروع ، وهي مكتبات مثل: jQuery, Bootstrap ، إلخ - كل ما يتم استخدامه على موقعك ولم تتم كتابته بواسطتك.

تصفح جميع المواقع الإلكترونية للمكتبة ، وتنزيل المحفوظات وتفريغها ، ونسخ الملفات في المشاريع - يتم استبدال كل ذلك ببضعة أوامر في المحطة.

  • NPM تعني: Node JS package manager يساعدك على إدارة جميع المكتبات التي يعتمد عليها برنامجك. يمكنك تحديد احتياجاتك في ملف يسمى package.json وتشغيل npm install في سطر الأوامر ... ثم BANG ، يتم تنزيل npm install وجاهزة للاستخدام. يمكن استخدامها لكل front-end and back-end المكتبات front-end and back-end .

  • Bower : بالنسبة لإدارة الحزمة الأمامية ، فإن المفهوم هو نفسه مع NPM. يتم تخزين جميع المكتبات الخاصة بك في ملف باسم bower.json ثم قم بتشغيل bower install في سطر الأوامر.

الفرق الأكبر بين Bower و NPM هو أن NPM تقوم بعمل شجرة تبعية متداخلة بينما يتطلب Bower شجرة تبعية مسطحة على النحو التالي.

نقلا عن ما هو الفرق بين باور و npm؟

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

هناك بعض التحديثات على npm 3 Duplication and Deduplication ، يرجى فتح المستند لمزيد من التفاصيل.

  • Yarn : مدير حزمة جديد JavaScript published Facebook مؤخرًا مع بعض المزايا مقارنةً بـ NPM . ومع Yarn ، لا يزال بإمكانك استخدام كل من NPM و Bower التسجيل لجلب الحزمة. إذا قمت بتثبيت حزمة من قبل ، فإن yarn يقوم بإنشاء نسخة مخزنة مؤقتًا تسهل offline package installs .

  • jspm : هو مدير الحزم SystemJS الوحدة النمطية SystemJS العالمي ، وهو مبني على أعلى وحدة ES6 الديناميكية. إنه ليس مدير حزمة جديد تمامًا ولديه مجموعة من القواعد الخاصة به ، ولكنه يعمل مع مصادر الحزمة الحالية. من خارج منطقة الجزاء ، وهو يعمل مع GitHub و npm . نظرًا لأن معظم الحزم المستندة إلى Bower تستند إلى GitHub ، يمكننا تثبيت تلك الحزم باستخدام jspm أيضًا. يحتوي على سجل يسرد معظم حزم الواجهة الأمامية الشائعة لتسهيل التثبيت.

راجع الفرق بين Bower و jspm : Package Manager: Bower vs jspm

2. وحدة محمل / تجميع

معظم المشاريع من أي نطاق ستقسم الكود الخاص بها بين عدد من الملفات. يمكنك فقط تضمين كل ملف بعلامة <script> فردية ، ومع ذلك ، يقوم <script> بإنشاء اتصال http جديد ، وبالنسبة للملفات الصغيرة - وهو هدف من الناحية النمطية - قد يستغرق وقت إعداد الاتصال وقتًا أطول بكثير من نقل البيانات. أثناء تنزيل البرامج النصية ، لا يمكن تغيير أي محتوى على الصفحة.

  • يمكن حل مشكلة وقت التنزيل إلى حد كبير عن طريق ربط مجموعة من الوحدات البسيطة في ملف واحد وتقليلها.

على سبيل المثال

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • الأداء يأتي على حساب المرونة رغم ذلك. إذا كانت الوحدات النمطية لديك تعتمد على بعضها البعض ، فقد يكون هذا الافتقار إلى المرونة بمثابة أداة عرض.

على سبيل المثال

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

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

ثم سمعنا عن Webpack و SystemJS و SystemJS و SystemJS

  • RequireJS : هو ملف JavaScript ومحمل الوحدة النمطية. تم تحسينه للاستخدام داخل المتصفح ، ولكن يمكن استخدامه في بيئات JavaScript الأخرى ، مثل Node .

على سبيل المثال: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

في main.js ، يمكننا استيراد myModule.js كتبعية واستخدامها.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

ثم في HTML بنا ، يمكننا الرجوع إلى استخدام مع RequireJS .

<script src=“app/require.js data-main=“main.js ></script>

قراءة المزيد عن CommonJS و AMD للحصول على فهم بسهولة. العلاقة بين CommonJS و AMD و RequireJS؟

  • Browserify : المبينة للسماح باستخدام وحدات تنسيق CommonJS في المستعرض. وبالتالي ، فإن Browserify ليس محمل وحدة بقدر ما هو حزمة مجمعة: Browserify هي Browserify بالكامل وقت البناء ، وتنتج مجموعة من التعليمات البرمجية التي يمكن بعد ذلك تحميلها من جانب العميل.

ابدأ بآلة تصميم مثبتة على عقدة & npm ، واحصل على الحزمة:

npm install -g save-dev browserify

اكتب CommonJS بتنسيق CommonJS

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

وعندما تكون سعيدًا ، قم بإصدار أمر الحزمة:

browserify entry-point.js -o bundle-name.js

يقوم Browserify بالعثور على جميع تبعيات نقطة الدخول ويجمعها في ملف واحد:

<script src=”bundle-name.js”></script>
  • Webpack : يقوم Webpack كافة الأصول الثابتة ، بما في ذلك JavaScript والصور و CSS والمزيد ، في ملف واحد. كما يتيح لك معالجة الملفات من خلال أنواع مختلفة من اللوادر. يمكنك كتابة JavaScript باستخدام صيغة الوحدات النمطية CommonJS أو AMD . إنها تهاجم مشكلة البناء بطريقة أكثر تكاملاً ورأيًا بشكل أساسي. في Browserify تستخدم Browserify Gulp/Grunt وقائمة طويلة من التحويلات والإضافات لإنجاز المهمة. يوفر Webpack ما يكفي من الطاقة خارج الصندوق والتي لا تحتاج عادةً إلى Grunt أو Gulp على الإطلاق.

الاستخدام الأساسي هو أبعد من البساطة. قم بتثبيت Webpack مثل Browserify:

npm install -g save-dev webpack

وتمرير الأمر نقطة إدخال وملف الإخراج:

webpack ./entry-point.js bundle-name.js
  • SystemJS : هو مُحمل الوحدات النمطية الذي يمكنه استيراد الوحدات النمطية في وقت التشغيل في أي من التنسيقات الشائعة المستخدمة اليوم ( CommonJS, UMD, AMD, ES6 ). إنها مبنية على أعلى محمل محمل وحدة ES6 وهي ذكية بما يكفي للكشف عن التنسيق المستخدم والتعامل معه بشكل مناسب. يمكن لـ SystemJS أيضًا نقل رمز ES6 (باستخدام Babel أو Traceur ) أو لغات أخرى مثل TypeScript و CoffeeScript باستخدام المكونات الإضافية.

تريد أن تعرف ما هي node module ولماذا لا تتكيف بشكل جيد مع المتصفح.

المادة أكثر فائدة:

لماذا jspm و SystemJS ؟

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

  • أمر واحد لتثبيت المكتبة
  • سطر واحد من التعليمات البرمجية لاستيراد المكتبة واستخدامها

لذلك مع jspm ، يمكنك القيام بذلك.

  1. قم بتثبيت المكتبة بأمر: jspm install jquery
  2. قم باستيراد المكتبة بسطر واحد من التعليمات البرمجية ، دون الحاجة إلى مرجع خارجي بداخل ملف HTML.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. ثم قمت بتكوين هذه الأشياء داخل System.config({ ... }) قبل استيراد الوحدة النمطية الخاصة بك. عادة عند تشغيل jspm init ، سيكون هناك ملف باسم config.js لهذا الغرض.

  2. لتشغيل هذه البرامج النصية ، نحتاج إلى تحميل system.js و config.js على صفحة HTML. بعد ذلك ، سنقوم بتحميل ملف display.js باستخدام أداة SystemJS الوحدة النمطية SystemJS .

index.html و

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

لاحظ: يمكنك أيضًا استخدام npm مع Webpack لأن تطبيق Angular 2 عليه. نظرًا لأن jspm تم تطويره للتكامل مع SystemJS وأنه يعمل مع مصدر npm الموجود ، لذلك فإن إجابتك متروك لك.

3. عداء المهمة

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

  • Grunt : يمكنك إنشاء الأتمتة لبيئة التطوير الخاصة بك للمعالجة المسبقة للرموز أو إنشاء برامج نصية للبناء مع ملف التكوين ويبدو من الصعب للغاية التعامل مع مهمة معقدة. شعبية في السنوات القليلة الماضية.

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

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
  • Gulp : التنفيذ التلقائي مثل Grunt ولكن بدلاً من التكوينات ، يمكنك كتابة JavaScript مع تدفقات مثل تطبيق العقدة. تفضل هذه الأيام.

هذا هو إعلان مهمة نموذج Gulp .

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

انظر المزيد: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. أدوات السقالات

  • Slush and Yeoman : يمكنك إنشاء مشاريع بداية معهم. على سبيل المثال ، أنت تخطط لإنشاء نموذج أولي باستخدام HTML و SCSS ، ثم بدلاً من إنشاء بعض المجلدات يدويًا مثل scss و css و img والخطوط. يمكنك فقط تثبيت yeoman وتشغيل برنامج نصي بسيط. ثم كل شيء هنا من أجلك.

العثور على المزيد here .

npm install -g yo
npm install --global generator-h5bp
yo h5bp

رؤية المزيد: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

لا يتطابق إجابتي حقًا مع محتوى السؤال ، لكن عندما أبحث عن هذه المعرفة على Google ، أرى دائمًا السؤال في الأعلى حتى قررت الإجابة عليه بإيجاز. آمل يا رفاق وجدت أنه من المفيد.