تعرف على المزيد حول حزمة الويب الخاصة بأداة تعبئة الوحدات

1. ما هو webpack

1. الشرح الرسمي

في جوهره، webpack هي أداة تعبئة معيارية ثابتة لتطبيقات JavaScript الحالية. (يمكن تلخيص هذه الجملة من نقطتين: الوحدات والتعبئة والتغليف )

دعونا نتحدث عن مفاهيم الوحدات والتعبئة والتغليف !

2. نمطية الواجهة الأمامية

• بعض الحلول لنموذجية الواجهة الأمامية: AMD، CMD، CommonJS، ES6 ( لا يمكن للمتصفحات التعرف عليها، ولكن يمكن أن تكون حزمة الويب هي الدعم الأساسي لها قبل تنفيذ التطوير المعياري)
• قبل ES6 ، إذا كنت تريد النمطية يتطلب التطوير مساعدة أدوات أخرى حتى نتمكن من تنفيذ التطوير المعياري
• بعد إكمال المشروع من خلال التطوير المعياري، نحتاج أيضًا إلى التعامل مع التبعيات المختلفة بين الوحدات ودمجها وتعبئتها
• في هذا الوقت، تظهر حزمة الويب النوى هي أنها تسمح لنا بإجراء التطوير المعياري وتساعدنا في التعامل مع التبعيات بين الوحدات.
• ليس فقط ملفات JavaScript ، بل يمكن أيضًا استخدام ملفات CSS والصور وملفات json وما إلى ذلك كوحدات نمطية في حزمة الويب.

3. كيف نفهم التغليف؟

• يمكن أن يساعدنا Webpack في تنظيم العلاقات المعقدة المختلفة بين الوحدات والتعامل معها. من السهل فهم مفهوم التغليف.
• إنه لحزم ودمج وحدات الموارد المختلفة في حزمة الويب في حزم متعددة (حزمة).
• أثناء عملية التعبئة، يمكن أيضًا معالجة الموارد ، مثل ضغط الصور، وتحويل scss إلى css، وتحويل بناء جملة ES6 إلى ES5، وتحويل TypeScript إلى JavaScript والعمليات الأخرى.
• تتضمن أدوات التعبئة والتغليف grunt/gulp.

والمقارنة بين حزمة الويب و grunt/gulp

• هي المهمة.
  1. يمكنك تكوين سلسلة من المهام وتحديد المعاملات التي ستتم معالجتها بواسطة المهام (مثل ES6، تحويل ts، ضغط الصور، تحويل scss إلى css)
  2. ثم اسمح لـ grunt/gulp بتنفيذ هذه المهام بالتسلسل، وقم بأتمتة العملية بأكملها

• لرؤية مهمة gulp.
  1. المهمة التالية هي تحويل جميع ملفات js ضمن src إلى بناء جملة ES5.
  2. وأخيرًا قم بالإخراج إلى المجلد dist.
  

• متى تستخدم النخر/البلع؟
  1. تبعيات وحدة المشروع بسيطة للغاية، ولا يتم استخدام مفهوم الوحدات حتى.
  2. ما عليك سوى استخدام النخر/الجرعة لإجراء عملية الدمج والضغط البسيطة.
  3. إذا كان المشروع بأكمله يستخدم إدارة معيارية وكان الاعتماد المتبادل قويًا جدًا، فيمكننا استخدام حزمة الويب.

• ما هو الفرق بين الناخر/البلع وwebpack؟
  1. يركز grunt/gulp بشكل أكبر على أتمتة عمليات الواجهة الأمامية، والنموذجية ليست جوهرها.
  2. يركز Webpack بشكل أكبر على إدارة التطوير المعياري ، والوظائف مثل ضغط الملفات والدمج والمعالجة المسبقة هي وظائفه المضمنة.

2. تثبيت webpack

(يجب أن تعتمد wepack على بيئة العقدة للتشغيل العادي، ويجب أن تكون بيئة العقدة كذلك مطلوب للتنفيذ العادي. استخدم أداة npm لإدارة الحزم التابعة المختلفة في العقدة)

• لذلك، لتثبيت حزمة الويب، يجب عليك أولاً تثبيت Node.js مع أداة إدارة الحزم npm
• لتثبيت حزمة الويب عالميًا (npm install webpack@). 3.6.0 -g)
• ولتثبيت webpck محليًا (npm install [email protected] --save-dev) –save-dev هو تبعية تطوير ولا يلزم استخدامه بعد تعبئة المشروع.

