مقدمة إلى Webpack: ما هو وكيفية استخدامها

المقدمة

حسنًا ، لذلك افترض أنك سمعت عن حزمة الويب - لهذا السبب أنت هنا ، أليس كذلك؟ السؤال الحقيقي هو ماذا تعرف عن ذلك؟ قد تعرف بعض الأشياء عن ذلك ، مثل كيفية عمله ، أو قد لا يكون لديك أي فكرة على الإطلاق. في كلتا الحالتين ، يمكنني أن أؤكد لك أنه بعد قراءة هذه المقالة ، من المحتمل أن تشعر بالراحة الكافية مع الموقف الكامل لحزمة الويب.

بعد كل شيء - الضرورة هي أم الاختراع ...

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

ما هي المشكلة؟

شارك مجتمع dev بأكمله في السعي المستمر لتحسين تجربة المستخدم والمطور الشاملة حول استخدام وبناء تطبيقات جافا سكريبت / الويب. لذلك ، رأينا الكثير من المكتبات والأطر الجديدة المقدمة.

تطورت بعض أنماط التصميم أيضًا بمرور الوقت لمنح المطورين طريقة أفضل وأكثر قوة ولكنها بسيطة جدًا لكتابة تطبيقات JavaScript المعقدة. المواقع من قبل لم تعد مجرد حزمة صغيرة مع عدد فردي من الملفات فيها. صرحوا بأن الحصول على ضخمة ، مع إدخال وحدات جافا سكريبت ، حيث كانت الكتابة عبارة عن قطع صغيرة من الكود المغلفة هي الاتجاه الجديد. في النهاية ، كل هذا يؤدي إلى موقف حيث كان لدينا ملفات 4x أو 5x في حزمة التطبيق الشاملة.

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

للإجابة على هذه المشكلات ، تم إنشاء حزمة الويب. Webpack هو المجمد وحدة ثابتة.

فكيف كان Webpack الجواب؟

باختصار ، تتصفح Webpack الحزمة الخاصة بك وتقوم بإنشاء ما تسميه رسم بياني تبعية يتكون من وحدات نمطية مختلفة قد يحتاج webapp الخاص بك للعمل كما هو متوقع. بعد ذلك ، بناءً على هذا الرسم البياني ، يقوم بإنشاء حزمة جديدة تتكون من الحد الأدنى لعدد الملفات المطلوبة ، وغالبًا ما يكون ملف bundle.js واحدًا ويمكن توصيله بملف html بسهولة واستخدامه للتطبيق.

خلال الجزء التالي من هذا المقال ، سوف أقودك خلال الإعداد خطوة بخطوة ل webpack. في نهاية الأمر ، أتمنى أن تفهم أساسيات Webpack. لذلك دعونا الحصول على هذا المتداول ...

ما الذي نبنيه؟

ربما سمعت من ReactJS. إذا كنت تعرف reactJS ، فمن المحتمل أن تعرف ما هو تطبيق create-react-app. بالنسبة لأولئك منكم الذين ليس لديهم أي فكرة عن أيٍّ من هذين الأمرين ، ReactJS هي مكتبة واجهة المستخدم والتي تعد مفيدة للغاية في بناء واجهات مستخدم معقدة معقدة ، وإنشاء تطبيق تفاعل - أداة هي أداة CLI لإعداد أو إعداد إعداد boilerplate dev لجعل تطبيقات React.

اليوم سنقوم بإنشاء تطبيق React بسيط ولكن دون استخدام CLI create-react-app. آمل أن يكون هذا يبدو ممتعًا بدرجة كافية لك. :)

مرحلة التثبيت

npm int

هذا صحيح ، هذا ما تبدأه كل الأشياء الجيدة تقريبًا: بدء تشغيل npm القديم العادي. سأستخدم رمز VS ، لكن لا تتردد في استخدام أي محرر رموز ترغب في بدء تشغيله.

قبل أن تتمكن من القيام بأي من هذا ، فكر ، تأكد من تثبيت أحدث nodeJS وإصدار npm محليًا على جهازك. انقر على كل من هذه الروابط لمعرفة المزيد عن هذه العملية.

$ npm init

