Parcel ، حزمة ويب أبسط

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

Parcel عبارة عن حزمة تطبيقات ويب.

إنه في نفس فئة الأداة منحزمة الويب، مع عرض قيمة مختلفة.

تتضمن مجموعة الميزات الرئيسية

تجميع الأصول (JS ، CSS ، HTML ، الصور)
تقسيم رمز التكوين الصفري
تحويلات تلقائية باستخدامبابلوPostCSSو PostHTML
استبدال وحدة ساخنة
التخزين المؤقت والمعالجة المتوازية لبناءات أسرع

يعد Parcel بالقيام بكل هذا دون أي تكوين على الإطلاق ، ويكون سريعًا أيضًا.

تثبيت

يتم تثبيت الطرود باستخدامغزل:

yarn global add parcel-bundler

أوnpm:

npm install -g parcel-bundler

بدء الطرود

يمكن البدء باستخدام الطرود

parcel watch index.html

سيبدأ في البحث عن الأصول من مصدر صفحة HTML ، واستبدال أي من المراجع التي يعالجها بملف الإخراج.

يمكنك أيضًا توجيه Parcel إلى ملف JS بدلاً من ذلك:

parcel watch entry.js

خادم التطوير

يأتي Parcel بشكل ملائم مع خادم تطوير مدمج ، لذلك لا يتعين عليك إعداد خادم. يمكنك البدء بـ:

parcel index.html

حزمة جاهزة للإنتاج

عندما تكون راضيًا عن تطبيقك وترغب في إنشاء حزمة جاهزة للإنتاج ، قم بتشغيل

parcel build index.html

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

كما يقوم تلقائيًا بتشغيل ملفNODE_ENVمتغير لproduction، لجعل المكتبات تُنشئ كود الإنتاج (مثل React وVueاستخدم هذه الاتفاقية)

أصول

JavaScript

يدعم الطرود كليهماوحدات ES(import...) وCommonJS(require...).

ينفذتقسيم تلقائي للكود باستخدام الواردات الديناميكية.

ماذا يعني هذا ولماذا هذا مفيد؟

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

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

نرىتقسيم الكودلمزيد من التفاصيل.

CSS

يدعم Parcel CSS و Sass و Less و Stylus.

يمكنك كتابة CSS الخاص بك باستخداموحدات CSS.

يتحول

عندما يجد Parcel أن لديك تكوينًا لأحد ملفات

بابل (.babelrc)
PostCSS (.postcssrc)
PostHTML (.posthtmlrc)

سيستخدم ذلك تلقائيًا في عملية التجميع الخاصة به.

استبدال الوحدة الساخنة

يعد استبدال الوحدة الساخنة (HMR) ميزة مفيدة عند إنشاء تطبيق. عندما نحفظ نسخة جديدة من CSS أو JavaScript ، يعتني HMR بتحديث الوحدة في المتصفح ، دون تحديث التطبيق بأكمله.

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

الطرود مقابل حزمة الويب

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

يتيح لك webpack القيام بالعديد من الأشياء ، وعلى الرغم من أن هذا رائع جدًا ، إلا أنه يعني أيضًا أننا بحاجة إلى تكوينه بعناية للقيام بما نريده بالضبط.

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

يعدنا Parcel بالقيام بالكثير مما يفعله webpack ، ولكنبدون أي تكوين على الإطلاق، يعتمد علىالاتفاقيات على التكوين.

حزمة الويب 4 ، في الغالب استجابة لنجاح Parcel ، قدمت وضع التكوين الصفري ، مع بعض الاصطلاحات ، بدلاً من طلب التكوين دائمًا.

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

التي ينبغي لأحد أن تستخدمها؟أود أن أوصي بـ Parcel للمشاريع الصغيرة ، و webpack عندما تنمو خارج إمكانياتها وتريد التحكم المطلق في كل ما يفعله مجمع الوحدات الخاص بك.