3. تكوين Webpack

1. مجلد dist لتحليل الملفات والمجلدات

• : يستخدم لتخزين الملفات المعبأة لاحقًا
• في مجلد src: يستخدم لتخزين الملفات المصدر التي كتبناها
  main.js : ملف الإدخال الخاص بالمشروع.
  mathUtils.js : يحدد بعض وظائف الأدوات الرياضية التي يمكن الرجوع إليها واستخدامها في مكان آخر.
  Index.html : يفتح المتصفح صفحة html المعروضة (المشار إليه هنا هو محتوى الملف النهائي المعبأ في src، أي مجلد dist ).
  package.json : يتم إنشاؤه من خلال npm init، وهو ملف تتم إدارته بواسطة npm package.

ما يلي هو الكود الموجود في ملف mathUtils.js وملف main.js : (مواصفات الوحدات النمطية CommonJS، CommonJS هو معيار الوحدات النمطية، وnodejs هو تطبيق CommodJS (الوحدات النمطية))

2. أمر

webpack ./src/main.js ./dist/bundle.js (حزم ملف main.js في ملف Bundle.js)

الوصف: بنفس الطريقة، يمكنك أيضًا استخدام المواصفات المعيارية ES6

3. قم بإنشاء ملف webpack.config.js لتبسيط أمر التغليف

(قم بتعيين أمر التغليف إلى رمز الإدخال والخروج

في هذا الملف):

الإدخال: بالنسبة لمخرجات الإدخال المجمعة

: نحتاج إلى الحصول على المسار في

• مخرجات الخروج المجمعة ديناميكيًا،
• حتى نتمكن من استخدام بناء جملة Node.js لاستيراد وحدة نمطية ('المسار') يجب العثور عليه في حزمة العقدة)
• استخدم Node.js من خلال أمر npm init (التهيئة)
• لإنشاء ملف package.json (يصف هذا الملف معلومات المشروع الحالي) الترخيص: "ISC" (مصدر مفتوح للمشروع)، فيما يلي

وصف رمز package.json: إذا كنت تريد استخدام العقدة، فيجب عليك الاعتماد على ملف package.json

بعد تشغيل npm install [email protected] --save-dev ، تتم إضافة التبعيات على النحو التالي

4. تعيين أوامر webpack لتشغيل npm

بالإضافة إلى تعيين webpack إلى المدخل والخروج ، يمكنك أيضًا تعيين أوامر webpack لتشغيل npm لبعض العمليات (يجب تعديلها في علامة البرنامج النصي **"script"** في الحزمة. جيسون). .

4. استخدام المُحمل

1. ما هو المُحمل؟

• المُحمل هو مفهوم أساسي جدًا في حزمة الويب.

الآن دعونا نفكر في الغرض من استخدام حزمة الويب؟

• نحن نستخدم webpack بشكل أساسي لمعالجة كود js، وسيتعامل webpack تلقائيًا مع التبعيات المتعلقة بـ js
• ، ومع ذلك، أثناء التطوير، لا تتم معالجته فقط بواسطة كود js الأساسي، ولكن يحتاج أيضًا إلى تحميل css والصور وبعض التعليمات البرمجية المتقدمة. تحويل ES6 إلى ES5، تحويل TypeScript إلى كود ES5، تحويل scss وأقل إلى css، تحويل ملفات .jsx، .vue إلى ملفات js، إلخ.
• بالنسبة لقدرات حزمة الويب نفسها، فإن هذه التحويلات غير مدعومة
• في الوقت الحالي، ما عليك سوى توسيع المُحمل المقابل إلى حزمة الويب

2. عملية استخدام المُحمل

1)

العمل التحضيري لمعالجة ملفات CSS:

1. في دليل src، قم بإنشاء ملف CSS. ، قم بإنشاء ملف Normal.css فيه

2. أعد تنظيم بنية دليل الملف ووضع ملفات js المتناثرة في مجلد js

3. الكود الموجود في Normal.css بسيط للغاية، أي اضبط النص على اللون الأحمر

4. لكن النمط في Normal.css لن يسري مفعوله في الوقت الحالي، لأنه لم تتم الإشارة إليه، ولا يمكن لحزمة الويب العثور عليه، لأن لدينا إدخال واحد فقط، وستبحث حزمة الويب عن ملفات تابعة أخرى بدءًا من الإدخال.

