Why webpack

لفهم سبب استخدام webpack، دعنا نسترجع كيف كنا نستخدم JavaScript على الويب قبل ظهور المجمعات.

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

IIFEs - تعبيرات الدوال المستدعاة فورًا

تحل IIFEs مشكلات النطاق في المشاريع الكبيرة؛ عندما تُلف ملفات السكربت داخل IIFE، يمكنك دمج الملفات أو جمعها بأمان دون القلق من تصادم النطاقات.

أدى استخدام IIFEs إلى ظهور أدوات مثل Make و Gulp و Grunt و Broccoli و Brunch. تُعرف هذه الأدوات باسم مشغلات المهام، وهي تجمع كل ملفات مشروعك معًا.

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

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

ولادة وحدات JavaScript بفضل Node.js

يعمل webpack على Node.js، وهو runtime لـ JavaScript يمكن استخدامه في الحواسيب والخوادم خارج بيئة المتصفح.

عندما صدر Node.js بدأت حقبة جديدة، وجاءت معها تحديات جديدة. بما أن JavaScript لم تعد تعمل داخل المتصفح فقط، كيف يفترض بتطبيقات Node أن تحمل أجزاء جديدة من الكود؟ لا توجد ملفات HTML ولا وسوم script يمكن إضافتها إليها.

ظهر CommonJS وقدم require، مما يسمح بتحميل وحدة واستخدامها داخل الملف الحالي. حلّ ذلك مشكلات النطاق مباشرة عبر استيراد كل وحدة عند الحاجة إليها.

npm + Node.js + modules - توزيع واسع النطاق

تسيطر JavaScript على العالم كلغة ومنصة وطريقة لتطوير تطبيقات سريعة وإنشائها بسرعة.

لكن المتصفحات لا تدعم CommonJS. لا توجد live bindings. توجد مشكلات مع المراجع الدائرية. كما أن حل الوحدات وتحميلها بشكل متزامن بطيء. ومع أن CommonJS كان حلًا رائعًا لمشاريع Node.js، لم تكن المتصفحات تدعم الوحدات، لذلك ظهرت مجمعات وأدوات مثل Browserify و RequireJS و SystemJS، مما سمح لنا بكتابة وحدات CommonJS تعمل في المتصفح.

ESM - وحدات ECMAScript

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

جمع التبعيات تلقائيًا

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

ألن يكون رائعًا...

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

لهذا وُجد webpack. إنه أداة تسمح لك بتجميع تطبيقات JavaScript، مع دعم ESM و CommonJS، ويمكن توسيعها لدعم أصول مختلفة كثيرة مثل الصور والخطوط وملفات التنسيق.

يهتم webpack بالأداء وأوقات التحميل؛ فهو يتحسن دائمًا أو يضيف ميزات جديدة، مثل تحميل chunks بشكل غير متزامن و prefetching، لتقديم أفضل تجربة ممكنة لمشروعك ومستخدميك.