الطرد هو باني المشروع المفضل

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



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

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

ميزات الطرود

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

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

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

نطاق استخدام الطرود

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

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

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

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

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

إنشاء موقع بسيط باستخدام الطرود

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


صفحة المشروع التجريبي

سنقوم بإنشاء موقع بسيط يستخدم Sass وقليلًا من JavaScript. سنقوم بعرض معلومات حول اليوم الحالي من الأسبوع وصورة عشوائية تم تنزيلها من مصدر Unsplash في صفحة الموقع.

structure الهيكل الأساسي للمشروع

لا يحتاج المشروع ، الذي تم تخطيطه لاستخدام Parcel ، إلى بنية خاصة من الملفات والمجلدات. ليس من الضروري استخدام إطار عمل معين. سيتألف الهيكل الأساسي للمشروع من ثلاثة ملفات تتحدث أسماؤها عن نفسها. هذه هي index.html و style.scss و index.js . يمكنك إنشاء لهم بالطريقة التي تريدها. على سبيل المثال ، باستخدام سطر الأوامر:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

أضف رمزًا صغيرًا للترميز والترميز إلى ملف index.html الذي index.html إليه وظيفة المشروع:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

ربما لاحظت أنني هنا أقوم بتنزيل خط الويب ( Lato ) من خطوط Google. استخدام الخطوط القابلة للتنزيل أمر تطوعي. يجدر الانتباه هنا إلى توصيل ملفات CSS و JavaScript ، ورمز HTML الخاص بنص المستند ، والذي يوفر مكانًا لإخراج المعلومات حول يوم الأسبوع ، ومكانًا لإخراج صورة عشوائية من Unsplash. في الواقع ، في هذا العمل على الانتهاء من الهيكل الأساسي للمشروع.

ira معجزة الإعداد السريع لا يتجزأ من العمل

الآن ، قبل الانتقال إلى التصميم والبرمجة النصية ، دعونا نحاول تشغيل مشروعنا باستخدام الطرود. لا يوجد شيء غير عادي حول تثبيت الطرود:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

الآن قم بتهيئة المشروع باستخدام npm أو الغزل ، مما سيؤدي إلى إنشاء ملف package.json :

 npm init -y #  yarn init -y 

هذا كل شئ! لا تحتاج إلى مزيد من الإعدادات. كل ما تبقى بالنسبة لنا هو إخبار Parcel بالملف الذي يمثل نقطة دخول المشروع. سيسمح ذلك للمجمع بمعرفة ما يحتاجه خادمه لتقديمه للعملاء.

في حالتنا ، سيكون مثل هذا الملف index.html :

 parcel index.html 

بعد بدء تشغيل الخادم بنجاح ، سيتم عرض ما يلي في وحدة التحكم:

 Server running at http://localhost:1234 √ Built in 13ms. 

خادم Parcel يدعم التشغيل السريع. يقوم المجمّع بإعادة إنشاء التطبيق في كل مرة يتم فيها حفظ التغييرات التي تم إجراؤها على ملفات المشروع.

دعنا نعود إلى مجلد المشروع. هنا يمكنك رؤية المجلدات والملفات الجديدة التي أنشأها المجمّع.


المجلدات والملفات الجديدة التي تم إنشاؤها بواسطة المجمّع

نحن مهتمون بشكل خاص بمجلد dist . أنه يحتوي على جميع التعليمات البرمجية المترجمة ، بما في ذلك خرائط الأكواد ل CSS و JavaScript.

work استمرار العمل في المشروع

دعنا style.scss ملف style.scss والتعرف على كيفية معالجة Parcel لرمز Sass. لقد أنشأت هنا العديد من المتغيرات المستخدمة لتخزين ألوان وعرض الحاوية التي يتم فيها وضع محتويات الصفحة:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

الآن ، في نفس الملف ، أضف أوصاف النمط. هنا يمكنك إنشاء ما تريد. على سبيل المثال ، فعلت هذا:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

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

إليك الشكل الذي ستبدو عليه الصفحة بعد التصميم.


منمق صفحة

يبقى فقط أن نعرض هنا اسم اليوم الحالي من الأسبوع. في سياق حل هذه المشكلة ، سوف نستخدم فرق الاستيراد والتصدير . سيؤدي هذا إلى اختبار قدرة Parcel على العمل مع آليات JavaScript الحديثة.

أنشئ ملفًا today.js وقم بتصدير منه دالة تُرجع ، باستخدام صفيف بأسماء أيام الأسبوع ، اسم اليوم الحالي:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

لاحظ أن وظيفة getDay أول أيام الأسبوع.

نحن تصدير وظيفة getDay من getDay . الآن دعنا نذهب إلى ملف index.js واستيراد هذه الوظيفة إليه من ملف today.js . سيؤدي ذلك today.js معالجة ملف today.js أثناء تجميع المشروع.

 import { getDay } from './today'; 

يدعم الطرد ، دون أي إعدادات إضافية ، بناء جملة وحدات ES6 ، حتى نتمكن من استخدام أوامر الاستيراد والتصدير في ملفات JS.

الآن علينا فقط تحديد عنصر <span> المطابق وتمرير القيمة التي يتم إرجاعها بواسطة الدالة getDay . أضف الكود التالي إلى index.html :

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

بعد حفظ الملف ، سيتم إعادة بناء المشروع ، وسوف تتغير صفحته في المتصفح.


الانتهاء من المشروع

a بناء مشروع للإنتاج

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

لتحويل المشروع إلى نموذج مناسب للنشر ، نحتاج فقط إلى أمر واحد:

 parcel build index.html 

بعد تشغيل هذا الأمر ، ستحصل وحدة التحكم على شيء مشابه لما هو موضح في الشكل التالي.


مشروع التجمع

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

النتائج

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

أعزائي القراء! أي حزمة تستخدمها؟