5. في هذا الوقت يجب علينا الرجوع إليه في ملف الإدخال main.js

بعد ذلك نحتاج إلى استيراد المُحمل المقابل للاستخدام!

• الخطوة 1 : قم بتثبيت المُحمل الذي تحتاج إلى استخدامه من خلال npm
  (تثبيت npm --save-dev css-loader) (تثبيت npm --save-dev style-loader)
  في الموقع الرسمي لـ webpack، ابحث عن الطريقة التالية لاستخدام أداة تحميل الأنماط:
  
  

• الخطوة 2 : قم بعمل تعليمات التكوين ضمن الكلمة الأساسية للوحدات النمطية في webpack.config.js

: يعد css-loader مسؤولاً فقط عن تحميل ملفات css ، وليس مسؤولاً عن تضمين أنماط css محددة في المستندات

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

ملحوظة: يجب وضع محمل النمط أمام محمل CSS.

2) خطوة معالجة أقل للملفات

• 1 : قم بتثبيت المُحمل المقابل (ملاحظة: تم أيضًا تثبيت ملف أقل هنا، لأن حزمة الويب ستستخدم كمية أقل لتجميع الملف الأقل). الأمر: npm install --save-dev less-loader less

• الخطوة 2 : تعديل ملف التكوين المقابل (في webpack.config.js) وإضافة خيار القواعد لمعالجة ملفات .less. على النحو التالي:

3) خطوة معالجة ملف الصورة

• 1 : أضف صورتين إلى المشروع (أحدهما أقل من 8 كيلو بايت، والأخرى أكبر من 8 كيلو بايت)

• الخطوة 2 : فكر أولاً في الرجوع إلى الصورة بنمط CSS، كما يلي

  

• الخطوة 3 : قم بتعديل ملف التكوين المقابل (في webpack.config.js) وأضف خيار القواعد لمعالجة ملفات الصور. على النحو التالي:

  

• الخطوة 4 : تم العثور على خطأ بعد التعبئة، لأنه ستتم معالجة الصور الأكبر من 8 كيلو بايت من خلال أداة تحميل الملفات ، ولكن لا يوجد أداة تحميل ملفات في مشروعنا. (تحتاج إلى تثبيت file-loader ، الأمر npm install --save-dev file-loader). بعد التثبيت والتعبئة، ستجد أن هناك ملف صورة إضافيًا في مجلد dist.

  

الوصف:

• وجدت أن حزمة الويب قامت تلقائيًا بإنشاء اسم طويل جدًا لنا

  1. هذه قيمة تجزئة 32 بت لمنع تكرار الاسم.
  2. ومع ذلك، في التطوير الفعلي، قد تكون هناك متطلبات معينة لاسم الصورة المعبأة

• ، لذلك يمكننا إضافة الخيارات التالية في الخيارات:

  1.img: المجلد الذي سيتم حزم الملف إليه.
  2. الاسم: احصل على الاسم الأصلي للصورة وضعه في هذا الموقع
  3. Hash8: من أجل منع تعارض أسماء الصور، لا يزال يتم استخدام التجزئة، ولكن يتم الاحتفاظ بـ 8 بتات فقط.
  4. ext: استخدم الامتداد الأصلي للصورة كما يلي:
  

• تحتاج أيضًا إلى تكوين المسار الذي تستخدمه الصورة وتعديله لاحقًا

  1. بشكل افتراضي، ستعيد حزمة الويب المسار الذي تم إنشاؤه إلى المستخدم.
  2. ومع ذلك، يتم تجميع البرنامج بأكمله في مجلد dist، لذلك تحتاج هنا إلى إضافة dist/ آخر إلى المسار.
  على النحو التالي:
  

باختصار، بعد التعبئة، يبدو ملف الصورة بهذا الشكل

4)، ES6 إلى ES5 بابل

5. تكوين Vue في webpack

• الخطوة 1: أمر التنفيذ الطرفي (npm install --save vue)

• الخطوة 2: استيراد Vue في main.js (استيراد Vue من 'vue') كما يلي

• الخطوة 3: قم بتعليق p على نسخة vue في ملف Index.html، كما يلي

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

عمليات محددة: تحتاج إلى إضافة العزم إلى حزمة الويب وأخذ اسم مستعار ( alias )، كما يلي:

6. استخدام Vue في حزمة الويب

الخطوة 1: قم بتعليق p على مثيل vue في ملف Index.html