سيؤدي ذلك إلى إنشاء حزمة بداية وإضافة ملف package.json لنا. هذا هو المكان الذي سيتم فيه ذكر جميع التبعيات المطلوبة لبناء هذا التطبيق.

الآن لإنشاء تطبيق React بسيط ، نحتاج إلى مكتبتين رئيسيتين: React و ReactDOM. لذلك ، دعنا نضيفهم كتبعيات في تطبيقنا باستخدام npm.

$ npm أتفاعل رد فعل dom - حفظ

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

$ npm i webpack webpack-dev-server webpack-cli - حفظ - ديف

- - حفظ - ديف هو تحديد أن هذه الوحدات هي مجرد تبعيات ديف. الآن بما أننا نعمل مع React ، يجب أن نضع في اعتبارنا أن React يستخدم فئات ES6 وبيانات الاستيراد ، وهو أمر قد لا تستطيع جميع المتصفحات فهمه. للتأكد من أن الشفرة قابلة للقراءة بواسطة جميع المتصفحات ، نحتاج إلى أداة مثل babel لنقل الشفرة إلى الشفرة العادية القابلة للقراءة للمتصفحات.

$ npm i babel-core babel-loader @ babel / preset-react @ babel / preset-env html-webpack-plugin --save-dev

حسنًا ، ما الذي يمكنني قوله ، كان الحد الأقصى لعدد عمليات التثبيت التي أعدك بها. في حالة بابل ، قمنا بتحميل مكتبة بابل الأساسية أولاً ، ثم اللودر ، وأخيراً 2 ملحقات أو إعدادات مسبقة للعمل بالتحديد مع React وكافة التعليمات البرمجية ES2015 و ES6 الجديدة فصاعداً.

عند الانتقال ، دعنا نضيف بعض الرموز ودعونا نبدأ تكوين حزمة الويب.

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

الرمز

لنبدأ بإضافة ملف webpack.config.js في جذر بنية التطبيق لدينا. أضف الكود التالي في ملف webpack.config.

const مسار = تتطلب ('مسار') ؛
const HtmlWebpackPlugin = require ('html-webpack-plugin')؛
module.exports = {
  // تحدد هذه الخاصية مكان بدء التطبيق
  دخول: "./ SRC / index.js،
  // تحدد هذه الخاصية مسار الملف واسم الملف الذي سيتم استخدامه لنشر الملف المجمّع
  انتاج:{
    path: path.join (__ dirname، '/ dist')،
    اسم الملف: 'bundle.js'
  }،
  // الإعداد لوادر
  وحدة: {
    قواعد: [
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        استعمال: {
          لودر: 'بابل لودر'
        }
      }
    ]
  }،
// إعداد البرنامج المساعد لاستخدام ملف HTML لخدمة ملفات js المجمعة
 الإضافات: [
    جديد HtmlWebpackPlugin ({
      القالب: './src/index.html'
    })
  ]
}

حسنًا ، لذلك دعونا نفهم الأسطر أعلاه.

نبدأ أولاً بطلب وحدة المسار الافتراضية للوصول إلى موقع الملف وإجراء تغييرات على موقع الملف.

بعد ذلك ، نطلب من HTMLWebpackPlugin إنشاء ملف HTML ليتم استخدامه لخدمة ملفات / ملفات JavaScript المدمجة. اقرأ المزيد حول HTMLWebpackPlugin بالنقر فوق الارتباط.

ثم لدينا كائن export.module مع بعض الخصائص فيها. الأول هو خاصية الإدخال ، والتي تُستخدم لتحديد أي حزمة من ملفات الويب يجب أن تبدأ في الحصول على الرسم البياني للاعتماد الداخلي الذي تم إنشاؤه.

module.exports = {
  دخول: "./ SRC / index.js"
}

التالي لأعلى هو خاصية الإخراج التي تحدد أين يجب إنشاء الملف المجمع وما هو اسم الملف المجمّع. يتم ذلك بواسطة خصائص output.path و output.filename.

module.exports = {
// تحدد هذه الخاصية مسار الملف واسم الملف الذي سيتم استخدامه لنشر الملف المجمّع
  انتاج:{
    path: path.join (__ dirname، '/ dist')،
    اسم الملف: 'bundle.js'
  }،
}

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