الخطوة 2: استيراد مكون APP إلى ملف main.js ، وتسجيل التطبيق في مثيل Vue ، واستخدام المكون APP في قالب Vue ( التكوين )

الخطوة 3: إنشاء ملف APP.vue وفصل قالب صفحة vue عن كود js ورمز css ، كما يلي

الخطوة 4: تكوين المُحمل المقابل لـ vue،

قم بتعديل ملف التكوين الخاص بـ webpack.config.js:

7. استخدام البرنامج المساعد

1. فهم البرنامج المساعد

• ما هو البرنامج المساعد؟
  1. البرنامج المساعد يعني البرنامج المساعد، والذي يستخدم عادة لتوسيع بنية موجودة.
  2. المكونات الإضافية في حزمة الويب هي امتدادات مختلفة لوظائف حزمة الويب الحالية، مثل تحسين التغليف وضغط الملفات وما إلى ذلك.
• الفرق بين المُحمل والمكون الإضافي
  1. يستخدم اللودر بشكل أساسي لتحويل أنواع معينة من الوحدات وهو محول
  2. البرنامج المساعد هو مكون إضافي، وهو امتداد لحزمة الويب نفسها
• وعملية استخدام البرنامج الإضافي للموسع.
  1. الخطوة 1: التثبيت من خلال npm يتطلب استخدام المكونات الإضافية (بعض المكونات الإضافية المضمنة بالفعل في حزمة الويب لا تحتاج إلى التثبيت)
  2. الخطوة 2: تكوين المكون الإضافي في المكونات الإضافية في webpack.config.js

2. Webpack-Add معلومات حقوق الطبع والنشر استخدام البرنامج المساعد

3. حزمة البرنامج المساعد أتش تي أم أل

4.js البرنامج المساعد للضغط

8. إنشاء خادم محلي

• : يوفر Webpack خادم تطوير محلي اختياريًا. تم إنشاء هذا الخادم المحلي بناءً على Node.js ويستخدم إطار العمل السريع داخليًا، ويمكنه تحقيق ما نريد من خلال السماح للمتصفح بالتحديث وعرض النتائج المعدلة تلقائيًا .

• ومع ذلك، فهي وحدة منفصلة. تحتاج إلى تثبيتها قبل استخدامها في webpck. الأمر: (npm install --save-dev [email protected])

• devserver هو أيضًا خيار في webpack يمكن تعيينها على النحو التالي الخاصية :
  1. contentBase: المجلد الذي يوفر الخدمات المحلية هو المجلد الجذر الذي نحتاج إلى ملؤه ./dist هنا.
  2. المنفذ: رقم المنفذ
  3. مضمّن: تحديث الصفحة في الوقت الفعلي
  4. HistoryApiFallback: في صفحة SPA،

• يتم تعديل تكوين ملف webpack.config.js لوضع السجل الذي يعتمد على HTML5 على النحو التالي:
  

• تعني المعلمة –open فتح المتصفح مباشرة

بالإضافة إلى ذلك،

نريد أدناه فصل ملفات تكوين حزمة الويب: أي فصل الأشياء اللازمة للتطوير والأشياء المستخدمة للنشر ( التجميع ). على النحو التالي:

9. Vue CLI

1. ماذا يعني CLI؟

السقالات

• .
• Vue CLI عبارة عن سقالات مشروع vue.js تم إصدارها رسميًا
• باستخدام vue-cli، يمكنك إنشاء بيئة تطوير Vue وتكوين حزمة الويب المقابلة بسرعة

المتطلبات الأساسية لاستخدام Vue CLI - Node (يجب تثبيت العقدة)

ومع ذلك، لاستخدام Node، يجب أن يكون npm متضمنًا

.

• الاسم الكامل لـ NPM هو Node Package Manager
• ، وهو أداة لإدارة وتوزيع حزم NodeJS، وقد أصبح معيارًا غير رسمي لنشر وحدات Node (الحزم)
• وغالبًا ما يستخدم NPM لتثبيت بعض الحزم التابعة أثناء عملية التطوير.

3. استخدم Vue CLI

• لتثبيت Vue scaffolding

npm install -g @vue/cli

ملاحظة: الإصدار المثبت أعلاه هو إصدار Vue CLI3 إذا كنت تريد تهيئة المشروع وفقًا لطريقة Vue CLI2، فلا يمكن

• التهيئة مشروع Vue CLI2

vue init webpack my -project