module.exports = {
// الإعداد لوادر
  وحدة: {
    قواعد: [
      {
        اختبار: / \. js$/ ،
        استبعاد: / node_modules / ،
        استعمال: {
          لودر: 'بابل لودر'
        }
      }
    ]
  }
}

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

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

module.exports = {
// إعداد البرنامج المساعد لاستخدام ملف HTML لخدمة ملفات js المجمعة
 الإضافات: [
    جديد HtmlWebpackPlugin ({
      القالب: './src/index.html'
    })
  ]
}

هذا البرنامج المساعد المحدد ، كما هو موضح سابقًا ، سوف يستخدم الملف المحدد في مجلد src الخاص بنا. بعد ذلك ، سيتم استخدام ذلك كقالب لملف HTML الخاص بنا ، حيث سيتم حقن جميع الملفات المجمعة تلقائيًا. هناك الكثير من المكونات الإضافية الأخرى التي يمكننا استخدامها - اطلع على الصفحة الرسمية لمزيد من المعلومات.

آخر شيء نحتاج إلى القيام به هو إنشاء ملف .babelrc لاستخدام الإعداد المسبق لـ babel الذي قمنا بتثبيته والعناية بفئات ES6 وبيانات الاستيراد في التعليمات البرمجية الخاصة بنا. أضف سطور التعليمات البرمجية التالية إلى ملف .babelrc.

{
  "الإعدادات المسبقة": ["env" ، "react"]
}

ومثل هذا ، الآن بابل ستكون قادرة على استخدام هذه الإعدادات المسبقة. حسنًا بما يكفي من الإعداد - دعنا نضيف رمز React لنرى كيف يعمل هذا.

رد الفعل كود

نظرًا لأن نقطة الانطلاق للتطبيق هي ملف index.js في مجلد src ، فلنبدأ بذلك. سنبدأ بطلب كل من React و ReactDOM لاستخدامنا في هذه الحالة. أضف الكود أدناه في ملف index.js الخاص بك.

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
استيراد التطبيق من './Components/App' ؛
ReactDOM.render (، document.getElementById ('app'))؛

لذلك نحن ببساطة استيراد ملف آخر من مجلد المكونات لدينا ، والتي سوف تقوم بإنشائها ، وإضافة ملف آخر في مجلد يسمى App.js. لذلك دعونا نرى ما هو داخل ملف App.js:

استيراد رد فعل ، {مكون} من "رد فعل"
الطبقة التطبيق يمتد المكون {
  يجعل() {
    إرجاع (
      
        

Webpack + React setup

           )   } }
التطبيق الافتراضي للتصدير ؛

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

يمكننا القيام بذلك عن طريق إضافة قيم البرنامج النصي في ملف package.json. إزالة خاصية الاختبار في كائن البرامج النصية لملف package.json الخاص بك وإضافة هذه البرامج النصية اثنين:

"start": "webpack-dev-server - تطوير وضع - open --hot" ،
"build": "webpack - إنتاج الوضع"

أنت كل مجموعة! انتقل إلى جهازك ، وانتقل إلى المجلد الجذر ، وقم بتشغيل npm start. يجب أن يبدأ خادم dev على جهاز الكمبيوتر الخاص بك ويخدم ملف HTML في متصفحك. إذا أجريت أي تغييرات بسيطة / رئيسية وحفظت الكود ، فسيتم تحديث متصفحك تلقائيًا لإظهار أحدث مجموعة من التغييرات.

بمجرد أن تظن أنك على استعداد لتضمين التطبيق ، فستحتاج فقط إلى النقر على الأمر ، وإنشاء npm ، وسوف تنشئ حزمة الويب حزمة محسّنة في مجلد المشروع الخاص بك يمكن نشرها على أي خادم ويب.

خاتمة

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

لقد قمت بإنشاء ريبو Github مع كل الكود الموجود فيه ، لذا يرجى الرجوع إليه في حال وجود أي أسئلة.

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

هذا كل شيء الآن ، آمل أن أعود مرة أخرى بمقال مثير للاهتمام. آمل أن تكون قد استمتعت بقراءة هذا واحد!

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

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

تويتر: https://twitter.com/ashishnandansin