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

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

ما هي محررات الشيفرات البرمجية

تُعرَّف محررات الشيفرة بأنها برمجيات تُستخدم لكتابة شيفرة خاصة بلغة برمجة محددة أو شيفرات عدة لغات برمجية مقدمة دعمًا للمبرمج وفق سويات مختلفة تتعلق بسهولة متابعة الشيفرة والإكمال التلقائي للتعابير البرمجية والتنبيه إلى أخطاء الصياغة ما قبل التصريف أو التفسير.

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

وطالما أن الشيفرات هي في الأصل تعابير نصية مكتوبة فلماذا لا أستطيع استخدام محررات النصوص التقليدية مثل المفكرة أو مايكروسوفت وورد أو مستندات جوجل؟ في الواقع تستطيع ذلك بكل سهولة، لكن لنتخيل الحالة التي تكتب فيها برنامجًا مكوُنًا من 20 سطرًا برمجيًا على سبيل المثال،ولاحظ أن عليك تذكر كل تعليمات الشيفرة التي عليك وضعها في سياقها الصحيح. بعد أن تنهي كتابة برنامجك عليك نقله إلى المفسر الذي سيحلل الشيفرة ويفسرها ثم يضعها موضع التنفيذ، وقد تتفاجأ بكم من الأخطاء يشير إليها المفسر وتبدأ رحلة التقصي عنها لمعالجتها بالعودة إلى محررك النصي وتفقد مواطن الخطأ. لنفترض الآن أن أخطاءك كتابية كأن تكون قد بدلت حرفًا بآخر في التعليمات أو أغفلت حرفًا أو نقطة أو فاصلة (لم أقل أنك ارتكبت أخطاءً قواعدية Syntax errors أو في الدلالة Semantic errors فهذه قصة أخرى)، عليك هنا البحث عن هذه الأخطاء ضمن 20 سطرًا سيستغرق الأمر بعض الوقت، لكن تخيّل أن تبحث عن الأخطاء ضمن 1000 سطر أو أكثر! كارثة، أليس كذلك؟

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

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

ميزات محررات الشيفرات البرمجية

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

1. تمييز التعليمات أثناء كتابتها

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

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

2. ترقيم الأسطر

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

3. تجميع الشيفرة وترتيبها

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

إضافة إلى ذلك تعرض بعض المحررات إشارة - أو إشارة < عند بداية كل قسم تميّزه، وبالنقر على هذه الإشارة (تحول شكل الأيقونة إلى + أو >) يعرض المحرر شيفرة هذا القسم أو يخفيها للتقليل من حجم الشيفرة المعروض ضمن الصفحة وبالتالي التركيز فقط على القسم الذي يعمل عليه المبرمج.

4. التحقق من أخطاء الصياغة (قواعد اللغة)

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

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

5. الإكمال التلقائي للشيفرة

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

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

اقتباس

يقتصر الإكمال التلقائي في بعض المحررات على إنهاء الأقواس أو إشارات التنصيص تلقائيًا فعند كتابة ( مثلًا يظهر القوس المقابل ) تلقائيًا.

6. إظهار معلومات عن استخدام الشيفرة ونصائح لحل الأخطاء

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

كما تشير بعض المحررات إلى ضرورة تغيير صياغة بعض التعليمات لتتوافق مع معايير أحدث للغة، وقد تكون صياغتك صحيحة لا لبس بها. كما قد تنصحك باستخدام دوال بدلًا من دوال لأنها ستسبدل قريبًا ولن تكون متاحة لاحقًا. وتقدم بعض المحررات مبدأ الإصلاح السريع للشيفرة "Quick Fix"، إذ تقدم لك مجموعة من الحلول الجاهزة للخطأ الذي ارتكبته كي تسهّل عليك التصحيح، وتظهر عادة إشارة مصباح في الأماكن التي تُقترح فيها إصلاحات سريعة.

7. تخصيص الإكمال التلقائي

تقدم بعض المحررات إمكانية تخصيص الإكمال التلقائي من خلال ملفات إعداد خاصة وهذا أمر متقدم نوعًا ما. تتيح لك هذه الميزة مثلًا ظهور خيارات إكمال تلقائي محددة ضمن صنف معين أو ضمن كتلة معينة من الشيفرة. فلو فرضنا أنك ضمن حلقة for وكان عداد الحلقة بالاسم index فسيظهر لك الخيار index كأول خيار ضمن قوائم الإكمال التلقائي عندما تكتب الشيفرة داخل هذه الكتلة. كما يمكنك تخصيص مفاتيح محددة من لوحة المفاتيح لإدراج أفضل تكملة ممكنة لما تكتبه وفقًا للسياق مثل المفتاح Tab.

اقتباس

تختلف المحررات التي تدعم التخصيص وفق آلية عملها فتجد أنها تجربة مفيدة أحيانًا في بعض المحررات وسيئة في بعضها لهذا لا يعتمد المبرمجون المتقدمون عليها.

محررات الشيفرات البرمجية وتنفيذ الشيفرة

هل يستطيع محرر الشيفرة البرمجية تنفيذ هذه الشيفرة؟

لا يمكن لمحررات الشيفرة من ناحية المبدأ أن تنفذ الشيفرات المكتوبة فهي محررات وفقًا لتسميتها وليست مصرّفات Compilers أو مفسّرات interpreters. وكما أشرنا سابقًا، تقتصر وظيفة المحررات على تسهيل كتابة الشيفرة وتسريعها ومراقبة أخطاء الصياغة.

لكن كتابة الشيفرة على محرر ثم نقله إلى مصرّف ومن ثم إعداد النسخ التنفيذية للبرنامج على مجمّع مدير الحزم package manager أمر مربك لا يعطي راحة في العمل، لهذا يفضل معظم المبرمجين المحترفين الذي يعملون على مشاريع برمجية كاملة استخدام بيئات العمل المتكاملة Integrated Development Environment واختصارًا IDE التي تضم جميع أدوات العمل من المحررات إلى المصرّفات إلى آلات تحزيم ونشر البرمجيات.

إذًا ما الحاجة لمحررات الشيفرة إن كانت بيئات العمل المتكاملة حلًا مثاليًا؟

في الواقع لا تُعد بيئات العمل المتكاملة الحل المثالي دائمًا لأسباب عدة أهمها:

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

ظهر الحل في وجود محررات شيفرة برمجية قابلة للتوسع أي أنها تدعم تحرير عدد كبير من لغات البرمجة من ناحية تمييزها لكنها تقبل في نفس الوقت موسّعات خاصة Extensions خاصة بلغة محددة تدعم هذه المحررات بميزات إضافية من ناحية التعرف على الشيفرة والإكمال التلقائي كما تؤمن آلية لتصريف وتنفيذ الشيفرة. وهكذا تختار موسّعًا ذو حجم وإمكانات معينة تناسب أعمالك ثم تثبيته على محرر الشيفرة. نذكر من هذه المحررات فيجوال ستديو كود Visual studio code من مايكروسوفت الشهير وهو محرر مجاني ومفتوح المصدر وقابل للتوسع.

أشهر محررات الشيفرة المجانية

نستعرض تاليًا مجموعة من أكثر محررات الشيفرة شعبية

المحرر فيجوال ستديو كود VS Code

• اللغات المدعومة أصلًا: جافاسكربت و JSON و HTML و Node.js و TypeScript.
• المنصات المدعومة: ويندوز، لينكس، ماك.
• اللغات المدعومة عن طريق الموّسعات: معظم اللغات البرمجية مثل ++C و بايثون وجافا و #C و GO.
• يعمل كمحرر نصي: نعم.
• السعر: مجاني وتوجد نسخة بيئة تطوير متكاملة IDE مدفوعة.
• مفتوح المصدر: نعم

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

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

يقدم لك فيجوال ستوديو معلومات مرجعية وتعريفات بالأصناف والدوال والمتغيرات بمجرد أن تظلل العبارة البرمجية ومن ثم النقر بالزر اليميني عليها ثم اختيار المعلومة المطلوبة.

يؤخذ على هذا المحرر النقاط التالية:

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

المحرر Sublime Text

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

• اللغات المدعومة: ++C وبايثون و PHP و Rails وغيرها الكثير من خلال حزم الإضافات.
• المنصات المدعومة: ويندوز، لينكس، ماك.
• يعمل كمحرر نصي: نعم.
• السعر: مدفوع مع وجود نسخة مجانية محدودة.
• مفتوح المصدر: لا.

ومن الميزات الخاصة التي يتمتع بها Sublime text نجد:

• كم واسع من تعليمات التحرير كالإزاحة وتنسيق الفقرات والحفظ التلقائي والبحث بمجرد الكتابة.
• تعيين اختصارات للأوامر المختلفة.
• التدقيق الإملائي.
• ميزة "الانتقال إلى أي شيء Goto Anything" للانتقال السريع إلى أي ملف أو رمز أو سطر أو كائن.
• التحرير المتزامن: وهي تقنية تسمح بالكتابة في عدة ملفات أو أقسام في نفس الوقت.
• يتكامل مع برنامج Sublime Merge الذي يُستخدم كعميل للاتصال مع Git.

لهذا المحرر سلبيات عدة نذكر منها:

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

المحرر ++Notepad

يتميز هذا المحرر بسرعته الكبيرة فهو محرر خفيف ولا يعتمد على الكثير من الموارد وبالتالي سيكون المحرر المثالي للمستخدمين الذين يمتلكون حواسيب ضعيفة.

• اللغات المدعومة: أكثر من 70 لغة بما فيها ++C وبايثون و PHP وHTML و CSS و swift
• المنصات المدعومة: ويندوز، لينكس.
• يعمل كمحرر نصي: نعم.
• السعر: مجاني.
• مفتوح المصدر: فقط لنسخة لينكس.

يمتاز ++Nodepad المحرر بأنه:

• فعّال وبسيط ويؤمن ميزات مثل تمييز الصياغة اللغوية وتمييز النصوص والدوال والأقواس.
• يؤمن ميزة الإكمال التلقائي.
• قادر على تنظيم الشيفرة وتجميعها ضمن كتل يمكن عرضها وإخفاؤها.
• يزوّد هذا المحرر المستخدمين بخارطة للمستند للوصول إلى أية نقطة من الشيفرة في حال كان الملف ضخمًا. وهكذا تستطيع الانتقال بسرعة بين أي منطقتين من الملف دون الحاجة إلى التمرير إلى الأعلى والأسفل مرارًا.
• مجاني ومترجم إلى أكثر من 80 لغة منها العربية.

يؤخذ على البرنامج مايلي:

• واجهة المستخدم غير عصرية وتوحي بأنه برنامج قديم.
• لا يضم متصفح ملفات.
• صعوبة عرض عدة ملفات بطريقة مريحة مما ينعكس سلبًا عند العمل على عدة مشاريع.
• محدودية الميزات التي يقدمها موازنة بغيره.
• لا يوجد دعم رسمي لنسخة نظام لينكس، علمًا أنه بالإمكان تحميلها من متجر أوبونتو Ubuntu software center.

المحرر Bluefish

بلوفيش محرر شيفرة قوي ومخصص للمستخدمين المتمرسين من مبرمجين ومطورين ومصممين لمواقع الويب. وهو برنامج مفتوح المصدر متعدد المنصات يتميز بخفة وزنه وواجهته الرسومية السريعة.

• اللغات المدعومة: ++C وبايثون و بيرل وPHP وHTML و CSS و Ruby وجافاسكربت و SQL وغيرها الكثير.
• المنصات المدعومة: ويندوز، لينكس، ماك، FreeBSD، Solaris.
• يعمل كمحرر نصي: نعم.
• السعر: مجاني.
• مفتوح المصدر: نعم.

لمحرر بلوفيش ميزات عديدة أهمها:

• يضم شريط اختصارات سريعة يمكن أن يضع فيه المستخدم اختصارات للأداوات الأكثر استخدامًا.
• يمكن تخصيص واجهة المستخدم من ناحية اللون والشكل بما يناسب لغة البرمجة.
• يستطيع تمييز الصياغة اللغوية للغات البرمجة المدعومة ويدعم الإكمال التلقائي وإغلاق وسوم اللغات التوصيفية والتنسيقية مثل وسوم HTML و CSS.
• يمكن فتح عدد كبير من الملفات ضمن واجهة المستخدم والتعامل معها.
• معلومات مرجعية عن الشيفرات المكتوبة.
• الاستعادة التلقائية للملفات عند حدوث خطأ.
• قابل للتوسع عن طريق الإضافات والسكربتات.

لا يؤخذ على هذا المحرر الكثير لكن يواجه بعض الانتقادات مثل:

• صعوبة فتح ملفات شيفرة ضخمة الحجم فقد يتوقف أو لا يحفظ التغييرات.
• لا يدعم الاختيارات المتعددة أو البحث ضمنها أي لا يمكن اختيار أجزاء منفصلة من الشيفرة والتعامل معها.

المحرر Emacs

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

• اللغات المدعومة: ++C وبايثون و Lisp وغيرها الكثير.
• المنصات المدعومة: ويندوز، لينكس، ماك، FreeBSD.
• يعمل كمحرر نصي: نعم.
• السعر: مجاني.
• مفتوح المصدر: نعم.

للمحرر Emacs الميزات التالية:

• يتميز هذا المحرر بقدرته على تصريف وتنفيذ الشيفرة واختبار البرامج وتنفيذ الأوامر التنفيذية shell commands.
• خيارات متقدمة للبحث والاستبدال.
• يعمل من خلال واجهة رسومية أو من خلال الطرفية.
• يميز الصياغة اللغوية ويدعم الإكمال التلقائي من خلال نمط الإكمال التلقائي إذ يدعم المحرر عدة أنماط للعمل.
• يضم مستكشف ملفات.

يؤخذ على هذا المحرر:

• صعوبة التعامل معه وخاصة للمبتدئين.
• لا بد من العودة دائمًا إلى التوثيق الخاص به لتذكر تعليمات الضبط والإعداد.
• صعوبة التعامل مع نمط الإكمال التلقائي.

ملاحظة: يمكنك أيضًا استخدام محرات شيفرة تعمل من خلال الإنترنت نذكر منها Codepen و CodeSandbox و Glitch و Repl.it.

خاتمة

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

اقرأ أيضًا

• محررات الشيفرة البرمجية
• ما هو أفضل محرر أكواد بايثون
• أسلوب كتابة الشيفرات البرمجية وتحقيق سهولة قراءتها

تعد لغة البرمجة بايثون Python من أكثر اللغات انتشارًا لسهولة تعلمها ولدعمها الكثير من المشاريع مثل مواقع الويب وأدوات سطح المكتب والبرمجيات الخاصة بالمؤسسات وحتى السكربتات الصغيرة المُساعدة على أتمتة المهام الدورية، واستُخدمَت بايثون لكتابة جميع مشاريع البرامج الشهيرة أو أجزاء منها مثل dnf/yum و OpenStack و OpenShot و Blender و Caliber وحتى وكيل BitTorrent الأصلي.

تطوير تطبيقات بايثون يكون عبر محررات وبيئات تطوير متكاملة وهي كثيرة للغاية، إذ يفضل البعض استخدام محرر نصي بسيط مثل إيماكس Emacs أو Vim أو Gedit، وجميع هذه المحررات قابلة لتوسيع إمكانياتها مثل ميزة إبراز صيغة الجملة syntax highlighting والإكمال التلقائي، أما بالنسبة للمستخدم المحترف الذي يعمل في مشاريع كبيرة معقدة فيفضّل استخدام بيئة تطوير متكاملة IDE بدلًا من الجمع بين استخدام محرر نصي بسيط وسطر الأوامر terminal.

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

نُشر استبيان يتضمن السؤال التالي:

اقتباس

"ما هي بيئة التطوير المتكاملة IDE المفضلة لديك لبرمجة مشاريع بلغة بايثون؟"

عدد الإجابات وصل إلى 40095 إجابة وتظهر التفاصيل كما يلي:

يذكر المقال خمس بيئات ويشرح تفاصيلها لمساعدتك على اختيار الأنسب لك، وجميع هذه الخيارات متعددة المنصات cross-platform لذا يمكن استخدامها على نظام التشغيل الذي تختاره.

بيئة PyCharm

يعتبر PyCharm   محرر بايثون بسيط وصغير الحجم نسبيًا وشائع الاستخدام، يتوفر منه إصدارين أحدهما مجاني ومفتوح المصدر وهو الإصدار المجتمعي المتاح بموجب ترخيص Apache 2.0 والآخر مدفوع.

يمتلك pycharm جميع خصائص بيئة التطوير المتكاملة وهي:

• فحص الشيفرة البرمجية
• أدوات تغيير هيكلية الشيفرة البرمجية
• منظومة اختبار وحدات مدمجة integrated unit testing
• نظام تحكم بالإصدار مدمج integrated version control
• أدوات المراقبة والتحكم بالمشروع
• إبراز صيغة الجملة والإكمال التلقائي

أما قصور PyCharm تتمثل في احتكار العديد من المزايا المتقدمة للإصدار مغلق المصدر وعدم توفيرها في الإصدار مفتوح المصدر، بالإضافة إلى نموذج النواة المفتوح Open core الذي يعتمده.

بيئة Eric

إريك Eric بيئة تطوير متكاملة لتحرير شيفرات بايثون، وسُميّت باسم الممثل Eric Idle في برنامج Monty Python.

كُتبَت إريك بلغة بايثون باستخدام إطار العمل Qt، ومتاحة بموجب الإصدار الثالث من GPL.

تستخدم بيئة إريك Scintilla وهو مكوِّن لتحرير الشيفرة المصدرية يُستخدم في العديد من برامج تحرير النصوص والعديد من بيئات التطوير المتكاملة، وهو متاح أيضًا كمحرر SciTE مستقل.

تتميز بيئة إريك بما يلي:

• صغيرة الحجم
• إبراز الأقواس المتقابلة
• إكمال الشيفرة
• متصفح الصنف class browser
• اختبار الوحدة المدمجة
• دالة مدمجة مع بيئة التطوير لقائمة المهام
• دالة لمعاينة نموذج Qt: تُساعد المستخدم عند تطوير واجهة رسومية بالاعتماد على Qt لتطبيق ما

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

بيئة Pyzo

يُعدّ Pyzo محرر بايثون يمتلك العديد من المزايا مثل سجل ومصحح أخطاء ومتعقب مسافة بادئة ومتتبع للتعليمات البرمجية، كما أنه مزود بمستعرض ملفات مدمج ومستعرض للمشروع project overview.

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

لا يعد pyzo بيئة تطوير متكاملة مثل اكلبس Eclipse لعدم امتلاكه بنية مزودة بالملحقات plugin architecture ولكن يعده البعض بديلاً لماتلاب MATLAB كونه يناسب مشاريع الحوسبة العلمية مثل الرياضيات والعلوم المتقدمة، ويعد باختصار بيئة تطوير متكاملة بسيطة ومفتوح المصدر وبالتالي قابل للتخصيص بطبيعته مما يجعله مناسبًا لأي مشروع بايثون.

بيئة Spyder

تتشابه بيئة Spyder مع Pyzo في الجمهور المستهدف فهو موجّه لعلماء البيانات ولكن يختلف مع المحرر Pyzo بكونه بيئة متكاملة.

تتصف Spyder بالتعقيد لكونها بيئة كبيرة وغنية بالميزات وتمتلك لوحات لعرض البيانات المُدخلة وخرج الشيفرة البرمجية والسجلات والتأريخ history وغير ذلك الكثير.

يمكن تنزيلها لوحده أو كجزء من حزمة مع توزيعة أناكوندا Anaconda وهي مجموعة أدوات برمجة شائعة يستخدمها مبرمجو لغتي بايثون Python و R.

Eclipse مع PyDev

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

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

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

يمكن الاستفادة من PyDev عند استخدام إطار عمل الويب جانغو Django بلغة بايثون الشهير لإنشاء مشاريع جانغو جديدة وتنفيذ إجراءات جانغو باستخدام مفاتيح الاختصار hotkeys واستخدام تكوين تشغيل منفصل خاص بجانغو.

يتوفر كل من Eclipse و PyDev بموجب ترخيص Eclipse العام.

خيارات أخرى

يتوفر الكثير من خيارات برامج تحرير شيفرات بايثون مفتوحة المصدر وبيئات التطوير المتكاملة، وفيما يلي البعض منها:

• أدوات بايثون Python Tool Kit والتي تعرف اختصارًا باسم PTK و PyScripter و LeoEditor وهي أدوات لتحرير شيفرة بايثون، ويوجد IDLE وهو بيئة تطوير IDE لبايثون.
• برامج تحرير شيفرات بايثون البرمجية للأغراض العامة مع دعم بايثون من خلال الملحقات مثل Geany و Atom و Brackets.
• بيئات تطوير متكاملة مفتوحة المصدر للأغراض العامة يمكن تحويلها كما في Eclipse إلى برامج تحرير بايثون باستخدام ملحقات محددة وبعض التوسعات، ومن الأمثلة عليها: Netbeans و VS Code أو النسخة الحرة منه VS Codium.
• قد تمتلك معظم برامج تحرير التعليمات البرمجية القابلة للتوسيع دعم بايثون، فمثلًا يمكن تحويل محرر النصوص إيماكس Emacs إلى بيئة تطوير بايثون متكاملة Python IDE باستخدام بعض الحزم وإعدادات الضبط التي يجب استخدامها، كما يحتوي محرر KDE Kate على مزايا مثل إبراز صيغة الجملة والتحكم بإظهار أو إخفاء الشيفرة البرمجية code collapsing ودعم قراءة كافة ملفات المشروع بمجرد فتح مجلد المشروع الرئيسي، بالإضافة إلى امتدادات أخرى مُساعدة.

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

خاتمة

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

ترجمة -وبتصرف- للمقال Top 5 open source Python IDEs لصاحبه Jason Baker.

اقرأ أيضًا

• مدخل إلى بيئة التطوير المتكاملة IDE
• المرجع الشامل إلى تعلم لغة بايثون

في السبعينيات، كانت تُعالج الملفات النصية بطريقة بدائية جدًا لا تشبه أي شكل من أشكال محررات النصوص اليوم مثل تطبيقات ليبر أوفيس وذلك باستخدام أوامر مثل ed التي تبحث على سطر معين وتدرج بعده نصًا آخر أو تزله بشكل مشابه لقائمة البحث والاستبدال حاليًا ولكن بأسلوب أقرب إلى آلة كاتبة متطورة قليلًا، إلى أن جاء بيل جوي Bill Joy وصمم أول محرر مرئي عُرف باسم Vi اختصارًا لعبارة visual editor الذي اكتسب شهرةً واسعةً لكونه تطبيقًا مريحًا جدًا أتاح عرض الملفات بالكامل على الشاشة وتحريرها مباشرة.

طُوِّرَت لاحقًا نسخة من Vi باسم Vim اختصارًا لعبارة Vi Improved أي تطبيق Vi المُحسَّن، ولهذا السبب يُعرف فيم Vim باسم Vi أيضًا، وقد بقيت الأوامر الخاصة بفيم في بعض أنظمة بوزيكس POSIX تحمل اسم vi، ويعتبر فيم شائع الاستخدام أكثر من في Vi.

محرر النصوص فيم Vim

فيم Vim هو محرر نصوص خاص بنظام التشغيل يونيكس Unix ومضمّن في كل من أنظمة التشغيل لينكس Linux وماك mac ونظام BSD، يشتهر بالسرعة والكفاءة في الأداء لكونه تطبيقًا صغيرًا يمكن تشغيله من خلال سطر الأوامر أو مع واجهة رسومية، ولكن الخيار الأول هو الغالب لأنه يسمح بالتحكم الكامل به بواسطة لوحة المفاتيح دون الحاجة إلى القوائم أو الفأرة، فمثلًا لإدراج نص في ملف تضغط على المحرف I وتكتب المطلوب، أما للتنقل أو إصدار أوامر مثل حفظ Save وحذف محرف Backspace والانتقال إلى بداية الجملة Home والانتقال إلى نهاية الجملة End وغيرها العديد من الأوامر تضغط على Esc في لوحة المفاتيح ثم تضغط على أي مفتاح أو مجموعة مفاتيح تتوافق مع الإجراء الذي تريد تنفيذه.

تختلف طريقة استخدام المحرر فيم عن استخدام المحررات الحديثة، ولكنها الطريقة التي يستخدمها مديري أنظمة يونيكس Unix في جميع أنحاء العالم لتحرير ملفات ضبط إعدادات النظام وسجلات التغييرات changelogs والسكربتات.

تثبيت فيم Vim

تأتي بعض الأنظمة مزودة مسبقًا بمحرر Vi ويتوجب عليك تثبيت Vim بشكل منفصل، وللتحقق مما إذا كان Vim مثبتًا لديك استخدم الأمر التالي:

which vim

إذا لم تحصل على أي شيء فلن يكون Vim مثبتًا ويمكنك تثبيته من الصفحة الرئيسية للموقع الخاص به.

تقدم العديد من التوزيعات بعض البُنى المختلفة لفيم مما يعني وجود بنية توفر الحد الأدنى من الإمكانيات التي تحاكي Vi القديم مع تضمين ما يكفي من ميزات وبنية محسّنة توفر تجربة استخدام جيدة وحديثة.

أفضل طريقة لتحديد ما هو متاح هو البحث في مدير الحزم الخاص بك عن أي حزمة تحتوي على السلسلة "vim" ثم تثبيت الحزمة التي تحتوي على معظم الميزات مثل حزمة vim-Enhanced على فيدورا Fedora.

حالات استخدام المحرر فيم Vim

فيم هو المحرر الاحتياطي الافتراضي في جميع أنظمة بوزيكس POSIX، سواء كنت قد قمت للتو بتثبيت نظام تشغيل جديد أو قمت بالإقلاع في بيئة ذات حد أدنى من الإمكانيات بهدف إصلاح نظام أو إجراء شيء ما وحينها إن لم تتمكن من استخدام أي محرر آخر فمن المؤكد أن فيم سيكون أفضل خيار للاستخدام آنذاك، وطبعًا يمكن في جميع هذه الحالات استخدام برامج تحرير صغيرة أخرى مثل جنو نانو GNU Nano أو Jove إلا أن فيم Vim يعتبر محررًا مناسبًا لأي نظام حاسوب مهما كان.

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

كيفية استخدام فيم

يمكن استخدام محرر النصوص فيم في كل من الأجهزة المحمولة وأجهزة الحواسيب.

استخدام فيم في الأجهزة المحمولة

إذا شغلت سطر أوامر على هاتفك المحمول فيعد فيم خيارًا رائعًا للتحرير باستثناء مشكلة واحدة وهي عدم وجود مفتاح Esc وآنذاك يتوفر حلين:

• تنزيل لوحات مفاتيح بديلة متاحة ولكنها ستضيف مفاتيح إضافية على حساب حجم لوحة المفاتيح.
• ضبط فيم ليعين تسلسل مفاتيح يقابل الضغط عليها الضغط على مفتاح Esc، ولتحقيق ذلك أضف أمر imap التالي إلى ملف الضبط vimrc. الخاص ببيئتك، فيستخدم المثال التالي فاصلتين كتسلسل يقابل المفتاح Esc، ولكن يمكنك استخدام أي شيء لا تستخدمه عادةً في الكتابة كتتابع سريع، مثل qq أو yy:

imap ,, <Esc>

استخدام فيم في أجهزة الحاسوب

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

• لتشغيل فيم: إما من خلال سطر الأوامر بكتابة vim أو على سطح المكتب عن طريق تشغيل gvim وهو برنامج فيم المزود بواجهة رسومية.
• للدخول في وضع إدراج النص اكتب على I، وفي هذا الوضع لا توجد أوامر بل يمكن فقط كتابة نص في المستند.
• للدخول إلى الوضع العادي الذي تُستخدم فيه الأوامر اضغط على Esc.
• يمكن في الوضع العادي تحريك المؤشر باستخدام h لليسار و j لأسفل و k لأعلى و l لليمين، قد يكون من المفيد تذكر أن j تحرك المؤشر للأسفل من خلال مساواتها بصريًا بالسهم.
• للخروج من Vim، اكتب wq: إذا كنت تريد حفظ عملك أو !q: لتجاهل التغييرات غير المحفوظة.

يمكن الاطلاع على أوامر فيم الأخرى غير المذكورة وهي ليست أساسية ولكن تساعد على زيادة فعالية العمل وراحة المستخدم.

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

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

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

ملحقات فيم Vim plugins

من أبرز ميزات فيم هي قابليته للتوسيع أي يمكن إضافة ميزات إليه من خلال الملحقات مثل أنظمة الألوان البسيطة ومديري الملفات file managers وغيرها وهذه الملحقات كثيرة ويمكن اختيار المفيدة منها أو جميعها من خلال موقع Vim Awesome المخصص لملحقات فيم، وبعد اختيار الملحقات المطلوبة يمكن تثبيتها يدويًا أو باستخدام مدير حزم Vim مثل Vim-plug.

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

تعلم فيم واحترف استخدامه

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

• تعرف على أساسيات Vim - الجزء الأول
• تعرف على أساسيات Vim - الجزء الثاني
• إدارة إضافات vim

كما تتوفر مقالات أخرى مثل مقال مميزات محرر النصوص Vim لرفع إنتاجية العمل ومقال مقارنة بين محرر النصوص فيم Vim ونانو Nano ننصحك بالرجوع إليها.

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

ترجمة -وبتصرف- للمقال What is Vim?‎.

صُمِّم محرر النصوص إيماكس Emacs لأنظمة تشغيل بوزيكس POSIX وهو متاح لكل من لينكس Linux وماك mac وويندوز Windows ونظام بي إس دي BSD، تتباين الآراء حوله فهو المحرر المفضل للكثيرين بسبب امتلاكه أوامر فعالة تطورت باستمرار لمدة 40 عامًا والتي تكسبه العديد من المزايا مثل إضافة الملحقات وتعديل إعدادات الضبط وتنفيذ الإجراءات الشائعة والمعقدة، بينما يعتبره آخرون محرر نصوص معقّد وغامض لأنه محرر قديم جرى تطويره قبل وجود مصطلحات الحاسوب الحديثة فهو يستخدم مصطلحات مثل "زُر visit" بدلًا من "افتح opening" ومصطلح "اكتب write" بدلًا من "احفظ save".

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

مشروع جنو إيماكس GNU Emacs

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

كان محرر النصوص عبارة عن أمر برمجي يؤدي وظائف محددة مثل توليد كلمات وإضافتها إلى ملف نصي أو البحث عن كلمات معينة في الملف واستبدالها بكلمات أخرى أو إزالة أسطر من ملف، أي يلزم وقت طويل لتنفيذ عدة أوامر وبذلك يصبح تحرير المستندات الكبيرة عملية مملة، لذلك بدأ الأشخاص في تطوير ماكرو macros وهي تعليمة جامعة لأداء المهام الشائعة ذات الصلة، حيث أصدر د. ريتشارد ستالمان Richard Stallman في عام 1983 مجموعة من الماكرو الخاصة به تحت اسم ماكرو التحرير أو emacs للاختصار.

عندما بدأ د. ستالمان مشروع جنو أصبح Emacs أحد أكثر تطبيقاته نجاحًا وامتلك إيماكس عدة إصدارات ولكن GNU Emacs هي النسخة الأكثر شيوعًا.

خصائص المحرر Emacs

يمتلك إيماكس العديد من الخصائص التي تجعله خيارًا مفضلَا للكثيرين من مختلف التخصصات والاهتمامات، من أهمها أنه مجاني وغيرها من الخصائص نذكرها تاليًا.

قلة استهلاك موارد النظام

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

الاعتماد على مجموعات لوحة المفاتيح

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

تعتمد هذه المجموعات على مفتاحي Ctrl و Alt، يتم تمثيل مفتاح Ctrl في التوثيق على أنه C ومفتاح Alt على أنه M (لأنه قبل أن يسمى Alt كان يطلق عليه اسم "Meta").

لاستخدام مفتاح آخر مع مفتاح Ctrl، تُكتب التعليمة بالصيغة C-x (بمعنى Ctrl + X) أو بالصيغة C-c (بمعنى Ctrl + C)، وينطبق الأمر نفسه على مفتاح Alt فإن التعليمة M-xتعني الضغط على مفتاحي Alt-X.

تكون بعض مجموعات لوحة المفاتيح عبارة عن تسلسل من مجموعات أبسط، فمثلًا لفتح ملف نكتب C-x للدخول إلى وضع الأوامر ثم C-f للعثور على الملف المطلوب فتحه، ولتقسيم نافذة التحرير أفقيًا (تسمى المخزن المؤقت buffer في Emacs)، نضغط على C-x ثم الرقم 2.

يرتبط كل إجراء تقريبًا في إيماكس بدالة في Lisp تنفذّ هذه الإجراء، وإذا كان هناك تابع تريد استدعائه ولم يتم ربطه بعد فيمكنك فقط كتابة اسم التابع في مخزن الأوامر المؤقت command buffer تمامًا كما تفعل مع تشغيل تطبيق في سطر أوامر لينكس، على سبيل المثال لتنشيط وضع بايثون Python تضغط على ما يلي: M-x ثم تختار python-mode ثم تضغط Return.

إذا لم يمتلك جهازك مفتاح Alt فيمكنك استبداله بمفتاح Esc لكنه سيعمل بشكل مختلف عنه حيث يجب الضغط على Esc وتحريره ثم الضغط على المفتاح المرتبط به وتحريره، فمثلًا لكتابة الاختصار M-x يجب أولًا الضغط على Esc وتحريره ثم الضغط على X وتحريره، وحتى إذا لم يمتلك جهازك مفتاح Alt أو Esc فيمكنك إعادة تعيين مفاتيح أخرى حسب الحاجة.

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

المرونة وقابلية التخصيص

يمتلك إيماكس خيارين للتشغيل تبعًا لرغبة المستخدم، حيث يمكن تشغيله في واجهة المستخدم الرسومية وهو ما يُسهّل تعلم البرنامج، أو داخل نافذة سطر الأوامر وهو الخيار الأنسب لمديري الأنظمة ومطوري الويب أو أي شخص يحتاج إلى تحرير النص عن بُعد، كما يمكن استخدام إيماكس كَوكيل client أي يمكن تشغيله في الخلفية ثم الاتصال به من نافذة أخرى أو من جهاز آخر.

قابلية للنقل

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

متعدد الأوضاع modes

يمتلك إيماكس مجموعة من الأوضاع وهي عبارة عن ملحقات plugins تغيّر أداء إيماكس حسب عمل المستخدم فيه، ومن هذه الأوضاع:

• وضع Org لتنظيم الأمور اليومية وإدارة المفكرة
• وضع Deft لتدوين الملاحظات
• وضع Fountain لكتابة النصوص السينمائية
• وضع Muse لكتابة الأوراق والمقالات العلمية
• وضع SES لجداول البيانات
• وضع Python لكتابة شيفرات برمجية بلغة بايثون
• وضع سكربت صدفة Shell يرمز له Sh، لتحرير Bash
• وضع nXML لتحرير XML

بالإضافة إلى الأوضاع، هناك تطبيقات مخصصة لإيماكس مثل:

• صدفة لتشغيل الأوامر على النظام الذي يشغل إيماكس
• مدير ملفات قائم على النصوص لتصفح الملفات
• عارض صور ومشغل وسائط متعددة
• واجهة رسوم توضيحية بدائية للمساعدة في رسم مخططات انسيابية flowcharts
• واجهة Git
• وكيل بريد إلكتروني

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

مفتوح المصدر

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

بدأ إيماكس كمجموعة من الماكرو المفيدة التي تهدف إلى تحرير النص، إلا أن بنية التطبيق بدأت بشيفرة برمجية بلغة سي C التي تنتج مترجم Lisp، مما يجعل إيماكس طريقة عزل لحماية شيفرة ليسب Lisp أي إذا تعلمت Elisp وهو اختصار Emacs Lisp، يمكنك تعديل التطبيق الذي تقوم بتشغيله أثناء تشغيله ولا يتطلب تنزيل الشيفرة المصدرية أو تصريفها بعد كل تغيير، ويمكن إنشاء أي بيئة على الفور حسب رغبة المستخدم بمهارة ودقة.

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

ابدأ باستخدام إيماكس

تختلف مصادر تثبيت إيماكس تبعًا لنظام التشغيل المُستخدَم، لتثبيته على نظام لينكس Linux أو نظام بي إس دي BSD يجب الذهاب إلى مستودع التوزيع عبر مدير الحزم وتنزيله منها، أما على أنظمة ماك Mac وويندوز Windows، يمكن تنزيله وتثبيته من موقع GNU Emacs.

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

ترجمة -وبتصرف- للمقال What is Emacs?‎.

اقرأ أيضًا

• مدخل إلى كتابة سكربتات الصدفة Shell Scripts
• مميزات محرر النصوص Vim لرفع إنتاجية العمل
• الأدوات المستخدمة في بناء مواقع ويب
• مدخل إلى صدفة باش Bash

محرر النصوص Vim (ويلفظ فيم) هو المحرر الأكثر استخدامًا اليوم فهو متوفر في معظم الأجهزة على حساب المحررات الأخرى مثل نانو Nano وإيماكس Emacs و Vscodium ولا تكاد تخلو منه أي جلسة اتصال SSH.

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

إضافة الإشارات المرجعية

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

إليك طريقة الاستخدام؛ لوضع إشارة مرجعية اكتب m (الحرف الأول من mark) ويليه اسم الإشارة المرجعية.

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

في حال رغبت بحذف الإشارة المرجعية n استخدم الأمر:

:delmarks n

ولاستعراض كافة الإشارات المرجعية استخدم الأمر التالي:

:marks 

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

تعريف الاختصارات الخاصة بالمستخدم

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

عرف الاختصارات باستخدام الأمر ab: يليه الاختصار ومن ثم العبارة المراد اختصارها، فمثلًا إن أردت إنشاء اختصار للعبارة Acme Painted Fake Roadways, Incs إلى شيء مثل apfr فيمكنك فعل ذلك وفق مايلي:

:ab apfr Acme Painted Fake Roadways, Inc

والآن في كل مرة تكتب فيها الاختصار apfr متبوعًا بفراغ يبدله المحرر تلقائيًا إلى العبارة كاملة دون أن تحتاج لكتابتها.

أما إن رغبت بإزالة أي اختصار، استخدم الأمر uab: متبوعًا بالاختصار مثال:

:uab apfr

وتجدر الإشارة إلى أن الاختصارات التي تعرفها ضمن جلسة العمل تعتبر مؤقتة وتزول بمجرد إغلاق الجلسة.

الإكمال التلقائي للكلمات أثناء الكتابة

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

لنفترض أنك تكتب نصًا يتضمن كلمة مثل Antarctica عدة مرات فبعد كتابتها لأول مرة ضمن النص يمكنك لاحقًا كتابة الحروف الأولى منها فقط مثلًا ant والضغط على Ctrl+P وسيظهر لك المحرر كافة الكلمات التي كتبتها سابقًا في النص وتبدأ بحروف ant وعندها استخدم زر tab للتنقل بين الاحتمالات واختر الكلمة التي تريدها وسيقوم المحرر استكمالها تلقائيًا مع العلم أن زيادة عدد الحروف المكتوبة سيضيق لائحة الكلمات المحتملة أكثر.

تحديد نطاق

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

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

نورد بعض الأمثلة (مع التأكيد على أن كتابة هذه التعليمات تتم والمحرر في نمط الأوامر):

1. حذف الأسطر من 2 إلى 10:

:2,10d

2. حذف الأسطر من 25 حتى نهاية المستند:

:25,$d

3. حذف كافة الأسطر:

:%d

4. نسخ الأسطر من 5 إلى 10 ولصقها بعد السطر 15:

:5,10t 15

5. قص الأسطر من 5 إلى 10 ولصقها بعد السطر 15:

:5,10m 15

رفع الانتاجية عبر Vim

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

ترجمة -وبتصرف- للمقال ‎4 Vim features to use to improve productivity لصاحبه Hunter Coleman.

اقرأ أيضًا

• تعرف على أساسيات Vim - الجزء الأول
• تعرف على أساسيات Vim - الجزء الثاني
• إدارة إضافات vim

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

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

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

اقتباس

ملاحظة: نسعى لتجنب التحيز بين مديري الحزم ولكن بالتأكيد هناك بعض المشاكل يحلها مدير حزم بطريقة أفضل من الآخر وهذا أمر طبيعي.

نفترض في هذا المقال بأن لديك معرفة أساسية بتقنيات تطوير الويب (مثل لغة HTML و CSS وجافاسكربت) وكيفية عمل المواقع بشكل عام.

تاريخ ونشأة مدير الحزم

منذ زمن ليس ببعيد كانت رحلة مطور الويب وتحديدًا مطور الواجهات الأمامية سهلة نسبيًا إذ كل ما سيحتاج تعلمه هو HTML و CSS وجافاسكربت وفي حال أراد زيادة الاحترافية والجودة في عمله فيمكنه الاطلاع على Bootstrap مثلًا أو بعض الحركات والخدع بلغة جافاسكربت، ولكن الأمر اختلف بصورة كبيرة فاليوم نتحدث عن مدير الحزم (مثل Npm) ومحول الشيفرة البرمجية (مثل Babel) ومجمع الحزم (مثل Webpack) بل حتى لغات جديدة (مثل لغة TypeScript) والكثير من التقنيات الأخرى الجديدة. الأمر الذي يجعل المبتدئين ينفرون من كل هذا التعقيد، ولكن مهلًا هل صناعة صفحة ويب تحتاج بالضرورة لهذه الدرجة من التعقيد؟

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

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

<html>
      <head>
        <meta charset="UTF-8">
        <title>Inline Example</title>
      </head>
      <body>
        <h1>
          The Answer is
          <span id="answer"></span>
        </h1>

        <script type="text/javascript">
          function add(a, b) {
            return a + b;
          }
          function reduce(arr, iteratee) {
            var index = 0,
              length = arr.length,
              memo = arr[index];
            for(index += 1; index < length; index += 1){
              memo = iteratee(memo, arr[index])
            }
            return memo;
          }
          function sum(arr){
            return reduce(arr, add);
          }
          /* Main Function */
          var values = [ 1, 2, 4, 5, 6, 7, 8, 9 ];
          var answer = sum(values)
          document.getElementById("answer").innerHTML = answer;
        </script>
      </body>
    </html>

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

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

سيكون شكل ملف index.html هكذا:

<html>
<head>
    <meta charset="UTF-8">
    <title>External File Example</title>
    <!-- الملف الرئيسي الّذي سيستدعي ملفات جافاسكربت -->
</head>
<body>
    <h1>
      The Answer is
      <span id="answer"></span>
  </h1>
  <script type="text/javascript" src="./add.js"></script>
  <script type="text/javascript" src="./reduce.js"></script>
  <script type="text/javascript" src="./sum.js"></script>
  <script type="text/javascript" src="./main.js"></script>
</body>
</html>

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

ظهور مدير الحزم Package Manager

عندما ضجر مجتمع المطورين من هذه المشاكل التي تستهلك الوقت والجهد حاولوا حل هذه المشكلة وهنا ظهر لنا الحل السحري لإدارة المكتبات الخارجية وهو مدير الحزم Package Manager: (ويشار إليه أيضًا بنظام إدارة الحزم) وهو مجموعة من أدوات البرامج التي تعمل على أتمتة عملية تثبيت الحزم وترقيتها وتكوينها وإزالتها بطريقة متسقة.

عندما نتعامل مع مدير الحزم سنواجه مصطلحين جديدين وهما الحزمة Package : وهي أرشيف يحتوي الملفات المطلوب تثبيتها ومعها بيانات توصيفية (أو تسمى أحيانًا ميتا Meta) مثل رقم الإصدار والمزايا الموجودة فيها ومتطلبات التثبيت (التبعيات الخاصة بها) والعلاقات بين الحزم مثل التوافقية والإحلال والتعارض وماذا يُشغّل قبل وبعد التثبيت (من شيفرات برمجية وسكربتات) …إلخ.

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

وعمومًا يمكن لمدير الحزم أن يساعدنا على:

• معرفة ما هي الحزم المثبتة.
• معرفة ما هو الإصدار المثبتة من حزمة معينة.
• تثبيت حزمة غير موجودة عندك (البحث عن مصدر موثوق لها وتنزيلها من الإنترنت ثم تثبيتها) أو تحديثها أو حذفها.
• تشغيل الحزم دون تنزيل (الميزة متاحة في مدير الحزم npm باستخدام الأمر npx).
• مشارك الشيفرة البرمجية مع أي مستخدم npm في أي مكان.
• تقييد الشيفرة البرمجية على مطورين معينين.
• إنشاء حساب شركات لتنسيق وصيانة الحزم والتشفير والمطورين.
• تشكيل فرق مطورين افتراضي باستخدام حساب الشركات.
• إدارة إصدارات متعددة من تبعيات التعليمات البرمجية والتعليمات البرمجية.
• تحديث التطبيقات بسهولة عند تحديث الكود الأساسي.
• ابحث عن مطورين آخرين يعملون على مشاكل ومشاريع مماثلة.

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

لا يقتصر وجود مدير الحزم على مشاريع الويب فحسب وإنما يوجد في أنظمة الحاسوب مثل لينكس وتكون مهمته مشابهة إذ يعمل على إدارة البرمجيات المُثبتة على جهاز الحاسوب؛ ويتعقب البرامج المثبتة، ويسمح للمستخدم بتثبيت البرامج الجديدة بسهولة أو ترقية البرامج إلى إصدارات أحدث أو إزالة البرامج المثبتة مشابه جدًا لبرنامج Google Play على الهواتف المحمولة إلا أن الأخير مزود بشاشة رسومية سهلة الاستخدام. بحلول منتصف العشرينات من القرن العشرين أصبح مدير الحزم يتعامل مع نظام التشغيل Windows أيضًا، ويستخدم مدراء الحزم مع مختلف لغات البرمجة مثل: لغة البرمجة بايثون Python ولغة Ruby، ويطلق على مدير الحزم أيضًا مدير تنصيب النظام System Install Manager.

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

اقتباس

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

أنواع مدراء الحزم

هنالك الكثير من مدراء الحزم بحسب بيئة التطوير أو اللغة المستخدمة ومن أشهر مدراء الحزم نذكر:

1. Composer: يستخدم في المشاريع المبنية على لغة البرمجة PHP.
2. Gems: هو مخصص للغة البرمجة Ruby ويستخدم مع إطار العمل Rails.
3. npm: هو مدير حزم مخصص لبيئة Node.js المعتمدة على لغة البرمجة جافاسكربت، ويمكن استخدام هذا المدير في أي مشروع برمجي على الويب.
4. yarn: هو مدير حزم طورته شركة فيسبوك عام 2016 لبيئة Node.js التي تعمل بلفة جافاسكربت ويسعى هذا المدير لتوفر السرعة والاتساق والاستقرار والأمان بطريقة أفضل من npm بالرغم من أنه مبني على نفس الشيفرة البرمجية الخاصة ب npm.
5. pip: وهو مدير حزم يستخدم في البرمجيات التي تعتمد على لغة البرمجة بايثون (مثل: Django و Flask).
6. Bower هو مدير حزم للواجهات الأمامية مصمم خصيصًا للمكتبات مثل jquery و angular و bootstrap وما إلى ذلك.

يتألف أي مدير حوم من ثلاثة مكونات وهي:

1. الموقع الإلكتروني: يستخدم موقع الويب لاكتشاف الحزم وإعداد ملفات التعريف وإدارة الجوانب الأخرى لتجربة مدير الحزم، فعلى سبيل المثال يمكنك إعداد مؤسسات لإدارة الوصول إلى الحزم العامة أو الخاصة.
2. السجل: وهو عن قاعدة بيانات عامة كبيرة تحتوي على الحزم والمعلومات الوصفية المرتبطة بها.
3. واجهة سطر أوامر CLI، تسمى سجل npm: وهي الطريقة التي يتفاعل بها المطورين مع مدير الحزمة.

سنناقش في هذا المقال الفرق بين مدير الحزم NPM و Yarn لنساعد المبرمج المبتدئ على اتخاذ قراره.

نبذة وتاريخ موجز عن مديري الحزم NPM و Yarn

مدير الحزم NPM (وهو اختصارًا لـ Node Package Manager) وهو مدير حزم للغة جافاسكربت. إنه المدير الافتراضي لبيئة Node.js التي تعمل بلغة جافاسكربت. ظهر لأول مرة في عام 2010 وسرعان ما انتشر بين المطورين نظرًا للحلول التي قدمها.

مدير الحزم Yarn (وهو اختصارًا لـ Yet Another Resource Negotiator) وهو مدير مشابه لمدير npm. طورته شركة فيسبوك وهو مفتوح المصدر والهدف من تطويره (في ذلك الوقت) هو إصلاح مشكلات الأداء والأمان التي يعاني منها npm.

لنفهم تطور كل مدير لنسافر بسرعة عبر الزمن لرؤية الصورة الكبيرة:

• 2010: صدور مدير الحزم npm بدعم Node.
• 2016: صدور مدير الحزم Yarn. أظهر أداء أفضل بكثير من مدير الحزم npm. كما أنه ينشئ ملف yarn.lock الذي يجعل مشاركة ونسخ المشاريع المتماثل والتبعيات أسهل بكثير وأدق.
• 2017: صدور npm 5 والذي أصبح ينشئ تلقائيًا ملف package-lock.json ردًا على إصدار مدير الحزم yarn لملف yarn.lock.
• 2018: صدور npm 6 بأمان محسّن وأصبح الآن يتحقق npm من الثغرات الأمنية قبل تثبيت التبعيات.
• 2020: صدور تحديثات لمدير الحزم Yarn 2 و npm 7. تأتي كلتا الحزمتين مع ميزات جديدة رائعة كما سنرى لاحقًا في هذا البرنامج التعليمي.
• 2021: صدور تحديثات Yarn 3 و npm 8 بتحسينات ومزايا مختلفة.

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

تستخدم العديد من الشركات الشهيرة بيئة Node.js لتطوير تطبيقاتها (مثل Netflix و Uber وغيرها الكثير غيرهما). أحد أسباب شعبية بيئة Node.js هو توفر حزم ومكتبات أطر عمل متنوعة ومفتوحة المصدر مساندة لعمل بيئة Node.js ومن أشهرها Express.js و Lodash و AsyncJS و Meteor و Sails وغيرها. ويمكن استخدام هذه الحزم في مشاريع التي تعتمد على لغة جافاسكربت وأطر العمل الخاصة بها.

مقارنة بين npm vs yarn

في وقتنا الحاضر يتسارع مدراء الحزم في السباق، ولكن لا تزال هناك العديد من الاختلافات التي تساعد في تحديد أيهما سنختار سنستعرض أهم الجوانب التي يجب النظر إليها عند اعتمادك لأي مدير حزم.

المجتمع والتطوير

لننظر في المجتمع لتقييم تطوير كل من npm و yarn لنلقي نظرة على مجتمعاتها خصيصًا فيما يتعلق بالإحصاءات الموجودة في مستودعات GitHub (نؤكد أن هذه الأرقام حتى تاريخ كتابة المقال).

المجتمع الأكبر للمطورين يمكن أن يساعدك في الحصول على المساعدة بصورة أسرع عند مواجهة أية مشكلة في التنفيذ، وبالرغم من أن Yarn أحدث بالمقارنة مع npm إلا أنه يلحق بالركب بسرعة من حيث الشعبية. على سبيل المثال إذا قارنا بين عدد التنزيلات بين npm و Yarn في بين السنوات 2017 وحتى 2022 يمكننا أن نرى بأن npm هو الفائز الواضح هنا، ولكن إن نظرنا إلى الأرقام في مستودعات الحزم سنجد أن الأمر معكوس لصالح yarn.

الأداء والسرعة

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

يوجد في كلاهما ميزة على ذاكرة تخزين مؤقت غير متصلة بالإنترنت وتدار بطريقة فعالة من خلال عملية تخزين كل حزمة مؤقتًا وحفظها على القرص، ويمكنك بعد ذلك تثبيت نفس الحزمة في مجلد مختلف من خلال ذاكرة التخزين المؤقت حتى عندما تكون غير متصل بالإنترنت، ويسمى هذا المفهوم بعمليات التثبيت الصفرية Zero installs، وبالرغم من أن Yarn لها بعض المزايا في السرعة إلا أنه بالمقارنة نجد بأن سرعات Yarn و npm متقاربة نسبيًا وخصيصًا في إصداراتها الأخيرة.

اقتباس

ملاحظة: ميزة التثبيت الصفري اختيارية.

تثبيت الحزم

يوضح ملف yarn.lock في مدير الحزم yarn وملف package-lock.json في مدير الحزم npm قائمة بجميع التبعيات أو الحزم المطلوبة تثبيتها حتى يعمل المشروع. هذا الملف "يقفل" إصدارات التبعية الخاصة بك. بهذه الطريقة عندما يقوم شخص آخر بتشغيل الأمر install yarn أو install npm، سيتلقى إصدارات التبعيات الدقيقة المدرجة في ملف القفل. هذا يضمن أن فريقك لديه إصدارات الحزمة المتطابقة تمامًا مع متطلبات المشروع. كما أنه يساعد في منع الأخطاء التي يمكن أن تظهر بسبب إدخال إصدارات حزم محدثة غير مختبرة.

الأمن والحماية

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

توضح الصورة التالية تقارير التدقيق npm عن الحزم غير الآمنة:

كما ترى في لقطة الشاشة أعلاه، يمكننا تشغيل الأمر npm audit fix لإصلاح ثغرات الحزمة، وسيصلح أشجار التبعية إذا كان من الممكن القيام بذلك. يستخدم كل من Yarn و npm خوارزميات تجزئة التشفير لضمان سلامة الحزم.

يعتمد مدير الحزم Yarn على تقنية تدقيق المجموع Checksum ويشار إليها أيضًا المجموع الاختباري لضمان تكامل البيانات وهذه الخوارزمية مخصصة للكشف عن الخطأ الرياضي. إنها كتلة من البيانات المشتقة من البيانات الأصلية لاكتشاف الأخطاء عند نقل البيانات من جهاز حاسوب إلى آخر. يتحقق من أي خطأ قد يكون حدث أثناء نقل البيانات أو تخزينها. هذا يساعد على ضمان سلامة البيانات. قبل نقل البيانات، سينشئ المرسل رسالة تحسب المجموع الاختباري. وستُرفق هذه الرسالة (الحزمة) بالبيانات الأصلية. بعدها سيحسبُ المتلقي المجموع الاختباري وإذا تساوت قيمتا المجموع الاختباري مع بعضهما، فعندها لا يوجد أي خطأ وتقبل البيانات؛ خلاف ذلك ترفض البيانات.

أما مدير الحزم npm فيعتمد على خوارزمية التجزئة الآمنة SHA-512 للتحقق من سلامة الحزم التي سيُثبتها. إذ يخزن سلاسل SHA-512 لكل حزمة مثبتة في ملف package-lock.json، كما هو موضح في الشيفرة البرمجية أدناه.

"lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}

سيستخدم المدير NPM مفتاح SHA-512 لإجراء فحص سلامة في كل كتلة حزمة في ملف package-lock.json، كما يدقق كل حزمة أثناء التثبيت وإعلامك بنقاط الضعف المحتملة.

سهولة التعلم والاستعمال

أحد الأشياء التي يجب مراعاتها قبل اختيار مدير الحزم هو معرفة الواجهة سهلة الاستخدام. يتضمن ذلك كيف تبدو الأوامر. في الحقيقة إن NPM و Yarn لهما واجهات مختلفة لسطر الأوامر وكلاهما سهل الاستخدام ولديهما تجربة مستخدم جيدة. يتضح هذا عند استخدام أمر مثل npm init و yarn init. كلاهما لديه دليل تفاعلي يساعد المستخدمين على تهيئة مشروع Node.js.

كيف نختار مدير الحزم الأنسب لمشروعنا؟

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

الخاتمة

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

المصادر

• مقال Yarn vs npm: Everything You Need to Know لكتاتبه Ivaylo Gerchev.
• npm vs yarn.
• مقال Difference between npm and yarn لكاتبه Parikshit Hooda.
• مقال Choosing Between NPM and Yarn لكاتبه Joseph Chege.
• مقال YARN VS NPM: WHY AND HOW TO MIGRATE FROM NPM TO YARN لكاتبه Viktor Tsymbal.
• مقال ?NPM vs. Yarn: Which Package Manager Should You Choose لكاتبه Alfrick Opidi.

اقرأ أيضًا

• دليلك الشامل إلى مدير الحزم npm في Node.js
• مدخل إلى الملحن composer: مدير الاعتماديات والحزم في PHP
• 18 مثالا لاستخدام مدير الحزم YUM
• أساسيات إدارة الحزم: apt ،yum ،dnf ،pkg

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

تمتلك كل توزيعة لينكس برامج تحرير للنصوص مثبتة مسبقًا بغض النظر عن متطلبات المستخدم، مثل Gedit و Geany و Kate وغيرها التي تعد جميعها محررات حديثة مزودة بواجهة رسومية GUI، ولكن لا يفضل الجميع استخدام محرر نصوص بواجهة رسومية في جميع الحالات بل يُفضّل البعض استخدام محرر نصوص بواسطة سطر الأوامر، ويتيح نظام تشغيل لينكس هذا الخيار أيضًا حيث يوجد العديد من برامج تحرير النصوص التي يمكن استخدامها من سطر الأوامر ومن أشهرها برنامجي فيم Vim ونانو Nano، اللذان يستخدمان في سطر الأوامر CLI وهي اختصار Command Line Interface، يقدم كل منهما معظم الميزات الأساسية لمحرر النصوص ويوجد بعض الاختلافات فمثلًا يأتي نانو مدمجًا في معظم توزيعات لينكس، بينما يحتاج فيم في بعض التوزيعات إلى تثبيته يدويًا.

لا يمكن اتخاذ القرار بشأن استخدام أي منهما إلا بعد التعرّف على تفاصيل وإمكانيات كل منهما وهو ما سنعرضه في هذا المقال.

1. مقدمة عن محرر النصوص فيم ومحرر النصوص نانو

محرر النصوص فيم

أُصدر فيم عام 1991 وهو نسخة محسّنة من محرر النصوص Vi الذي طُوّر عام 1976 لنظام التشغيل. يونكس Unix، ويُعرف فيم أيضًا باسم محرر نصوص المبرمِج، وذلك بسبب امتلاكه العديد من الميزات التي تساعد في تعديل ملفات البرنامج، ولا يعتبر فيم حكرًا على المبرمجين حيث يمكن استخدامه لكتابة وتحرير ملفات نصية عادية حتى مع امتلاكه إمكانيات متطورة.

محرر النصوص GNU nano

أما المحرر غنو نانو GNU nano ويُعرف اختصارًا باسم نانو Nano، فهو محرر نصوص بسيط يعمل بواسطة سطر الأوامر ويعتمد على يونكس Unix ومستوحى من بيكو Pico، حيث كان Pico جزءًا من مجموعة Pine للبريد الإلكتروني التي طورتها جامعة واشنطن في عام 1989 ولكن كان من الصعب تضمينه في توزيعات لينكس لعدم امتلاكه ترخيص GPL، لذا طُوِّر محرر النصوص نانو كبديل مجاني للمحرر Pico، كما عُرف نانو في البداية باسم tip ثم أعاد ريتشارد ستولمان Richard Stallman تسميته مباشرةً قبل أن يعلن نانو برنامجًا رسميًا من برامج GNU.

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

2. مزايا محرر فيم مقابل مزايا محرر نانو

فيما يلي الاختلافات الرئيسية بين فيم ونانو.

تُلخص الميزات الرئيسية لمحرر فيم بالميزات التالية:

• يتيح التراجع عن آخر خطوة Undo لعدة مرات
• التركيز على تركيب الجملة
• التعديل بواسطة سطر الأوامر
• إكمال اسم الملف
• تقسيم شاشة العمل والذاكرة
• التشعب
• استرداد العمل السابق
• سريع الأداء لاعتماده على تجزئة المهام

أما الميزات الرئيسية لمحرر نانو، فتلخص بالميزات التالية:

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

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

3. استخدام محرر النصوص

يعتبر فتح ملف موجود مسبقًا في كل من فيم أو نانو عملية سهلة وتتحقق من خلال كتابة اسم محرر النصوص المراد استخدامه (فيم أو نانو) متبوعًا بمسار الملف كما يلي:

vim Documents/text.txt
nano Documents/text.txt

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

الفرق الأساسي بين نانو وفيم هو أن الجمهور المستهدف مختلف تمامًا.

استخدام فيم

يعمل في أوضاع تحرير متعددة Mode-driven منها:

• الوضع العادي
• الوضع المرئي
• وضع الإدراج
• الكتابة بواسطة سطر الأوامر
• التحرير بواسطة سطر الأوامر

يعمل فيم بشكل افتراضي في الوضع العادي، ويمكن ضبط فيم كأداة كتابة حتى مع كل الأوضاع، وتتصرف أزرار لوحة المفاتيح نفسها تصرفًا مختلفًا تبعًا للوضع المفعَّل، فمثلًا يمثل زر h على لوحة المفتاتيح الحرف h في وضع الكتابة ويتحول في الوضع العادي إلى زر حركة فيحرك مؤشر الكتابة إلى اليسار بمقدار حرف واحد، ويحرك الحرف l (حرف L صغير) مؤشر الكتابة إلى اليمين بمقدار حرف واحد، وينقل الحرف j مؤشر الكتابة إلى الأسفل بمقدار سطر، وينقل الحرف k مؤشر الكتابة إلى الأعلى بمقدار سطر، كما يمكن استخدام أزرار الأسهم للتنقل.

أما المفاتيح الأكثر استخدامًا فهي: "w" و "b" و "e" وشرحها وفق التالي:

• "w": ينقل مؤشر الكتابة إلى الكلمة التالية، وإذا كان المؤشر موجودًا في بداية الكلمة فينقله إلى بداية الكلمة التالية
• "b": ينقل المؤشر إلى بداية الكلمة الموجودة على يسار الكلمة الحالية
• "e": ينقل المؤشر إلى نهاية الكلمة الموجودة على اليمين

كما يمكن مزج الأرقام بهذه المفاتيح، مثال: يؤدي الضغط على "6w" إلى تحريك المؤشر بمقدار ست كلمات للأمام.

التبديل بين الأوضاع المختلفة يتطلب الضغط على مفاتيح محددة مثل:

• "i": لتفعيل وضع الإدراج
• "CTRL + C": للعودة إلى الوضع العادي
• "wq:": لحفظ الملف وإغلاق النافذة

كل ما سبق هو لمحة بسيطة عن فيم، لمعرفة المزيد يمكن استخدام الأمر vimtutor الذي يقدم معلومات عن الأوامر الأساسية للتعامل مع الملفات كحذف ملف ما أو تعديله أو حفظه وغيرها.

استخدام GNU nano

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

هذا هو السبب الأساسي في تفوق نانو على فيم من ناحية سهولة الاستخدام، ومع ذلك لا تزال بعض المصطلحات المستخدمة في نانو مصطلحات قديمة، مثال على ذلك أمر "Write Out" يعني اكتب التعديلات بدلًا من "Save" يعني احفظ التعديلات على الملف وأمر "Where Is" يعني أين كذا بدلًا من "Search" يعني ابحث عن كذا، لكنها لا تعتبر مشكلة كبيرة إذ من السهل التعود عليه.

لا يتشابه نانو مع استخدام Notepad أو Gedit (برامج تمتلك واجهة رسومية)، حيث عادةً ما تكون تركيبة المفاتيح لإجراء عملية القص هي "Ctrl + X" في معظم برامج التحرير الحديثة ولكن تكون في نانو "Ctrl + K".

يستخدم الرمز "^" للإشارة إلى استخدام مفتاح Ctrl كمفتاح تعديل ويستخدم كمجموعة مع المفاتيح المجاورة له.

توجد أيضًا مجموعات مفاتيح والاختصارات مثل:

• Ctrl + F لتحريك المؤشر إلى الأمام
• Ctrl + B الانتقال إلى الخلف
• Ctrl + X للخروج
• Ctrl + O لحفظ الملف أو حفظ الملف باسم
• Alt + U للتراجع عن الإجراء الأخير
• Ctrl + ← كلمة واحدة للخلف
• Ctrl + → كلمة واحدة للأمام

مما سبق، يناسب محرر نانو المبتدئين خصوصًا عندما يكون كل ما يحتاجه المستخدم هو تحرير ملف من حين لآخر.

4. سهولة التعلم

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

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

هل أستعمل فيم أم نانو؟

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

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

الأسئلة الشائعة حول فيم ونانو

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

ترجمة -وبتصرف- للمقال Vim vs Nano: What Should You Choose?‎ لصاحبه Pratham Patel.

اقرأ أيضًا

• محررات النصوص المستعملة في تطوير مواقع الويب
• .تعرف على أساسيات Vim - الجزء الثاني

تعد بيئة التطوير المتكاملة Integrated development environments -واختصارًا IDE- من الأدوات التي تستخدم في البرمجة، حيث يحدِث امتلاك بيئة جيدة فرقًا كبيرًا عند كتابة شيفرة بلغة برمجة معينة، ويساعد على تجنب الأخطاء التي قد لا تُكتشف إلا عند تجميع الشيفرة أو اختبارها.

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

ميزات بيئة التطوير المتكاملة IDE الأساسية

يشير مصطلح "بيئة التطوير المتكاملة IDE" إلى بعض الميزات الأساسية، منها:

محرر الشيفرة

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

تلوين بنية الجملة البرمجية وإبرازها

تعرض بيئة التطوير كلًا من الكلمات المفتاحية والمتغيرات والمكتبات والوظائف بألوان مختلفة، ويُعد هذا التمييز إضافةً تسهّل عملية كتابة الشيفرة.

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

تحدد بيئة التطوير الأخطاء المرتكبة أثناء كتابة التعليمات البرمجية، وتسلط الضوء عليها، وتسمى عملية كشف الأخطاء المحتملة في الشيفرة "linting"، ولا يقتصر الأمر على اكتشاف الأخطاء الفادحة فقط، حيث تشجع بعض اللغات -مثل Python- المطورين على كتابة تعليمات برمجية وفقًا لدليل رسمي لطريقة كتابة اللغة، وتحذرك بيئة التطوير عندما تنحرف عن توصيات مقترحات تحسين بايثون Python Enhancement Proposals، واختصارًا PEP.

تصحيح الشيفرة

تمثل عملية تدقيق الشيفرة Linting اكتشاف الأخطاء المحتملة، ويمكن للعديد من بيئات التطوير تنفيذ ذلك بناءً على مخطط أولي للصيغ المتوقعة، وستقترح بيئة التطوير الجيدة تصحيحات لهذه الأخطاء، بل ستقترح تصحيحات مشتقةً من الطريقة التي تعمل بها لغة البرمجة التي تكتب بها الشيفرة، بمعنىً آخر ستقترح بيئة تطوير جافا Java إصلاحات منطقيةً للغة جافا، لا للغة بايثون Python أو ++C، وهذه الاقتراحات ليست مثاليةً دائمًا، حيث يمكن أن تقترح بيئة التطوير إصلاحًا بناءً على تلبية مواصفات اللغة فقط، لكنه قد يكون في سياق خاطئ، ومن الممكن أن يتسبب في تلف الشيفرة، لذا يعد فهمك للغة البرمجة هنا أمرًا مهمًا، ولك أن تستخدم التصحيحات الآلية للعثور على الأخطاء الواضحة، والتي يمكن أن توفر عليك الكثير من البحث والاستبدال اليدوي، وحتى إعادة بناء التعليمات البرمجية refactoring.

الاطلاع على المشروع

تُجمع التعليمات البرمجية والأصول الثابتة معًا حرفيًا أو افتراضيًا، بحيث لا تُترك أي عناصر مهمة عندما تكون جاهزًا لتوزيع شيفرتك، ولمعظم بيئات التطوير مفهوم ما عن دليل المشروع، تمامًا كما تفترض Autotools أو CMake وجود تخطيط قياسي لملفات شيفرة المشروع، ويجرد بعضها بنية التعليمات البرمجية ومكتباتها حتى تتمكن من رؤية كل شيء تعتمد عليه التعليمات البرمجية، مثل مجموعة الأدوات المثبتة افتراضيًا على مستوى النظام، والشيفرة التي أنشأتها على جهازك.

يعتمد مستوى تقسيم ملفات الشيفرة الذي تحتاجه على مهاراتك في التنظيم، وتعقّب الاعتمادية dependency tracking، واللغة والمكتبات المستخدمة، ولكن يُفضل -بغض النظر عن مدى تعقيد المشروع أو بساطته- أن تعرف بيئة تطويرك الدليل الذي يجب أن يكون افتراضيًا عند البحث عن الملفات والمكتبات والأصول.

الإلمام بالأدوات المختلفة المستخدمة لتطوير الشيفرة البرمجية

تحتوي بيئة التطوير عادةً على نظام إدارة لتعيين المكتبات المستخدمة في الشيفرة، ووقت التشغيل، وخيارات المترجم، وتتبع التحكم في الإصدار، وهو أمر مهم في أي نظام، ولكنه يصبح ضروريًا على الأجهزة التي تُثبت عليها إصدارات متعددة من الأدوات، فمثلًا عند تثبيت كل من مجموعة أدوات Qt4 و Qt و Python 2 و Python 3، وإصدارات مختلفة من Java runtimes، ومكتبات 32 بت و64 بت، وGCC و LLVM وغيرها، يُفضل أن يكون على الجهاز بيئة تطوير IDE تدير كيفية بناء المشروع وتجميعه، للحصول على نتائج متسقة.

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

هل استخدام بيئة التطوير المتكاملة اختياري؟

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

البحث عن بيئة تطوير متكاملة مفتوحة المصدر

يوجد الكثير من بيئات التطوير مفتوحة المصدر، بعضها مخصص للغة برمجة واحدة، مثل Eric وPayza وSpyder وPyCharm، وهي مخصصة للغة بايثون Python، وبعضها مخصص للغة جافا مثل BlueJ و IntelliJ، وبعضها الأخر مخصص للغات مختلفة وأطر عمل مختلفة، بحيث يمكن استخدامها في العديد من المشاريع المختلفة أو في المشاريع التي تستخدم لغات متعددة، ويمكنك دائمًا عدم استخدام بيئة تطوير متكاملة، واستخدام محرر نصوص فقط، أو محرر نصوص أُعدّ ليعمل مثل بيئة تطوير، مثل محرر النصوص Vim.

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

ترجمة -وبتصرف- للمقال What is an IDE?‎ من موقع opensource.com.

اقرأ أيضًا

• لمحة عن بيئة تطوير NET Core.
• نقل ووردبريس من بيئة التطوير المحلية إلى خادوم إنتاجي بسهولة وسرعة
• بناء نموذج كامل لسلسلة أدوات تطوير الويب من طرف العميل

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

• المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت.
• الهدف: ترسيخ ما تعلمناه حتى الآن من خلال العمل على دراسة حالة كاملة لسلسلة أدوات.

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

اقتباس

ملاحظة: لا يلزم تشغيل كل هذه الأدوات في سطر الأوامر، إذ يتمتع العديد من محرري الشيفرات اليوم -مثل VS Code وAtom- بدعم تكامل أدوات متعددة باستخدام الإضافات plugins.

وصف دراسة الحالة

سنستخدم سلسلة الأدوات التي سننشئها في هذا المقال لبناء ونشر موقع صغير يعطي قائمة بيانات مأخوذة من إحدى واجهات برمجة التطبيقات المفتوحة التابعة لوكالة ناسا فيما يتعلق بالأجسام الفضائية التي يحُتمَل أن تكون خطرة وتهدد وجودنا على الأرض:

كما يمكنك مشاهدة نسخة حية من الموقع على near-misses.netlify.com.

الأدوات المستخدمة في سلسلة أدواتنا

سنستخدم الأدوات والميزات التالية:

• JSX: مجموعة من امتدادات الصياغة ذات الصلة بإطار العمل React والتي تتيح تطبيق أشياء مثل تحديد بنى المكونات ضمن جافاسكربت. لن تحتاج إلى معرفة إطار عمل React لاتباع هذا المقال، لكننا ضمّنا هذه الأداة لإعطائك فكرة عن كيفية دمج لغة ويب غير أصيلة non-native ضمن سلسلة أدوات.
• أحدث ميزات جافاسكربت المبنية مسبقًا (في وقت كتابة النسخة الأجنبية من هذا المقال) مثل import.
• أدوات تطوير مفيدة مثل Prettier للتنسيق وEslint لكشف الأخطاء في الصياغة.
• PostCSS لتوفير إمكانات تداخل CSS.
• Parcel: لبناء وتقليل حجم شيفرتنا وكتابة محتوى ملف الإعداد تلقائيًا.
• GitHub: لإدارة التحكم في الشيفرة المصدرية.
• Netlify: لأتمتة عملية النشر.

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

سلاسل الأدوات وتعقيدها المتوارث

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

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

أصغر سلسلة أدوات هي سلسلة لا تحتوي على روابط على الإطلاق. يمكنك كتابة شيفرة HTML يدويًا، واستخدام لغة جافاسكربت الصرفة Vanilla JavaScript دون وجود أطر عمل أو لغات وسيطة، وتحميلها يدويًا إلى خادم للاستضافة.

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

سنستخدم في مشروعنا سلسلة أدوات مصممة خصيصًا للمساعدة في تطوير برامجنا ودعم الخيارات التقنية التي تُجرَى أثناء مرحلة تصميم البرنامج، ولكن سنتجنب أيّ أدوات غير ضرورية، بهدف تقليل التعقيد إلى الحد الأدنى. كان بإمكاننا تضمين أداة لتقليل أحجام ملفات SVG أثناء الإنشاء مثلًا، ولكن يحتوي هذا المشروع على 4 صور SVG فقط التي صغّرناها يدويًا باستخدام الأداة SVGO قبل إضافتها إلى المشروع.

المتطلبات الأساسية

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

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

يمكنك التسجيل في GitHub (من خلال النقر على رابط التسجيل Sign Up في الصفحة الرئيسية إن لم يكن لديك حساب سابقًا، واتبع تعليمات استخدام حساب GitHub في عملية الاستيثاق على Netlify (انقر على تسجيل Sign Up، ثم اختر GitHub من قائمة "التسجيل باستخدام إحدى القوائم التالية Sign up with one of the following")، لذلك ما عليك سوى إنشاء حساب جديد.

ستحتاج لاحقًا إلى ربط حساب Netlify بمستودع GitHub لنشر هذا المشروع، وسنرى كيفية تطبيق ذلك في المقال التالي.

مراحل الأدوات

تُنظَّم سلسلة الأدوات ضمن المراحل التالية:

• شبكة الأمان Safety Net: تجعل تجربة تطوير البرمجيات مستقرة وأكثر كفاءة، ونشير إليها بوصفها بيئة التطوير.
• التحويل Transformation: هي الأدوات التي تتيح استخدام أحدث ميزات لغة مثل لغة جافاسكربت أو لغة أخرى مثل JSX أو TypeScript في عملية التطوير، ثم تحوّل شيفرتنا لكي يستمر إصدار الإنتاج يعمل على مجموعة متنوعة من المتصفحات الحديثة والقديمة.
• ما بعد التطوير Post Development: هي الأدوات التي تُشغَّل بعد الانتهاء من التطوير لضمان وصول برنامجك إلى الويب واستمراره في العمل. سننظر في إضافة اختبارات إلى شيفرتنا، ونشر التطبيق باستخدام Netlify لتكون متاحةً على الويب ويمكن للمستخدمين مشاهدته.

لنبدأ العمل بدءًا من بيئة التطوير خاصتنا.

إنشاء بيئة تطوير

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

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

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

• أدوات تثبيت المكتبة Library Installation Tools لإضافة الاعتماديات.
• التحكم في مراجعة الشيفرة Code Revision Control.
• أدوات ترتيب الشيفرة Code Tidying Tools لتنظيم شيفرات جافاسكربت وCSS وHTML.
• أدوات كشف أخطاء الشيفرة Code Linting Tools.

أدوات تثبيت المكتبة

سنستخدم مدير الحزم npm لتثبيت أدواتنا، ويجب أن يكون لديك Node.js وnpm مثبتين مسبقًا.

اقتباس

ملاحظة: بالرغم من عدم وضوح عملية التثبيت، إلا أن تثبيت npm يؤدي إلى تثبيت أداة مجانية تسمى npx التي سنستخدمها لاحقًا للمساعدة في تشغيل الأدوات المثبَّتة كاعتماديات محلية للمشروع.

سنستخدم npm لتثبيت الأجزاء اللاحقة من سلسلة أدواتنا، وسنثبّت git للمساعدة في التحكم في المراجعة.

التحكم في مراجعة الشيفرة

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

Git وGitHub مختلفان، إذ تُعَد أداة Git أداةً التحكم في المراجعة، بينما يُعَد موقع GitHub مخزنًا على الإنترنت لمستودعات Git بالإضافة إلى عدد من الأدوات المفيدة للعمل معها. لاحظ أنه بالرغم من أننا نستخدم GitHub في هذا المقال، إلا أن هناك العديد من البدائل بما في ذلك GitLab وBitbucket، كما يمكنك استضافة مستودعات git الخاصة بك على جهازك الشخصي ببساطة.

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

كما يمكن أن يتيح لك التحكم في المراجعة تفريع شيفرة مشروعك، وإنشاء إصدار منفصل وتجربة وظائف جديدة، دون أن تؤثر تلك التغييرات على الشيفرة الأصلية.

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

يمكن تنزيل Git وتثبيته عبر موقع git-scm على الويب. نزّل برنامج التثبيت المناسب لنظامك، وشغّله، واتبع التعليمات التي تظهر على الشاشة.

يمكنك التفاعل مع git بعدة طرق مختلفة، من استخدام سطر الأوامر إلى استخدام تطبيق git GUI لإصدار الأوامر من خلال الضغط على الأزرار، أو حتى من داخل محرر الشيفرة الخاص بك مباشرةً، كما هو موضح في المثال التالي في Visual Studio Code:

لكن تثبيت git هو كل ما نحتاجه حاليًا.

أدوات ترتيب الشيفرة

سنستخدم الأداة Prettier لترتيب شيفرتنا في المشروع. ثبّت Prettier، أو يمكنك تثبيتها بوصفها أداة مساعدة عالمية باستخدام الطرفية Terminal.

يمكنك التحقق مما إذا كانت Prettier مثبّتة عالميًا باستخدام الأمر التالي:

prettier -v

ستحصل في حالة التثبيت على رقم إصدار مُعاد مثل رقم الإصدار 2.0.2، وإن لم تكن مثبّتة، فسيعيد شيئًا مثل "الأمر غير موجود command not found". إن لم تكن مثبّتة، فثبتها باستخدام الأمر التالي:

npm install prettier -g

يمكن بعد ذلك تشغيل الشيفرة وترتيبها في سطر الأوامر على أساس ملف من أي مكان على حاسوبك كما يلي:

prettier --write ./src/index.html

 استخدمنا في الأمر السابق الأداة Prettier مع الراية ‎--write، إذ ستفهمُ Prettier أن هذا يعني أنه "إذا كانت هناك مشاكل في تنسيق شيفرتك، فتابع وأصلحها، ثم احفظ الملف"، وهذا يناسب عملية التطوير الخاصة بنا، ولكن يمكننا استخدام Prettier بدون الراية وستتحقق من الملف فقط. يُعد التحقق من الملف -دون حفظه- مفيدًا لأغراض مثل عمليات التحقق المُشغَّلة قبل الإصدار، أي "لا تصدر أيّ شيفرة ليس تنسيقها صحيحًا".

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

هناك العديد من الطرق المختلفة لحل هذه المشكلة ومنها:

• استخدام سكربتات npm لتشغيل أوامر متعددة من سطر الأوامر دفعة واحدة مثل الأمر npm run tidy-code.
• استخدام خطّافات جيت git hooks الخاصة لاختبار ما إذا كانت الشيفرة منسَّقة قبل الالتزام.
• استخدام إضافات plugins محرر الشيفرة لتشغيل أوامر prettier في كل مرة يُحفَظ الملف فيها.

اقتباس

ملاحظة: ما هو خطّاف جيت git hook؟ يوفر Git -وليس GitHub- نظامًا يتيح إرفاق الإجراءات المسبقة واللاحقة بالمهام التي تؤديها باستخدام git مثل تنفيذ الشيفرة. يمكن أن تكون خطّافات git معقدة بعض الشيء، لكن بمجرد وضعها في مكانها يمكن أن تكون قوية جدًا. إذا كنت مهتمًا باستخدام الخطافات، فإن Husky هو مسار مبسط إلى حد كبير لاستخدام الخطافات.

أحد الإضافات المفيدة في VS Code هو Prettier Code Formatter من Esben Petersen التي تتيح تنسيق الشيفرة تلقائيًا عند الحفظ، وهذا يعني تنسيق أي ملف في المشروع الذي نعمل عليه، بما في ذلك ملفات HTML وCSS وجافاسكربت وJSON وmarkdown وغير ذلك. كل ما يحتاجه محرّر الشيفرة هو تفعيل "التنسيق عند الحفظ Format On Save".

كما يمكن استخدام Prettier دون الحاجة إلى تهيئة أي شيء، إن كنت راضيًا عن الإعدادات الافتراضية.

أدوات كشف أخطاء الشيفرة

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

تكون أدوات كشف أخطاء تطوير الويب خاصة بلغة جافاسكربت في أغلب الأحيان، بالرغم من توفر القليل منها للغتي HTML وCSS. إذا اُستخدِم عنصر HTML غير معروف أو خاصية CSS غير صالحة، فيُحتمَل ألّا ينكسر أيّ شيء نظرًا للطبيعة المرنة لهاتين اللغتين. بينما تُعَد لغة جافاسكربت أكثر هشاشة، فمثلًا يؤدي استدعاء دالة غير موجودة عن طريق الخطأ إلى تعطّل الشيفرة، لذلك يُعَد كشف أخطاء شيفرة جافاسكربت مهمًا جدًا خاصةً في المشاريع الكبيرة.

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

ستظهر الأداة Eslint خطأ بأنه لا يمكنها العثور على ملف الإعداد إذا شغّلته. يدعم ملف الإعداد تنسيقات متعددة ولكننا سنستخدم في مشروعنا ملف ‎.eslintrc.json، وتعني النقطة في بداية اسم الملف أن الملف مخفي افتراضيًا. تُثبَّت الأداة Eslint باستخدام npm، لذلك لديك خيار تثبيت هذه الأداة تثبيتًا محليًا أو عامًا، إذ يوصَى باستخدام كليهما:

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

لن نشرح جميع ميزات Eslint في هذا المقال، لكننا سنضع إعدادًا مناسبًا لمشروعنا الخاص ومتطلباته. ضع في بالك أنه إذا رغبتَ في تحسين وفرض قاعدة حول كيفية ظهور شيفرتك أو التحقق من صحتها، فيُحتمَل أن يُطبَّق ذلك باستخدام إعداد Eslint الصحيح.

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

./my-project/src/index.js
   2:8 error 'React' is defined but never used  no-unused-vars
 22:20 error 'body' is defined but never used   no-unused-vars
 96:19 error 'b' is defined but never used      no-unused-vars

✖ 3 problems (3 errors, 0 warnings)

يُعَد دعم تكامل محرر الشيفرة مفيدًا لأداة Eslint، ويُحتمَل أن يكون أكثر فائدة لأنه يمكن أن يقدم لنا ملاحظات في الوقت الحقيقي عند ظهور المشاكل:

إعداد المشروع الأولي

يمكن إعداد مشروع جديد بأمان باستخدام هذه الأدوات مع العلم أن العديد من المشاكل الأساسية ستُكتشَف مبكرًا.

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

حسنًا لنبدأ الإعداد المشروع الأولي.

1. ابدأ بفتح الطرفية، وانتقل إلى مكان يمكنك العثور عليه والوصول إليه بسهولة مثل سطح المكتب Desktop أو المجلد الرئيسي أو مجلد المستندات.
2. ثم شغّل الأوامر التالية لإنشاء مجلد لتحتفظ بمشروعك فيه، وانتقل إلى المجلد:

mkdir will-it-miss
cd will-it-miss

3. سننشئ الآن دليلًا جديدًا لجميع شيفرات تطوير موقع الويب لنضعها فيه. شغّل الأمر التالي:

mkdir src

يختلف تنظيم الشيفرة من فريق لآخر. سنضع شيفرة مشروعنا المصدرية في الدليل src.

4. تأكد من أنك داخل جذر الدليل will-it-miss، ثم أدخِل الأمر التالي لبدء وظيفة التحكم في شيفرة git المصدرية التي تعمل في الدليل:

git init

هذا يعني أنك ستتمكن من بدء تخزين مراجعات محتويات المجلد، وحفظها في مستودع بعيد وغير ذلك.

5. أدخل الأمر التالي بعد ذلك لتحويل دليلك إلى حزمة npm مع المزايا التي ناقشناها في المقال السابق:

npm init --force

سيؤدي الأمر السابق إلى إنشاء ملف package.json افتراضي يمكننا تهيئته لاحقًا إذا رغبنا في ذلك. كما يؤدي استخدام الراية ‎--force في أن ينشئ الأمر ملف package.json افتراضي على الفور دون طرح جميع الأسئلة المعتادة حول المحتويات التي تريدها كما رأينا سابقًا، وسنحتاج فقط الإعدادات الافتراضية حاليًا، وبالتالي نوفر قليلًا من الوقت.

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

سنحصل في هذه المرحلة على ملفات شيفرة المشروع (HTML وCSS وجافاسكربت وغيرها)، وسنضعها في الدليل src. لن نعلّمك كيفية عملها، لأنه ليس هدف هذا المقال، بل هدفنا تشغيل الأدوات لتتعلّم كيفية عملها.

1. يمكنك الحصول على ملفات الشيفرة من خلال زيارة هذه الصفحة وتنزيل وفك ضغط محتويات هذا المستودع على قرصك الصلب المحلي في مكانٍ ما. يمكنك تنزيل المشروع بأكمله كملف مضغوط عن طريق تحديد خيار نسخ Clone أو تنزيل Download ثم Download ZIP.

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

اقتباس

ملاحظة: يمكنك إعداد المشروع على جهازك المحلي من خلال الانتقال إلى الدليل الجذر للمجلد الذي فكّينا ضغطه، وفتح الطرفية في هذا الموقع، ثم تنفيذ الأمر npm install في الطرفية، مما يؤدي إلى تثبيت جميع اعتماديات المشروع المخزنة في الملف package.json.

تثبيت أدواتنا

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

npm install --save-dev eslint prettier babel-eslint

هناك شيئان مهمان يجب ملاحظتهما حول الأمر الذي شغّلته للتو. الأول هو أننا نثبّت الاعتماديات محليًا على المشروع، إذ يُعَد تثبيت الأدوات محليًا أفضل لمشروع معين. يتيح التثبيت محليًا إعادة إنشاء الإعداد بسهولة على أجهزة أخرى، ولكن لا يشمل ذلك الخيار ‎--global.

الجزء الثاني المهم من أمر التثبيت هو الخيار ‎--save-dev الذي يخبر npm أن هذه الاعتماديات المعينة مطلوبة فقط من أجل التطوير، لذلك يسردها npm في الملف package.json ضمن اعتماديات التطوير devDependencies وليس ضمن الاعتماديات devDependencies، وبالتالي إذا ثُبِّتَ هذا المشروع في وضع الإنتاج، فلن تُثبَّت هذه الاعتماديات. يمكن أن يحتوي المشروع النموذجي على العديد من اعتماديات التطوير التي لا حاجة إليها لتشغيل الشيفرة فعليًا في الإنتاج، ويؤدي إبقائها كاعتماديات منفصلة إلى تقليل العمل غير الضروري عند النشر في عملية الإنتاج، وهو ما سنلقي نظرة عليه في المقال التالي.

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

إعداد أدواتنا

سنضيف ملفات الإعداد في جذر المشروع -وليس في الدليل src- لإعداد الأدوات Prettier وEslint. يمكنك العثور على ملفات الإعداد في جذر المشروع، والتي لا تحتوي غالبًا على خيارات الإعداد المعبَّر عنها ببنية JSON، بالرغم من أن أدواتنا والعديد من الأدوات الأخرى تدعم بنية YAML أيضًا، والتي يمكنك التبديل إليها إذا كانت المفضلة لديك.

1. أنشئ أولًا ملفًا في جذر الدليل will-it-Miss وسمّه ‎.prettierrc.json.
2. يمكنك إعداد Prettier من خلال وضع المحتويات التالية في الملف ‎.prettierrc.json:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

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

3. يجب إعداد Eslint بعد ذلك من خلال إنشاء ملف آخر في جذر الدليل will-it-miss بالاسم ‎.eslintrc.json، وضع فيه المحتويات التالية:

{
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "no-console": 0
  }
}

يشير إعداد Eslint السابق إلى أننا نريد استخدام إعدادات Eslint الموصَى بها، وأننا سنسمح باستخدام ميزات ES6 مثل map()‎ أو Set()‎، ويمكننا استخدام عبارات استيراد الوحدة import، وأن استخدام التابع console.log()‎ مسموح.

4. لكننا نستخدم صيغة JSX الخاصة بإطار عمل React في ملفات المشروع المصدرية، ويمكن أن تستخدم في مشاريعك الحقيقية إطار العمل React أو Vue أو أي إطار عمل آخر، ويمكن ألّا تستخدم إطار عمل على الإطلاق. سيؤدي وضع صيغة JSX في شيفرة جافاسكربت إلى أن تظهر أخطاء Eslint بسرعة كبيرة من الإعداد الحالي، لذلك سنحتاج إلى إضافة مزيد من إعدادات Eslint لقبول ميزات JSX. يجب أن يبدو ملف الإعداد config file النهائي على النحو التالي:

{
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react"],
  "rules": {
    "semi": "error",
    "no-console": 0,
    "react/jsx-uses-vars": "error"
  }
}

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

5. شغّل الأمر التالي في الطرفية ضمن جذر مجلد مشروعك:

npm install --save-dev eslint-plugin-react

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

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

أدوات البناء والتحويل

سنستخدم إطار العمل React في مشروعنا، مما يعني استخدام صيغة JSX في الشيفرة المصدرية. كما سنستخدم في مشروعنا أحدث ميزات لغة جافاسكربت.

هناك مشكلة وهي أنه لا يوجد متصفح يدعم JSX بطريقة أصيلة، لإنها لغة وسيطة ويُفترَض أن تُصرَّف إلى لغات يفهمها المتصفح في شيفرة الإنتاج.

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

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

لذلك يجب تثبيت اعتمادية parcel في مشروعنا من خلال تشغيل الأمر التالي في طرفيتك:

npm install --save-dev parcel-bundler

استخدام الميزات المستقبلية

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

حتى ذلك الحين، ستحوّل Parcel بين CSS المتداخلة وCSS المدعومة بطريقة أصيلة بمساعدة PostCSS. بما أننا قررنا أن مشروعنا يجب أن يستخدم تداخل CSS بدلًا من Sass، فسيحتاج المشروع إلى تضمين إضافة PostCSS.

لنستخدم postcss-preset-env التي تتيح "استخدام CSS المستقبلية اليوم use tomorrow's CSS today" من خلال اتباع الخطوات التالية:

1. أضف ملفًا بالاسم ‎.postcssrc إلى جذر دليل المشروع.
2. أضف المحتويات التالية إلى الملف الجديد التي ستمنحنا تلقائيًا وصولًا كاملًا إلى أحدث ميزات CSS:

{
  "plugins": {
    "postcss-preset-env": {
      "stage": 0
    }
  }
}

وهذا كل ما نحتاجه. تذكر أن Parcel تثبّت الاعتماديات افتراضيًا.

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

تشغيل التحويل

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

1. انتقل إلى الطرفية وشغّل الأمر التالي لبدء تشغيل Parcel في الخلفية:

npx parcel src/index.html

يجب أن ترى الخرج التالي بمجرد تثبيت الاعتماديات:

Server running at http://localhost:1234
✨  Built in 129ms.

كما يثبّت Parcel الاعتماديات التي سنستخدمها في شيفرتنا، بما في ذلك react وreact-dom وreact-async-hook وdate-fns وformat-number، وبالتالي سيكون تشغيل Parcel الأول أطول من التشغيل المعتاد.

اقتباس

ملاحظة: إذا شغّلتَ Parcel وواجهت الخطأ Error: ENOENT: no such file or directory، فيجب إيقاف العملية باستخدام الاختصار Ctrl + C ثم حاول إعادة تشغيله.

يعمل الخادم الآن على عنوان URL المطبوع، وهو localhost: 1234 في حالتنا.

2. انتقل إلى عنوان URL السابق في متصفحك وسترى التطبيق قيد التشغيل.

يمتلك Parcel خدعة ذكية أخرى وهي أن أي تغييرات تطرأ على شيفرتك المصدرية ستؤدي إلى تحديث في المتصفح. يمكنك تجربة هذه الميزة من خلال ما يلي:

1. حمّل الملف src/components/App.js في محرر النصوص المفضل لديك.
2. ابحث عن النص "near misses"، واستبدله بشيء مثل "flying fish".
3. احفظ الملف، ثم ارجع مباشرة إلى التطبيق المُشغَّل في متصفحك. ستلاحظ تحديث المتصفح تلقائيًا، وتغيير السطر "‎ there will be near misses" في أعلى الصفحة.

كما يمكنك تجربة استخدام Eslint وPrettier. حاول إزالة المسافة البيضاء من أحد ملفاتك وحاول وضع ‎‎‎Prettier عليه لتنظيفه، أو أدخل خطأً صياغيًا في أحد ملفات جافاسكربت الخاصة بك وشاهد الأخطاء التي يعطيها Eslint عندما تحاول استخدام Parcel لبنائه مرة أخرى.

الخلاصة

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

لذلك كتبنا مثالًا لمشروع لتستخدم فيه أدواتك. نقترح عليك العمل في المقال التالي باستخدام شيفرة مثالنا، ثم يمكنك محاولة تغيير محتويات دليل src في مشروعك ونشره على Netlify، وسنناقش مرحلة النشر على Netlify في المقال التالي.

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

ترجمة -وبتصرُّف- للمقال Introducing a complete toolchain.

اقرأ أيضًا

• المقال السابق: أساسيات إدارة الحزم في تطوير الويب من طرف العميل
• دليل استخدام سطر الأوامر في عملية تطوير الويب من طرف العميل
• فهم أدوات تطوير الويب من طرف العميل

سنلقي في هذا المقال نظرة على مدير الحزم Package Manager بشيء من التفصيل لفهم كيفية استخدامه في مشاريعنا لتثبيت اعتماديات Dependencies أدوات المشروع وتحديثها وغير ذلك.

• المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت.
• الهدف: فهم مدراء ومستودعات الحزم، وسبب حاجتنا لها، وأساسيات استخدامها.

اعتماديات المشروع

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

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

يمكن أن تكون اعتمادية المشروع عبارة عن مكتبة أو إطار عمل جافاسكربت كامل مثل React وVue أو أداة مساعدة صغيرة جدًا مثل مكتبة التاريخ القابلة للقراءة، أو يمكن أن تكون أداة سطر أوامر مثل Prettier أو Eslint التي تحدثنا عنها في المقال السابق.

إن لم نستخدم أدوات البناء الحديثة، فيمكن تضمَّين مثل هذه الاعتماديات في مشروعك باستخدام عنصر <script> بسيط، ولكن يمكن ألا تعمل هذه الطريقة مباشرة، وبالتالي ستحتاج بعض الأدوات الحديثة لتجميع الشيفرة والاعتماديات مع بعضها بعضًا عند إصدارها على الويب. الحزمة Bundle هي المصطلح المُستخدَم للإشارة إلى ملف على خادم الويب الخاص بك الذي يحتوي على شيفرة جافاسكربت الخاصة ببرنامجك، وتُضغَطُ الحزمة قدر الإمكان للمساعدة في تقليل الوقت الذي يستغرقه تنزيل البرنامج وعرضه في متصفح زوار موقعك.

لا يُعَد تتبّع بعض الاعتماديات أمرًا صعبًا إذا وجدت أداة أفضل تريد استخدامها بدلًا من الأداة الحالية، أو أُصدِر إصدار جديد من الاعتمادية تريد التحديث إليه، ولكن يمكن أن يصبح هذا النوع من الأشياء صعبًا في المشاريع الكبيرة التي تحتوي على اعتماديات متعددة، لذلك يمكنك استخدام مدير حزم Package Manager مثل npm، لأنه سيضمن إضافة الشيفرة وإزالتها بطريقة نظيفة، بالإضافة إلى مجموعة من المزايا الأخرى.

مدير الحزم

مدير الحزم هو نظام يدير اعتماديات مشروعك، ويوفّر طريقة لتثبيت اعتماديات جديدة يُشار إليها باسم "الحزم Packages"، وإدارة مكان تخزين الحزم على نظام ملفاتك، وتقديم إمكانيات لنشرها.

يمكنك تنزيل اعتماديات مشروعك وتخزينها يدويًا دون استخدام مدير حزم، ولكن مدير الحزم سيتعامل بسلاسة مع تثبيت الحزم وإلغاء تثبيتها. إن لم تستخدم مدير حزم، فسيتعين عليك التعامل مع ما يلي يدويًا:

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

كما يتعامل مدير الحزم مع الاعتماديات المكرَّرة، وهو أمر مهم وشائع في تطوير الواجهة الأمامية.

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

إذا اعتمد مشروعك مثلًا على Webpack مع إعداد معين، فيجب التأكد من عمل هذا الإعداد عند تثبيت المشروع على جهاز آخر أو العودة إليه لاحقًا. إذا ثُبِّت إصدار مختلف من Webpack، فيمكن ألّا يكون متوافقًا، لذلك يجب تثبيت الاعتماديات محليًا في المشروع.

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

اقتباس

ملاحظة: ليس npm مدير الحزم الوحيد المتاح، فمدير الحزم البديل الناجح والشائع هو Yarn الذي يثبت الاعتماديات باستخدام خوارزمية مختلفة يمكن أن توفر تجربة مستخدم أسرع. كما يوجد عدد من العملاء الناشئين الآخرين مثل pnpm.

سجلات الحزم Package Registries

يحتاج مدير الحزم ليعمل إلى معرفة المكان الذي نثبّت الحزم منه، وهو ما يدعَى بسجل الحزمة Package Registry. السجل هو مكان مركزي تُنشَر الحزمة عليه وبالتالي يمكن تثبيتها منه. يُعدُّ npm اسم سجل الحزم الأكثر استخدامًا لحزم جافاسكربت.

ليس npm الخيار الوحيد لإدارة سجل حزمتك، إذ تتيح لك منتجات مثل Microsoft Azure إنشاء وكلاء لسجل npm إذ يمكنك تجاوز أو قفل حزم معينة، كما يقدم GitHub خدمة تسجيل حزمة، ويُحتمَل ظهور مزيد من الخيارات مع مرور الوقت. المهم هو التأكد من اختيارك لأفضل سجل مناسب لك، ولكن ستستخدم العديد من المشاريع مدير الحزم npm، وسنستخدمها في أمثلتنا.

استخدام نظام الحزم المجتمعي

لنعرض مثالًا باستخدام مدير وسجل الحزم لتثبيت أداة مساعدة لسطر الأوامر.

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

ثبّتنا الأداة Prettier تثبيتًا عامًا لكل المشاريع في المقال السابق، ولكن سنستخدم الآن npm لتثبيت Parcel محليًا باستخدام أفضل الممارسات، وسنثبّتها بوصفها جزءًا من تطبيق تجريبي.

إعداد التطبيق بوصفه حزمة npm

أنشئ أولًا مجلدًا جديدًا لتخزين تطبيقنا التجريبي ضمنه في مكان يمكنك إيجاده بسهولة مرة أخرى، وسنسميه parcel-experiment، ولكن بالطبع يمكنك تسميته ما تشاء:

mkdir parcel-experiment
cd parcel-experiment

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

اكتب الأمر التالي، وتأكد من أنك داخل الدليل parcel-experiment:

npm init

ستُطرَح بعض الأسئلة عليك الآن، ثم سينشئ npm ملف package.json افتراضي بناءً على إجاباتك:

• name: الاسم الذي يعرّف التطبيق. اضغط على زر Enter لقبول الاسم parcel-experiment الافتراضي.
• version: رقم إصدار البداية الخاص بالتطبيق. اضغط على زر Enter لقبول الإصدار 1.0.0 الافتراضي.
• description: وصف سريع للغرض من التطبيق. اكتب شيئًا بسيطًا مثل "حزمة npm بسيطة للتعرف على كيفية استخدام npm"، ثم اضغط على زر Enter.
• entry point: يمثل ملف جافاسكربت ذي المستوى الأعلى في التطبيق. الملف index.js الافتراضي مناسب حاليًا، ثم اضغط على زر Enter.
• test command وgit repository وkeywords: اضغط على زر Enter لترك هذه الخيارات فارغة حاليًا.
• author: مؤلف المشروع. اكتب اسمك، ثم اضغط على زر Enter.
• license: ترخيص نشر الحزمة. اضغط على زر Enter لقبول الإعداد الافتراضي حاليًا.

اضغط على زر Enter مرة أخرى لقبول هذه الإعدادات.

انتقل إلى المجلد parcel-experiment وستجد أن لديك الملف package.json. افتحه ويجب أن يبدو كما يلي:

{
  "name": "parcel-experiment",
  "version": "1.0.0",
  "description": "A simple npm package to learn about using npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Chris Mills",
  "license": "ISC"
}

إذ يمثل ملف الإعداد الذي يحدد حزمتك.

تثبيت Parcel

شغّل الأمر التالي لتثبيت Parcel محليًا:

npm install parcel-bundler

سنكون بعد ذلك جاهزين للتطوير الحديث من طرف العميل الذي يعني استخدام أدوات البناء لتسهيل العمل على المطور. ألقِ نظرة أخرى على ملف package.json أولًا، ستلاحظ أن npm أضاف حقلًا جديدًا وهو الاعتماديات dependencies:

"dependencies": {
  "parcel-bundler": "^1.12.4"
}

إذا نقلتَ في المستقبل قاعدة شيفرتك إلى موقع آخر على جهاز آخر، فيمكنك إعادة إنشاء الإعداد نفسه عن طريق تشغيل الأمر npm install، وسينظر npm في الاعتماديات ثم يثبّتها لك. لكن أحد مساوئ npm هو أن Parcel متاح فقط ضمن التطبيق parcel-experiment، إذ لن تتمكن من تشغيله في مجلد مختلف.

إعداد التطبيق

يتوقّع Parcel أن يعمل ملف index.html وملف index.js، ولكن بخلاف ذلك ليست بنية مشروعك مُعلَنة. يمكن أن تكون الأدوات الأخرى مختلفة، ولكن تسهّل الأداة Parcel على الأقل من تجربتنا الأولية.

يجب إضافة ملف index.html إلى دليل عملنا. أنشئ الملف index.html في دليل الاختبار الخاص بك، وضع فيه المحتويات التالية:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

يجب بعد ذلك إضافة ملف index.js في دليل الملف index.html نفسه. يمكن أن يكون الملف index.js فارغًا حاليًا، ولكن يجب أن يكون موجودًا لذلك أنشئه الآن.

تطبيق Parcel

سنشغّل الآن أداة Parcel المثبَّتة حديثًا. شغّل الأمر التالي في طرفيتك:

parcel index.html

يجب أن ترى شيئًا كالتالي مطبوعًا على طرفيتك:

Server running at http://localhost:1234
✨  Built in 193ms.

إذا واجهتَ مشكلةً في الطرفية التي تعرض خطأ من النوع "الأمر غير موجود command not found"، فحاول تشغيل الأمر السابق باستخدام الأداة npx مثل الأمر npx parcel index.html.

يمكننا الآن الاستفادة من نظام حزمة جافاسكربت المجتمعي الكامل. يوجد حاليًا خادم ويب محلي يعمل على العنوان http://localhost:1234، فإذا انتقلت إليه، فلن ترى أي شيء حاليًا، ولكن ستعيد Parcel بنائه وستعمل على تحديث الخادم تلقائيًا عند إجراء تعديلات على تطبيقك لتتمكن من رؤية تأثير التحديث مباشرة.

لنفترض أننا نريد عرض التواريخ النسبية التي يمكن قراءتها، مثل "منذ ساعتين 2‎ hours ago" و"قبل 4 أيام 4‎ days ago" وما إلى ذلك. يُعَد التابع formatDistanceToNow()‎ الخاص بالحزمة date-fns مفيدًا لذلك، وهناك حزم أخرى تطبّق الشي نفسه.

أضف الشيفرة التالية في ملف index.js واحفظها:

import { formatDistanceToNow } from 'date-fns'

const date = '1996-09-13 10:00:00';
document.body.textContent = formatDistanceToNow(new Date(date)) + ' ago';

ارجع إلى http://localhost:1234 وسترى كم مضى منذ بلوغ المؤلف 18 عامًا.

ما يميز الشيفرة السابقة هو أنها تستخدم الدالة formatDistanceToNow()‎ من الحزمة date-fns التي لم نثبّتها. اكتشفت الأداة Parcel أنك بحاجة الوحدة، وبحثت عنها في سجل الحزمة npmjs.com، وثبّتتها محليًا تلقائيًا. يمكنك إثبات ذلك من خلال البحث في ملف package.json مرة أخرى، وسترى تحديث حقل الاعتماديات dependencies كما يلي:

"dependencies": {
  "date-fns": "^2.12.0",
  "parcel-bundler": "^1.12.4"
}

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

• node_modules: ملفات اعتماديات Parcel وdate-fns.
• dist: دليل التوزيع distribution directory، وهو الملفات المُجمَّعة والمُصغَّرة تلقائيًا التي أنشتأها Parcel، والملفات المُخدَّمة على العنوان localhost:1234، وهي الملفات التي ستحمّلها إلى خادم الويب الخاص بك عند إطلاق الموقع عبر الإنترنت ليراه المستخدمين.

طالما أننا نعرف اسم الحزمة، فيمكننا استخدامها في شيفرتنا وستوقِف Parcel تشغيل الحزمة -أو نسخة منها- وتجلبها وتثبّتها في دليلنا المحلي ضمن node_modules.

بناء الشيفرة للإنتاج

لا تعدّ الشيفرة السابقة جاهزة للإنتاج، إذ يكون لمعظم أنظمة أدوات البناء وضع تطوير Development Mode ووضع إنتاج Production Mode. الاختلاف المهم هو أن الكثير من الميزات المفيدة التي ستستخدمها في التطوير ليست ضرورية في الموقع النهائي، لذلك ستُستبعَد للإنتاج مثل استبدال الوحدة وإعادة التحميل المباشر والشيفرة المصدرية غير المضغوطة والمُعلَّقة. هذه بعض ميزات تطوير الويب الشائعة المفيدة جدًا في مرحلة التطوير، ولكنها ليست مفيدة في مرحلة الإنتاج.

أوقِف أمر Parcel السابق باستخدام الاختصار Ctrl + C. يمكننا الآن تجهيز أساسات موقع لنشره وهميًا، إذ توفّر Parcel أمرًا إضافيًا لإنشاء ملفات مناسبة للنشر، وإنشاء حزم Bundles مع خيار البناء.

شغّل الأمر التالي:

parcel build index.html

ويجب أن ترى الناتج التالي:

✨  Built in 9.35s.

dist/my-project.fb76efcf.js.map    648.58 KB     64ms
dist/my-project.fb76efcf.js        195.74 KB    8.43s
dist/index.html                        288 B    806ms

وجهة ملفات الإنتاج هي الدليل dist.

تقليل حجم ملف التطبيق

حجم حزمة جافاسكربت my-project.fb76efcf.js هو 195K وهو حجم كبير جدًا، بالرغم من أن كل ما تفعله هو طباعة سطر نصي. هناك بالتأكيد بعض الحسابات، ولكننا لسنا بحاجة إلى 195K من شيفرة جافاسكربت لذلك.

يجدر بك التساؤل عما إذا كانت أدوات التطوير تطبّق الشيء الصحيح عن استخدامها، إذ يبلغ حجم الحزمة 200K تقريبًا في مثالنا لأنها تضمّنت مكتبة date-fns الكاملة، وليس الدالة التي نستخدمها فقط.

إذا تجنّبنا استخدام أي أدوات تطوير واستخدمنا العنصر <script src=""‎> مع إصدار مستضاف من date-fns، فسيحدث الشيء نفسه تقريبًا، وستُنزَّل المكتبة عند تحميل صفحة مثالنا في المتصفح.

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

هناك ثلاثة عروض رئيسية للأدوات التي تنشئ حزمًا من الشيفرة المصدرية هي: Webpack وRollup وParcel. سيكون هناك مزيد من الخيارات المتاحة، لكن تُعَد الأنواع التالية شائعة الاستخدام:

• تقدم أداة RollUp تقنية هز الشجرة وتقسيم الشيفرة.
• تتطلب أداة Webpack إعدادًا، بالرغم من أن البعض يقلل من تعقيد إعداد Webpack الخاص بالمطورين.
• هناك في حالة Parcel -قبل الإصدار Parcel 2- راية خاصة مطلوبة هي ‎--experimental-scope-hoisting التي ستهز الشجرة أثناء البناء.

لنستخدم Parcel حاليًا، بما أننا ثبّتناها سابقًا. لنشغّل الأمر التالي:

parcel build index.html --experimental-scope-hoisting

سترى أن هذا الأمر يحدث فرقًا كبيرًا:

✨  Built in 7.87s.

dist/my-project.86f8a5fc.js    10.34 KB    7.17s
dist/index.html                   288 B    753ms

أصبح حجم الحزمة حوالي 10K، وهذا أفضل بكثير.

إذا أردنا إصدار هذا المشروع إلى خادم، فسنعدّل الملفات الموجودة في مجلد dist، إذ تتعامل Parcel تلقائيًا مع جميع تغييرات اسم الملف. نوصي بإلقاء نظرة على الشيفرة المصدرية في dist/index.html لتتمكن من رؤية التغييرات التي أجرتها Parcel تلقائيًا.

اقتباس

ملاحظة: لم يكن الإصدار Parcel 2 صادرًا في وقت كتابة النسخة الأجنبية من هذا المقال، ولكن ستبقى جميع هذه الأوامر تعمل عند إصداره لأن مؤلفي Parcel لديهم الحس السليم لتسمية الأداة بطريقة مختلفة. يمكنك تثبيت Parcel 1.x من خلال تثبيت parcel-bundler، لكن الإصدار parcel 2.x يسمّى parcel.

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

دليل عملاء مدير الحزم

ثبّتنا في مثالنا حزمة Parcel باستخدام npm، ولكن هناك بعض البدائل كما ذكرنا سابقًا، لذلك لنلقِ نظرة عليها. سنذكر بعض مدراء الحزم وهي:

• npm في npmjs.org.
• pnpm في pnpm.js.org.
• yarn في yarnpkg.com.

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

يُعتقَد أن yarn أسرع من npm من ناحية عملية التثبيت في أغلب الأحيان، وهذا مهم للمطورين بسبب وجود قدر كبير من الوقت الضائع في انتظار تثبيت الاعتماديات والنسخ إلى الحاسوب.

اقتباس

ملاحظة: مدير الحزم npm غير مطلوب لتثبيت الحزم من سجل npm، بالرغم من أنهما يشتركان في الاسم نفسه. يمكن أن يستخدم كل من pnpm وyarn تنسيق package.json نفسه الذي يستخدمه npm، ويمكنهما تثبيت أي حزمة من سجل npm وسجلات الحزم الأخرى.

لنراجع الآن الإجراءات الشائعة التي يجب تنفيذها مع مدير الحزم.

بدء مشروع جديد

npm init
yarn init

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

تثبيت الاعتماديات

npm install date-fns
yarn add date-fns

رأينا أمر التثبيت install قيد التنفيذ أعلاه الذي سيؤدي إلى إضافة حزمة date-fns مباشرة إلى دليل العمل ضمن دليل فرعي يسمى node_modules مع اعتماديات date-fns.

سيثبّت الأمر السابق افتراضيًا أحدث إصدار من date-fns، ولكن يمكنك التحكم في ذلك، إذ يمكنك استخدام الأمر date-fns@1 الذي يمنحك أحدث إصدار من 1‎.x وهو 1.30.1، أو يمكنك تجربة الأمر date-fns@^2.3.0 الذي يعطي أحدث إصدار يتضمن الإصدار 2.3.0 أو بعده (2.8.1 في وقت كتابة النسخة الأجنبية من هذا المقال).

تحديث الاعتماديات

npm update
yarn upgrade

سينظر الأمر السابق في الاعتماديات المثبَّتة حاليًا ويحدّثها عند وجود تحديث متاح ضمن المجال المحدّد في الحزمة. حُدِّد المجال في إصدار الاعتمادية في ملف package.json الخاص بك مثل date-fns^2.0.1، إذ يعني المحرف ^ جميع الإصدارات الثانوية وإصدارات تصحيح الأخطاء التي تتضمن الإصدار 2.0.1 والإصدارات التي بعدها باستثناء الإصدار 3.0.0.

يُحدَّد الإصدار باستخدام نظام يسمى semver الذي يبدو معقدًا بعض الشيء في توثيقه، ولكن يمكن تبسيطه من خلال النظر فقط في المعلومات الموجزة، ويُمثّل الإصدار بالشكل MAJOR.MINOR.PATCH مثل 2.0.1، إذ يمثل الرقم 2 الإصدار الرئيسي Major Version ويمثل الرقم 1 إصدار تصحيح الأخطاء Patch Version. يمكنك تجربة قيم Semver باستخدام حاسبة semver.

يجب أن نتذكر أن الأمر npm update لن يرقّي الاعتماديات خارج المجال المحدَّد في ملف package.json، وإنما يثبت الإصدار الموجود على وجه التحديد.

تدقيق الثغرات

npm audit
yarn audit

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

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

التحقق من الاعتمادية

npm ls date-fns
yarn why date-fns

يظهِر الأمر السابق إصدار الاعتمادية المُثبَّتة وكيفية تضمينها في مشروعك، ويُحتمَل سحب حزمة أخرى ذات مستوى أعلى في date-fns. كما يمكن أن يكون لديك إصدارات متعددة من حزمة معينة في مشروعك، ولوحظ هذا الأمر عدة مرات مع حزمة lodash أنها مفيدة جدًا لضمان عمل كافة الشيفرة البرمجية.

يمكن أن ترغب في التحقق بالضبط من الإصدار المثبت، بالرغم من أن مدير الحزم سيبذل قصارى جهده لإزالة تكرار الحزم.

إنشاء أوامرك الخاصة

يدعم مدير الحزم إنشاء أوامرك الخاصة وتنفيذها من سطر الأوامر، إذ يمكننا استخدام الأمر التالي مثلًا:

npm run dev
# ‫ أو yarn run dev

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

إذا حاولت تشغيل هذا السكربت في مشروع اختبار Parcel الخاص بك، فيُحتمَل أن يدّعي أن السكربت dev مفقود، لأن npm وyarn يبحثان عن خاصية تسمى dev ضمن الخاصية scripts لملف package.json الخاص بك.

يمكن أن تشغّل Parcel خادم تطوير باستخدام الأمر parcel serve filename.html، لأننا سنرغب في استخدامه كثيرًا أثناء عملية التطوير، لذلك لننشئ أمر مخصَّصًا مختصرًا هو "dev" في ملف package.json.

يجب أن يكون لديك ملف package.json ضمن الدليل parcel-experiment. افتحه ويجب أن تبدو الخاصية scripts كما يلي:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
},

حدّثها لتبدو كما يلي، ثم احفظ الملف:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "parcel serve index.html"
},

أضفنا الأمر dev المخصص بوصفه سكربت npm.

حاول الآن تشغيل الأمر التالي في طرفيتك، وتأكد من أنك ضمن الدليل parcel-experiment:

npm run dev

يجب أن يبدأ الأمر السابق Parcel ويقدم ملف index.html الخاص بك على خادم التطوير المحلي كما رأينا سابقًا:

Server running at http://localhost:1234
✨  Built in 5.48s.

كما تُعَد أوامر npm وyarn ذكية من لأنها ستبحث عن أدوات سطر الأوامر المثبَّتة محليًا للمشروع قبل محاولة العثور عليها من خلال الطرق التقليدية، ويخزّن حاسوبك عادةً البرامج ويسمح بإيجادها. يمكنك معرفة المزيد حول تعقيدات الأمر run، بالرغم من أن سكربتاتك ستعمل بصورة جيدة في معظم الحالات.

يمكنك إضافة جميع الأنواع إلى الخاصية scripts التي تساعدك على أداء عملك.

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

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

ترجمة -وبتصرُّف- للمقال Package management basics.

اقرأ أيضًا

• المقال التالي: بناء نموذج كامل لسلسلة أدوات تطوير الويب من طرف العميل
• المقال السابق: أدوات مطوري الويب المدمجة في المتصفحات
• فهم أدوات تطوير الويب من طرف العميل
• مدخل إلى Helm: مدير حزم Kubernetes
• نظام إدارة الحزم NuGet في dot NET
• كيف تدير الحزم على نظام FreeBSD 10.1 بواسطة Pkg

تحتوي كل متصفحات الويب الحديثة مجموعة أدوات فعّالة لمطوري الويب تنفذ مجالًا واسعًا من الوظائف من فحص ملفات HTML وCSS وجافاسكريبت إلى عرض ملف دعم طلبته الصفحة والمدة التي يستغرقها حتى يُحمّل. يشرح هذا المقال كيفية استعمال الوظائف الأساسية لأدوات مطوري ويب DevTools الخاصة بمتصفحك.

اقتباس

ملاحظة: قبل أن تشرع بتنفيذ الأمثلة التي سنطرحها في المقال، افتح موقع أمثلة المبتدئين، فلا بدّ أن يكون مفتوحًا عند تنفيذ الخطوات التي نشرحها تاليًا.

فتح أدوات مطوري ويب في متصفح

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

لكن كيف ستظهر هذه الأدوات؟

• باستخدام لوحة المفاتيح: اضغط على الأزرار CTRL + Shift + I، ماعدا المتصفحات التالية:
  • مايكروسوفت إنترنت إكسبلورر وإيدج: اضغط على F12.
  • ماك أو إس: اضغط على ⌘ + ⌥ +I.
• باستخدام شريط القائمة Menu Bar:

اضغط زر القائمة ثم:

• فايرفوكس: اضغط على "مطوري ويب Web Developer" ثم اختر "تبديل الأدوات Toggle Tools" أو "أدوات Tools" ثم اختر "مطوري الويب Web Developer" ثم اختر "تبديل الأدوات Toggle Tools".
• كروم: اضغط على "المزيد من الأدوات More Tools" ثم اختر "أدوات المطورين Developer Tools".
• سفاري: اضغط على "تطوير Develop" ثم اختر "إظهار فاحص الويب Show Web Inspector"، وإن لم تجد قائمة "تطوير Develop" انتقل إلى المتصفح سفاري Safari ثم اختر "تفضيلات Preferences" ثم اختر "متقدم Advanced" ثم فعّل الخيار "أظهر قائمة التطوير في شريط القائمة Show Develop menu in menu bar".
• أوبرا: اضغط على "مطورون Developer" ثم اختر "أدوات المطورين Developer tools".
• باستخدام قوائم السياق Context Menu: اضغط باستمرار بالزر الأيمن للفأرة على أي عنصر في صفحة الويب (انقر CTRL في ماك) واختر "فحص عنصر Inspect Element" من قائمة السياق التي ستظهر (فائدة إضافية: تظلل هذه الطريقة مباشرة شيفرة العنصر الذي نقرت عليه).

فحص شجرة العناصر DOM ومحرر تنسيقات CSS

تُظهر أدوات مطوري ويب عند فتحها نافذة الفاحص Inspector افتراضيًا والذي يبدو تقريبًا كما تعرضه لقطة الشاشة التالية:

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

إن لم تظهر نافذة الفاحص مباشرة:

• اضغط أو المس النافذة "فاحص Inspector" في فايرفوكس.
• اضغط أو المس النافذة "مستكشف DOM Explore" أو اضغط CTRL + 1 في إنترنت إكسبلورر.
• اضغط أو المس النافذة "عناصر Elements" في مايكروسوفت إيدج وأوبرا وكروم.
• لا تظهر عناصر التحكم بصورة واضحة في سفاري، لكن من المفترض أن ترى نافذة HTML إن لم تختر شيئًا آخر. اضغط على زر "تنسيق Style" لعرض تنسيقات CSS.

استكشاف عمل فاحص DOM

انقر في البداية بالزر اليميني للفأرة (أو اضغط CTRL) على عنصر HTML ضمن فاحص شجرة DOM وتحقق من محتويات قائمة السياق التي ستظهر. تختلف عناصر القائمة من متصفح لآخر، لكن المهمة منها موجودة غالبًا في جميع المتصفحات.

• حذف عقدة Delete Node: (تجدها أحيانًا "حذف عنصر Delete Element") تحذف العنصر المحدد.
• تحرير كملف HTML: (تجده أحيانًا "إضافة سمة Add Attribute/‎ تحرير نص Edit Text") وذلك لتعديل ملف HTML ومشاهدة نتيجة التعديلات مباشرة، وهو مفيد جدًا للتنقيح والاختبار.
• تمرير Hover/‎ تفعيل Active/‎ تركيز Focus: تجبر العنصر على تغيير الحالة التي يُعرض بها، وبالتالي ستتمكن من مشاهدة تنسيقه في كل حالة.
• نسخ Copy/‎ نسخ بصيغة HTML: عنصر HTML الذي تختاره.
• يمكن أن تجد في بعض المتصفحات خيارات مثل "نسخ CSS" و"نسخ Xpath" لكي تنسخ مُحدِّد CSS أو تعبير Xpath المرتبط بعنصر HTML الحالي.

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

استكشاف محرر تنسيقات CSS

يعرض محرر CSS افتراضيًا القواعد المطبقة على العنصر المختار:

تُساعدك هذه الميزات في النقاط التالية:

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

لاحظ وجود عدة نوافذ فرعية يمكن النقر عليها في نافذة CSS:

• التنسيق المحوسب Computed: وتعرض لك التنسيق كما هو مطبق على العنصر (القيم النهائية الجاهزة للتطبيق ضمن المتصفح).
• عرض المخطط Layout: تتكون هذه المنطقة في فايرفوكس من:
  • نموذج صندوقي Box Model: ويعرض نموذجًا صندوقيًا بصريًا لخصائص العنصر لتتمكن مباشرة من الاطلاع على الهوامش والحدود والمساحات الفارغة حوله، وحجم المحتوى الذي يضمه.
  • شبكة العرض Grid: إن استخدام تنسيق الشبكة CSS Grid ضمن الصفحة التي تتفحصها، سيساعدك هذا القسم على رؤية تفاصيل هذه الشبكة.
  • الخطوط Fonts: وتظهر الخطوط المطبقة على العنصر.

منقح جافاسكربت

يتيح منقح جافاسكربت مراقبة قيمة المتغيرات وضبط نقاط إيقاف التنفيذ Breakpoints، وهي أماكن في شيفرتك تريد إيقاف تنفيذ الشيفرة عندها لتتحقق من المشاكل التي تمنع الشيفرة من العمل بالطريقة المطلوبة.

للوصول إلى المنقح:

• فايرفوكس: اضغط على زر القائمة ثم اضغط على "أدوات المطور Web Developer" ثم اضغط على "المنقح Debugger". كما يمكن الضغط على المفاتيح CTRL + Shift + I معًا. وإن كانت أدوات تطوير ويب مفتوحة مسبقًا، اضغط فقط على نافذة "المنقح Debugger".
• إنترنت إكسبلورر 11 وإيدج: اضغط على المفتاح F12 ثم المفتاحين CTRL + 3. إن كانت أدوات مطوري ويب مفتوحة مسبقًا، انقر على نافذة "المنقح Debugger".
• سفاري: افتح نافذة أدوات مطور ويب ثم اضغط على نافذة "المنقح Debugger".

استكشاف منقح جافاسكربت

ستجد ثلاثة أقسام في منقح جافاسكربت على فايرفوكس

قائمة الملفات

وهو القسم الأول على يسار نافذة المنقح، يتضمن لائحة الملفات المرتبطة بالصفحة التي تنقحها. اختر الملف الذي ترغب بالعمل عليه بالنقر عليه لتظهر محتوياته ضمن القسم الأوسط من نافذة المنقح.

الشيفرة المصدرية

وتساعدك في وضع نقاط إيقاف التنفيذ أينما ترغب في ملف الشيفرة. لاحظ نقطة الإيقاف في الصورة التالية، وهي عند السطر المظلل الذي يحمل الرقم 18:

مراقبة التعابير ونقاط إيقاف التنفيذ

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

اقتباس

لاحظ كيف يعرض القسم الأول "مراقبة العبارات Watch expressions" في الصورة التي سنعرضها تاليًا كيف أُضيف المتغير "listitems". يمكن عرض المصفوفة التي تضم قيم المتغير بالنقر عليه.

تُرتّب نقاط إيقاف التنفيذ في القسم الثاني "نقاط إيقاف التنفيذ Breakpoints". لاحظ كيف وضعت نقطة إيقاف في ملف الشيفرة "example.js" قبل السطر البرمجي:

listItems.push(inputNewItem.value);

يظهر القسمان الأخيران فقط عند تنفيذ الشيفرة. إذ يعرض القسم "مكدس الاستدعاءات Call Stack" الشيفرة التي جرى تنفيذها حتى الوصول إلى السطر الحالي. لاحظ أنّ الشيفرة موجودة في الدالة التي تعالج نقرة الفأرة، وأن الشيفرة في حالة إيقاف بفعل نقطة الإيقاف. وأخيرًا يعرض القسم "المجالات Scopes" القيم المختلفة التي تنتجها الشيفرة وبالإمكان متابعتها. تعرض الصورة التالية على سبيل المثال الكائنات الموجودة في الشيفرة إضافة إلى الدالة "AddItemClick".

طرفية جافاسكربت

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

• إن كانت نافذة أدوات مطوري ويب مفتوحة انقر على نافذة "طرفية Console"، وإن لم تكن مفتوحة يمكنك في فايرفوكس الضغط على المفاتيح CTRL + SHIFT + K معًا أو من خلال:
  • اضغط على رمز القائمة

ثم اضغط على "أدوات المطورين Web Developer" ثم اضغط على "طرفية ويب Web Console" أو "أدوات Tools" ثم اضغط على "أدوات المطورين Web Developer" ثم اضغط على "طرفية الويب Web Console".

• في بقية المتصفحات، افتح نافذة أدوات مطوري ويب ثم انقر على نافذة الطرفية.

ينتج عن فتح الطرفية نافذة مشابهة للنافذة في الصورة التالية:

لتختبر الطرفية، حاول كتابة مقطع الشيفرة التالي ضمنها مقطعًا مقطعًا (ثم اضغط "Enter"). لنكتب أولًا التعليمة التالية:

   alert('hello!');

ثانيًا جرب كتابة الشيفرة التالية:

document.querySelector('html').style.backgroundColor = 'purple';
const myWordmark = document.createElement('img');
myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myWordmark);

حاول الآن إدخال نسخة خاطئة من الشيفرة وراقب ما يحدث:

    alert('hello!);

أو هكذا:

document.cheeseSelector('html').style.backgroundColor = 'purple';
const myWordmark = document.createElement('img');
myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myWordmark);

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

ترجمة -وبتصرف- للمقال How does the Internet work.

اقرأ أيضًا

• مدخل إلى أدوات التطوير في متصفح الويب DevTools
• أدوات المطور
• ما هي الأدوات المستخدمة في بناء مواقع ويب؟
• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة
• كيف تستخدم أدوات المطور DevTools في Chrome

سيُطلَب منك بلا شك خلال عملية التطوير تشغيل بعض الأوامر في الطرفية Terminal أو على سطر الأوامر Command Line، لذلك سنقدّم من خلال هذا المقال مقدمة عن الطرفية، والأوامر الأساسية التي ستحتاج إلى إدخالها، وكيفية ربط الأوامر مع بعضها بعضًا، وإضافة أدوات واجهة سطر الأوامر Command Line Interface -أو CLI اختصارًا- الخاصة بك.

• المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت.
• الهدف: فهم سطر الأوامر أو الطرفية، والأوامر الأساسية التي يجب تعلمها، وكيفية تثبيت أدوات سطر أوامر جديدة.

الطرفية Terminal

الطرفية هي واجهة نصية تُستخدَم لتنفيذ البرامج النصية. إذا شغّلتَ أدوات تطوير الويب، فهناك فرصة كبيرة لفتح سطر الأوامر وتشغيل بعض الأوامر لاستخدام الأدوات التي اخترتها، إذ سيُشار إلى هذه الأدوات باسم أو أدوات واجهة سطر الأوامر Command Line Interface أو أدوات CLI اختصارًا.

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

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

نشأت الطرفية في الخمسينات والستينات من القرن الماضي، ولكن شكلها الأصلي لا يشبه ما نستخدمه اليوم. بقيت الطرفية منذ ذلك الحين ميزة ثابتة في جميع أنظمة التشغيل من أجهزة سطح المكتب إلى خوادم السحابة إلى الحواسيب الصغيرة مثل Raspberry PI Zero وحتى الهواتف المحمولة. توفر الطرفية وصولًا مباشرًا إلى نظام ملفات الحاسوب الأساسي والميزات منخفضة المستوى، وبالتالي تُعَد مفيدة لأداء المهام المعقدة بسرعة. كما أنها مفيدة في عملية الأتمتة مثل كتابة أمر لتحديث أسماء مئات الملفات فوريًا كتعديل اسم الملف "ch01-xxxx.png" إلى "ch02-xxxx.png"، فإذا حدّثتَ أسماء الملفات باستخدام تطبيق Finder أو Explorer GUI، فسيستغرق الأمر وقتًا طويلًا.

يمكنك من خلال الشكل الآتي رؤية بعض الأشكال المختلفة للبرامج المتوفرة التي يمكن أن تنقلك إلى الطرفية، وتظهَر موجِّهات الأوامر المتوفرة في ويندوز مثل برامج Cmd و Powershell التي يمكن تشغيلها من قائمة ابدأ عن طريق كتابة اسم البرنامج.

كما يوضّح الشكل التالي تطبيق طرفية نظام ماك macOS:

كيفية الوصول إلى الطرفية

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

• لينكس أو يونيكس: تحتوي أنظمة لينكس أو يونيكس طرفية متاحة افتراضيًا مدرجَة ضمن تطبيقاتك.
• نظام ماك macOS: يحتوي نظامًا يسمى داروين Darwin يقع أسفل واجهة المستخدم الرسومية ويشبه نظام يونيكس، ويوفر الطرفية والوصول إلى الأدوات ذات المستوى المنخفض. الطرفية متاحة على نظام ماك من خلال المسار Applications/Utilities/Terminal.
• ويندوز: لم يكن استخدام الطرفية أو سطر الأوامر على ويندوز بسيطًا أو سهلًا كما هو الحال في أنظمة التشغيل الأخرى، ولكن الأمور تتحسن مع مرور الوقت. لطالما امتلك ويندوز برنامجًا شبيهًا بالطرفية يسمى Cmd أو موجه الأوامر، ولكنه ليس متكافئًا مع أوامر يونيكس، بل يكافئ موجه ويندوز دوز Windows DOS ذي النمط القديم. توجد برامج أفضل لتوفير طرفية على ويندوز مثل PowerShell وGitbash الذي يكون جزءًا من مجموعة أدوات git for Windows. لكن أفضل خيار لنظام ويندوز حاليًا هو نظام ويندوز الفرعي لنظام لينكس Windows Subsystem for Linux -أو WSL اختصارًا، وهو طبقة توافق لتشغيل أنظمة تشغيل لينكس مباشرة من داخل الإصدار رقم 10 من ويندوز، مما يتيح لك تشغيل طرفية حقيقية مباشرة على ويندوز دون الحاجة إلى آلة افتراضية، ويمكن تثبيت نظام WSL مباشرة من متجر ويندوز مجانًا.

نوصي بشدة بتثبيت نظام WSL، ويمكنك التمسك باستخدام موجّه الأوامر الافتراضي cmd إذ ستعمل أدوات متعددة بطريقة صحيحة، ولكنك ستجد الأمور أسهل إذا كان لديك تكافؤ أفضل مع أدوات يونيكس.

هناك فرق بين الطرفية وسطر الأوامر، فالطرفية تقنيًا هي برنامج يبدأ ويتصل بالصدفة Shell التي تُعَد بيئة جلستك إذ يمكنك تخصيص أشياء مثل الموجه والاختصارات، بينما سطر الأوامر هو السطر الحرفي الذي تكتب فيه الأوامر ويومض المؤشر.

إذا استخدمت أدواتٍ مثل Visual Studio Code، فهناك مجموعة كبيرة من الامتدادات التي يمكن استخدامها كوكيل Proxy لاستخدام أوامر الطرفية دون الحاجة إلى استخدامها مباشرة، وبالرغم من وجود الكثير من الأدوات المتاحة في سطر الأوامر. لكنك لن تجد امتدادًا لمحرر الشيفرات لكل ما تريده، لذلك سيتعين عليك اكتساب خبرة في استخدام الطرفية في النهاية.

أوامر المدمجة الأساسية في الطرفية

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

• انقل نظام ملفات حاسوبك إلى جانب مهام المستوى الأساسي مثل الإنشاء والنسخ وإعادة التسمية والحذف:
  • التنقل بين المجلدات باستخدام الأمر cd.
  • إنشاء مجلد باستخدام الأمر mkdir.
  • إنشاء ملفات وتعدّيل بياناتها الوصفية باستخدام الأمر touch.
  • نسخ الملفات باستخدام الأمر cp.
  • نقل الملفات باستخدام الأمرmv.
  • حذف الملفات أو المجلدات باستخدام الأمر rm.
• تنزيل الملفات الموجودة في عناوين URL محدَّدة باستخدام الأمر curl.
• البحث عن أجزاء نصية ضمن مجموعات نصية أكبر باستخدام الأمر grep.
• عرض محتويات ملف بمقدار صفحة تلو الأخرى باستخدام الأمر less وcat.
• معالجة وتحويل مجاري النصوص مثل تغيير جميع وسوم <div> في ملف HTML إلى <article> باستخدام الأوامر awk وtr وsed.

التنقل في سطر الأوامر

ستحتاج حتمًا إلى الانتقال إلى مسار معين عندما تزور سطر الأوامر. تشغّل جميع أنظمة التشغيل برنامجها الطرفي في المسار الموجود فيه سطر الأوامر، وغالبًا سترغبُ بالانتقال إلى لمسار مختلف.

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

يمكنك تغيير المسار من خلال كتابة الأمر cd في الطرفية متبوعًا بالمجلد الذي تريد الانتقال إليه. يمكنك استخدام الأمر cd Desktop بافتراض وجود المجلد ضمن المسار الرئيسي كما يلي:

اكتب الأمر التالي في طرفية نظامك:

cd Desktop

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

cd..

هناك اختصار في الطرفية مفيد جدًا وهو استخدام مفتاح tab لإكمال الأسماء تلقائيًا التي تعرف أنها موجودة بدلًا من كتابة اسم المجلد بالكامل فمثلًا كتابة الأمر cd D ثم الضغط على مفتاح tab، سيكمل سطر الأوامر كتابة اسم المجلد Desktop نيابةً عنك، بشرط وجوده في المجلد الحالي.

إذا كان المجلد الذي تريد الانتقال إليه متداخلًا، فيجب أن تعرف المسار للوصول إليه، إذ يصبح ذلك أسهل عندما تصبح أكثر دراية بمعمارية نظام ملفاتك، ولكن إن لم تكن متأكدًا من المسار، فيمكنك اكتشافه باستخدام الأمر ls، ومن خلال النقر في نافذة المستكشف Explorer أو Finder لمعرفة مكان المجلد بناءً على مكان وجودك حاليًا.

إذا أردت الانتقال مثلًا إلى مجلد يسمى src يقع ضمن مجلد اسمه project موجود على سطح المكتب Desktop، فيمكنك كتابة هذه الأوامر الثلاثة للوصول إلى هناك من مجلدك الرئيسي كما يلي:

cd Desktop
cd project
cd src

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

cd Desktop/project/src

لاحظ أن تضمين شرطة مائلة في المسار يجعله مسارًا مطلقًا مثل ‎/Users/your-user-name/Desktop، إذ يؤدي حذف الشرطة المائلة في المقدمة كما فعلنا سابقًا إلى جعل المسار مسارًا نسبيًا متعلقًا بمجلد العمل الحالي، وهذا هو بالضبط ما تراه مع عناوين URL في متصفح الويب، إذ تعني الشرطة المائلة في البداية جذر موقع الويب، بينما يعني حذف الشرطة المائلة أن عنوان URL متعلق بصفحتي الحالية. يستخدم نظام ويندوز الشرطة المائلة للخلف بدلًا من الشرطة المائلة للأمام مثل الأمر التالي:

 cd Desktop\project\src

سرد محتويات مجلد

الأمر ls مبني مسبقًا في نظام التشغيل يونيكس وهو اختصار للكلمة الأجنبية List، ووظيفته سرد محتويات المجلد الذي تتواجد فيه حاليًا. لاحظ أن هذا الأمر لن ينجح إذا استخدمتَ موجّه أوامر ويندوز الافتراضي cmd، فالأمر المكافئ له هو dir.

شغّل الأمر التالي في الطرفية:

ls

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

خيارات الأوامر

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

جرب الأمر التالي على سبيل المثال، وشاهد النتيجة:

ls -l

يمنحك الخيار ‎-l في الأمر ls قائمة بملف أو مجلد واحد في كل سطر ومعلومات أخرى. يمكن التعرف على المجلدات من خلال البحث عن الحرف "d" على الجانب الأيسر من السطور، إذ يمكننا استخدام الأمر cd مع هذه المجلدات.

يوضّح الشكل الآتي طرفية نظام ماك الصرفة في الجزء العلوي، وطرفية مخصّصة مع بعض الرموز والألوان الإضافية في الجزء السفلي، وكلاهما يعرض نتائج تشغيل الأمر ls -l:

اقتباس

ملاحظة: يمكنك معرفة الخيارات المتوفرة لكل أمر من خلال إلقاء نظرة على صفحة الدليل الخاصة به باستخدام الأمر man، متبوعًا باسم الأمر الذي تريد البحث عنه مثل man ls. سيؤدي هذا الأمر إلى فتح صفحة الدليل في عارض الملفات النصية الافتراضي في الطرفية مثل البرنامج less، إذ يجب أن تكون بعد ذلك قادرًا على التمرير عبر الصفحة باستخدام مفاتيح الأسهم أو آلية أخرى مشابهة، إذ تسرد صفحة الدليل جميع الخيارات مع التفاصيل. يجب الخروج من صفحة الدليل بعد الانتهاء منها باستخدام أمر الخروج quit الخاص بعارض النصوص مثل "q" في less. يمكنك أيضًا تشغيل أمر به خيارات متعددة في الوقت نفسه من خلال وضعها جميعًا ضمن سلسلة واحدة بعد حرف الشرطة مثل ls -lah أو ls -ltrh. حاول إلقاء نظرة على صفحة دليل man الخاصة بالأمر ls لمعرفة ما تفعله هذه الخيارات الإضافية.

الإنشاء والنسخ والنقل والإزالة

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

• mkdir: يؤدي هذا الأمر إلى إنشاء مجلد جديد ضمن المجلد الحالي الذي تتواجد فيه، مع الاسم الذي تقدمه بعد الأمر، فمثلًا سينشئ الأمر mkdir my-awesome-website مجلدًا جديدًا اسمه my-awesome-website.
• rmdir: يزيل هذا الأمر المجلد المحدد إذا كان فارغًا فقط، فمثلًا سيزيل الأمر rmdir my-awesome-website المجلد الذي أنشأناه سابقًا. إذا أردتَ إزالة مجلد غير فارغ وإزالة كل ما يحتويه، فيمكنك استخدام الخيار ‎-r وهو اختصار recursive تكراري، ولكن يجب الانتباه عند استخدامه، إذ يجب أن تتأكد من عدم وجود أيّ شيء يمكن أن تحتاجه داخل المجلد، إذ سيختفي إلى الأبد.
• touch: ينشئ هذا الأمر ملفًا فارغًا جديدًا ضمن المجلد الحالي، فمثلًا ينشئ الأمر touch mdn-example.md ملفًا فارغًا جديدًا اسمه mdn-example.md.
• mv: ينقل هذا الأمر ملفًا من موقع الملف الأول المحدَّد إلى موقع الملف المحدد الثاني، وينقل الأمر mv mdn-example.md mdn-example.txt الملف mdn-example.md في المجلد الحالي إلى الملف mdn-example.txt في المجلد الحالي (تُكتَب المواقع كمسارات ملفات)، إذ يُعَد الملف منقولًا، ولكن هذا الأمر يعيد تسمية الملف فعليًا.
• cp: يشبه الأمر mv في الاستخدام، إذ ينشئ الأمر cp نسخة من الملف الموجود ضمن الموقع الأول المحدد في الموقع الثاني المحدَّد، إذ يُنشئ الأمر cp mdn-example.txt mdn-example.txt.bak نسخة من الملف mdn-example.txt بالاسم mdn-example.txt.bak، ويمكنك بالطبع تسمية هذه النسخة باسم آخر إذا أدرتَ ذلك.
• rm: يزيل هذا الأمر الملف المحدَّد، فمثلًا يحذف الأمر rm mdn-example.txt ملفًا اسمه mdn-example.txt. لاحظ أن هذا الحذف نهائي ولا يمكن التراجع عنه عبر سلة المحذوفات الموجودة غالبًا على واجهة مستخدم سطح المكتب.

تسمح لك العديد من أوامر الطرفية باستخدام العلامات النجمية بوصفها محارف بدل Wild Card مع أيّ تسلسل من المحارف، مما يسمح بتشغيل عملية على عدد كبير من الملفات في الوقت نفسه، وتتطابق جميعها مع النمط المحدد، إذ يحذف الأمر rm mdn-*‎ جميع الملفات التي تبدأ بسلسلة المحارف mdn-‎، بينما يحذف الأمر rm mdn-*.bak جميع الملفات التي تبدأ بسلسلة المحارف mdn-‎ وتنتهي بسلسلة المحارف ‎.bak.

هل تعد الطرفية خطيرة؟

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

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

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

يُعَد tldr.sh من الموارد الرائعة للحصول على نظرة عامة وسريعة على أوامر طرفية معينة، وهي خدمة توثيق مقادَة من المجتمع على غرار MDN، ولكنها خاصة بالأوامر الطرفية.

لنتعلّم الآن كيفية توصيل الأدوات مع بعضها في سطر الأوامر.

ربط الأوامر باستخدام الأشرطة العمودية

تعرّفنا سابقًا على الأمر ls الذي يعرض محتويات المجلد الحالي:

ls

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

هناك أداة أخرى متاحة من يونيكس تسمى wc تحسب عدد الكلمات أو الأسطر أو المحارف أو البايتات لكل ما يُوضَع فيها، إذ يمكن أن يكون ذلك ملفًا نصيًا، إذ ينتج عن تنفيذ الأمر التالي عدد الأسطر في الملف myfile.txt:

wc -l myfile.txt

كما يمكنها حساب عدد الأسطر لخرج أي أمر يُربَط معها من خلال رمز الشريط العمودي |، وسيحسبُ الأمر التالي عدد الأسطر الناتجة عن الأمر ls -أي ما سيطبعه إلى الطرفية إذا شُغِّل بمفرده- ويخرج عدد الأسطر في الطرفية:

ls | wc -l

بما أن الأمر ls يطبع كل ملف أو مجلد على سطر خاص به، فهذا يعطينا عدد الأدلة والملفات بفعالية.

تطبع أدوات سطر أوامر يونيكس النص إلى الطرفية، ويشار إليها بالطباعة إلى الخرج المعياري Printing To Standard Output أو STDOUT اختصارًا، إذ يمكن لعدد كبير من الأوامر قراءة المحتوى من مجرى الدخل المعروف باسم الدخل المعياري Standard Input أو STDIN اختصارًا.

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

مثال أكثر تعقيدا

سنحاول أولًا جلب محتويات صفحة "fetch" من MDN باستخدام الأمر curl الذي يمكن استخدامه لطلب المحتوى من عناوين URL مثل الرابط الآتي:

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

كما يلي:

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

لن تحصل على خرج بسبب إعادة توجيه الصفحة إلى ‎/Web/API/fetch، إذ يجب إعلام الأمر curl صراحةً باتباع عمليات إعادة التوجيه باستخدام الراية ‎-L.

لنلقِ نظرةً على الترويسات التي يعيدها developer.mozilla.org باستخدام الراية ‎-I الخاصة بالأمر curl، ونطبع جميع عمليات إعادة التوجيه التي يرسلها الموقع إلى الطرفية عن طريق ربط خرج الأمر curl مع الأمر grep باستخدام الرمز |، وسنطلبُ من الأمر grep إعادة جميع الأسطر التي تحتوي على الكلمة "location".

حاول تشغيل الأمر التالي (لاحظ أن هناك إعادة توجيه واحدة فقط قبل أن نصل إلى الصفحة الأخيرة):

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location

يجب أن يبدو الخرج كما يلي، إذ سينتج الأمر curl أولًا بعض عدّادات التنزيل أو ما شابه ذلك:

location: /en-US/docs/Web/API/fetch

كما يمكننا تحويل محتويات سطور الموقع location:‎، وإضافة الأصل الأساسي إلى بداية كل منها لنحصل على عناوين URL كاملة مطبوعة، لذلك سنضيف الأمر awk، وهي لغة برمجة تشبه جافاسكربت أو روبي Ruby أو بايثون Python، ولكنها أقدم منها.

شغّل الأمر التالي:

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'

ويجب أن يكون الخرج النهائي كما يلي:

https://developer.mozilla.org/en-US/docs/Web/API/fetch

خصّصنا الخرج من خلال دمج هذه الأوامر لإظهار عناوين URL الكاملة التي يعيد خادم Mozilla التوجيه من خلالها عندما نطلب العنوان ‎/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

إضافة مزايا

ألقينا نظرة على بعض الأوامر المبنية مسبقًا التي يأتي نظامك مزودًا بها، ولنلقِ نظرة الآن على كيفية تثبيت أداة CLI لجهة خارجية والاستفادة منها.

يتوفر حاليًا النظام المجتمعي الواسع للأدوات القابلة للتثبيت لتطوير واجهة الويب الأمامية ضمن npm، وهي خدمة استضافة حزم يملكها القطاع الخاص، وتعمل بصورة وثيقة مع Node.js، ولكن يمكنك أن تتوقع رؤية مزيد من مزودي الحزم مع مرور الوقت.

يؤدي تثبيت Node.js إلى تثبيت أداة سطر أوامر npm وأداة إضافية تعتمد على npm تسمى npx، وتوفر أداة npm بوابة لتثبيت أدوات سطر أوامر إضافية. يعمل Node.js وnpm بالطريقة نفسها في جميع الأنظمة: ماك macOS وويندوز Windows ولينكس Linux.

ثبّت أداة npm على نظامك الآن مع تنزيل وتشغيل مثبّت Node.js المناسب لنظام تشغيلك. إذا طُلب منك ذلك، فتأكد من تضمين npm كجزء من عملية التثبيت.

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

مكان تثبيت أدوات CLI

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

يُحتمَل أن يكون التأثير السلبي للتثبيت العام أكبر بكثير من الفوائد بالرغم من أن قائمة السلبيات أقصر، ولكننا سنثبّت الأدوات بطريقة عامة لإبقاء الأمور بسيطة. سنلقي نظرة أكثر على عمليات التثبيت المحلية وفوائدها في المقال التالي.

تثبيت Prettier

سنثبّت أداة Prettier بوصفها أداة مساعدة عامة لسطر الأوامر، وهي أداة تنسيق شيفرة لمطوري الواجهة الأمامية، وتركز على اللغات المستندة إلى لغة جافاسكربت بالإضافة إلى دعمها لغات HTML و CSS و SCSS و JSON وغير ذلك. يمكن أن تطبّق أداة Prettier ما يلي:

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

افتح الطرفية بعد تثبيت نود وشغّل الأمر التالي لتثبيت Prettier:

npm install --global prettier

تصبح بعد ذلك أداة Prettier متاحة في الطرفية وفي أيّ مكان في نظام ملفاتك.

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

prettier

يجب أن يبدو الخرج كما يلي:

Usage: prettier [options] [file/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

…

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

لنجرب استخدام الأداة Prettier لنتمكن من معرفة كيفية عملها. أنشئ أولًا مجلدًا جديدًا في مكان ما على نظام ملفاتك يسهل العثور عليه مثل مجلد اسمه prettier-test على سطح المكتب Desktop، ثم احفظ الشيفرة التالية في ملف جديد يسمى index.js ضمن مجلد الاختبار:

const myObj = {
a:1,b:{c:2}}
function printMe(obj){console.log(obj.b.c)}
printMe(myObj)

يمكننا أن نشغّل prettier في قاعدة الشيفرة للتحقق من حاجة شيفرتنا لتعديلٍ ما. شغّل الأمر cd للانتقال إلى مجلدك، وشغّل الأمر التالي:

prettier --check index.js

ويجب أن تحصل على الخرج التالي:

Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?

لذلك هناك بعض أنماط الشيفرات التي يمكن إصلاحها، سيؤدي إضافة الخيار ‎--write إلى الأمر prettier إلى إصلاح هذه المشاكل، مما يجعلنا نركز على كتابة شيفرة مفيدة فقط.

شغّل إصدار الأمر التالي:

prettier --write index.js

وستحصل على الخرج التالي:

Checking formatting...
index.js
Code style issues fixed in the above file(s).

ولكن إذا نظرت إلى ملف جافاسكربت الخاص بك، فستجد أنه منسَّق مثل الشيفرة التالية:

const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);

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

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

• قبل تأكيد شيفرتك في مستودع git باستخدام Husky.
• عندما تضغط على "حفظ" في محرر الشيفرة، سواء أكان محرر VS Code أو Atom أو Sublime Text.
• بوصفها جزءًا من فحوصات التكامل المستمرة باستخدام أدوات مثل Github Actions.

تفضيلنا الشخصي هو الخيار الثاني -أثناء استخدام محرر VS Code، وتعمل Prettier على تشغيل وتنظيف أي تنسيق تحتاجه في كل عملية حفظ.

أدوات أخرى

إليك قائمة مختصرة ممتعة من الأدوات لتجربتها:

• bat: النسخة الأفضل من الأداة cat (تُستخدم cat لطباعة محتويات الملفات).
• prettyping: نفّذ الأمر ping على سطر الأوامر. تُعَد أداة ping مفيدة للتحقق مما إذا كان الخادم يستجيب.
• htop: عارض للعمليات، مفيد عندما يكون هناك شيء ما يجعل مروحة وحدة المعالجة المركزية الخاصة بك تتصرف مثل محرك نفاث وتريد تحديد البرنامج المخالف.
• tldr: متاح بوصفه أداة لسطر الأوامر.

لاحظ أن بعض الاقتراحات السابقة يمكن أن تحتاج إلى التثبيت باستخدام npm، كما فعلنا مع Prettier.

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

ترجمة -وبتصرُّف- للمقال Command line crash course.

اقرأ أيضًا

• المقال التالي: أدوات مطوري الويب المدمجة في المتصفحات
• المقال السابق: فهم أدوات تطوير الويب من طرف العميل
• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة
• الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث

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

سنوضح في هذه السلسلة من المقالات المواضيع التالية لفهم أدوات تطوير الويب من طرف العميل:

1. نظرة عامة على أدوات تطوير الويب من طرف العميل: نقدّم في هذا المقال نظرة عامة على أدوات الويب الحديثة، وأنواع الأدوات المتاحة وأين ستصادفها في دورة حياة تطوير تطبيقات الويب، وكيفية العثور على المساعدة باستخدام هذه الأدوات.
2. دورة مكثفة لفهم سطر الأوامر: سيُطلب منك بلا شك تشغيل بعض الأوامر في الطرفية Terminal أو في سطر الأوامر خلال عملية التطوير، حيث يقدم هذا المقال مقدمة إلى الطرفية والأوامر الأساسية التي ستحتاج إلى إدخالها، وكيفية ربط الأوامر مع بعضها بعضًا، وكيفية إضافة أدوات واجهة سطر الأوامر Command Line Interface -أو CLI اختصارًا.
3. أساسيات إدارة الحزم: سنلقي نظرة على مدراء الحزم بشيء من التفصيل لفهم كيفية استخدامها في مشاريعك لتثبيت اعتماديات Dependencies أدوات المشروع وتحديثها وغير ذلك.
4. سلسلة أدوات كاملة: سنعمل في المقالين الأخيرين من السلسلة على ترسيخ معرفتك بالأدوات من خلال إرشادك خلال عملية بناء نموذج لسلسلة أدوات عن طريق إعداد بيئة تطوير ووضع أدوات التحويل في مكانها لنشر تطبيقك فعليًا على Netlify. كما سنقدم دراسة حالة مع إعداد بيئة التطوير الخاصة بنا وإعداد أدوات تحويل شيفرتنا.
5. نشر التطبيق: سنأخذ في المقال الأخير من هذه السلسلة مثالًا عن سلسلة الأدوات التي أنشأناها في المقال السابق ونضيفها لنتمكن من نشر التطبيق، إذ سنرفع الشيفرة البرمجية للمشروع على موقع مشاركة الشيفرات جيت هب GitHub، وننشرها باستخدام نيتليفاي Netlify، وسنوضّح كيفية إضافة اختبار بسيط لهذه العملية.

لنبدأ بمقالنا الأول من هذه السلسلة من خلال إلقاء نظرة سريعة على أدوات تطوير الويب من طرف العميل.

• المتطلبات الأساسية: الإلمام بمفاهيم لغات HTML و CSS وجافاسكربت الأساسية.
• الهدف: فهم أنواع الأدوات من طرف العميل وكيفية العثور عليها والحصول على المساعدة بشأنها.

استخدام الأدوات الحديثة

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

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

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

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

نظام أدوات المطورين الحديث

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

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

يمكنك تصنيف الأدوات من طرف العميل ضمن الفئات الثلاث التالية:

• شبكة الأمان Safety Net: أدوات مفيدة أثناء تطوير شيفرتك.
• التحويل Transformation: الأدوات التي تحول الشيفرة بطريقة ما مثل تحويل لغة وسيطة إلى لغة جافاسكربت التي يمكن أن يفهمها المتصفح.
• أدوات ما بعد التطوير Post-development: الأدوات المفيدة بعد كتابة شيفرتك مثل أدوات الاختبار والنشر.

لنلقِ نظرة على كل واحدة من هذه الفئات بمزيد من التفصيل.

شبكة الأمان

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

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

سنوضّح فيما يلي بعض أنواع أدوات شبكة الأمان الشائعة التي يستخدمها المطورون.

منقحات الصياغة Linters

منقحات الصياغة هي أدوات تتحقق من شيفرتك وتخبرك بوجود أخطاء وبأنواعها وسطور الشيفرة التي توجد فيها. يمكن ضبط منقحات الصياغة للإبلاغ عن الأخطاء، وللإبلاغ عن أيّ انتهاكات لدليل النمط المحدَّد الذي يستخدمه فريقك مثل الشيفرة التي تستخدم عددًا خاطئًا من المسافات البادئة، أو استخدام صياغة قالب Template Literals بدلًا من صياغة سلسلة نصية عادية String Literals.

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

كما يمكنك استخدام Webhint وهو منقح أخطاء مفتوح المصدر يمكن ضبطه للويب، ويعرض أفضل الممارسات لاستخدامها بما في ذلك أساليب الوصول والأداء والتوافق مع المتصفحات باستخدام بيانات توافق متصفح MDN والأمان واختبار تطبيقات الويب ذات الصفحة الواحدة PWA وغير ذلك. كما يتوفر كأداة سطر أوامر Node.js وكامتداد VS Code.

التحكم بالشيفرة البرمجية

يُعرَف أيضًا باسم أنظمة التحكم بالإصدارات Version Control Systems أو VCS اختصارًا، ويُعَد التحكم بالشيفرة البرمجية ضروريًا لدعم العمل الفردي أو ضمن فريق. يتضمن نظام VCS إصدارًا محليًا من الشيفرة التي تجري تغييرات عليها، ثم ترفع التغييرات إلى إصدار رئيسي من الشيفرة داخل مستودع بعيد مُخزَّن على خادم في مكان ما. هناك عادةً طريقة للتحكم في التعديلات التي تُطبَّق على النسخة الرئيسية من الشيفرة وتنسيقها ومتى تطبَّق، وبالتالي لا يكتب فريق المطورين فوق عمل بعضهم بعضًا.

يعد نظام جيت هاب Git من أشهر نظم التحكم بالشيفرة البرمجية الذي يستخدمه معظم المطورين حاليًا، إذ يمكن الوصول إليه عبر سطر الأوامر أو عبر واجهات سهلة الاستخدام. كما يمكنك رفع نسخة من المشروع إلى الخادم الخاص بك باستخدام شيفرتك في مستودع جيت، أو يمكنك استخدام موقع ويب مستضاف للتحكم بالشيفرة المصدرية مثل جيت هب GitHub أو جيت لاب GitLab أو بيت باكيت BitBucket، ولكن سنستخدم GitHub في مثالنا.

مُنسِّقات الشيفرة Code Formatters

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

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

الحزم Bundlers أو Packagers

هي الأدوات التي تجعل شيفرتك جاهزةً لعملية الإنتاج عن طريق تقنية هز الشجرة Tree-Shaking مثلًا للتأكّد من إدراج أجزاء مكتبات الشيفرة التي تستخدمها فعليًا فقط في شيفرة الإنتاج النهائي، أو التصغير Minifying لإزالة كل مسافة فارغة في شيفرة الإنتاج، مما يصغّرها قدر الإمكان قبل رفعها إلى الخادم.

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

يذكر أن أداة ويب باك Webpack هي أشهر أداة حزم تطبّق مهامًا مماثلة.

التحويل Transformation

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

يُنظَر إلى تطوير الويب على أنه مؤلَّف من ثلاث لغات هي HTML وCSS وجافاسكربت، وهناك أدوات تحويل لجميع هذه اللغات. يقدّم التحويل فائدتين رئيسيتين هما:

1. القدرة على كتابة شيفرة برمجية باستخدام أحدث ميزات اللغة وتحويلها إلى شيفرة تعمل على جميع الأجهزة، فيمكن أن ترغب مثلًا في كتابة شيفرة بلغة جافاسكربت باستخدام ميزات لغة جديدة متطورة، ولكن لا يزال لديك شيفرة الإنتاج النهائي التي تعمل على المتصفحات القديمة التي لا تدعم هذه الميزات. تشمل الأمثلة التالية:
   • Babel: مصرّف جافاسكربت JavaScript الذي يسمح للمطورين بكتابة شيفرة باستخدام أحدث إصدارات جافاسكربت، والتي يأخذها Babel ويحوّلها إلى إصدار جافاسكربت قديم يمكن لمزيد من المتصفحات فهمه. كما يمكن للمطورين كتابة ونشر إضافات Babel.
   • PostCSS: تطبّق هذه الأداة الشيء نفسه الذي يطبّقه Babel، ولكن مع ميزات CSS المتطورة. إذا لم تكن هناك طريقة مكافئة لتطبيق شيء ما باستخدام ميزات CSS القديمة، فسيثبّت PostCSS تعويض نقص دعم المتصفحات Polyfill بلغة جافاسكربت لمحاكاة تأثير CSS الذي تريده.
2. خيار كتابة الشيفرة بلغة مختلفة تمامًا وتحويلها إلى لغة متوافقة مع الويب مثل:
   • Sass / SCSS: يتيح لك هذا الامتداد من لغة CSS استخدام المتغيرات والقواعد المتداخلة والمزج والدوال والعديد من الميزات الأخرى، إذ يُعَد بعضها متاحًا في لغة CSS الأصلية مثل المتغيرات، وبعضها ليس كذلك.
   • TypeScript: هي مجموعة شاملة من لغة جافاسكربت التي تقدم مجموعة من الميزات الإضافية. يحوّل مصرّف TypeScript شيفرة TypeScript إلى جافاسكربت عند البناء بهدف الإنتاج.
   • توفّر أطر العمل مثل React وEmber وVue الكثير من الوظائف مجانًا وتسمح لك باستخدامها عبر صيغة مخصَّصة مبنية على لغة جافاسكربت الصرفة Vanilla JavaScript. تعمل شيفرة جافاسكربت الخاصة بإطار العمل في الخلفية لتفسير هذه البنية المخصَّصة وتقديمها بوصفها تطبيق ويب نهائي.

أدوات ما بعد التطوير Post Development

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

تُعَد هذه المرحلة بأنها المرحلة التي تحتاج أقل قدر من التفاعل النشط بحيث تُشغَّل تلقائيًا بمجرد تهيئتها، وتخبرك بحدوث خطأ ما.

أدوات الاختبار Testing Tools

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

• تشمل أطر عمل اختبارات الكتابة Jest وMocha وJasmine.
• تتضمن أنظمة التشغيل والاختبارات الآلية Travis CI وJenkins وCircle CI وغيرها.

أدوات النشر Deployment Tools

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

تعد Netlify واحدة من أكثر أدوات النشر شيوعًا في الوقت الحالي، ولكن هناك أدوات أخرى مثل Vercel وGithub Pages.

أدوات ما بعد التطوير الأخرى

هناك عدد من أنواع الأدوات الأخرى المتاحة للاستخدام في مرحلة ما بعد التطوير، بما في ذلك Code Climate لجمع مقاييس جودة الشيفرة، وامتداد متصفح Webhint لإجراء تحليل وقت التشغيل للتوافق مع المتصفحات وعمليات التحقق الأخرى، وGithub bots لتوفير المزيد من ميزات GitHub القوية، وUpdown لتوفير مراقبة وقت تشغيل التطبيق وغير ذلك الكثير.

أنواع الأدوات

تُطبَّق أنواع الأدوات المختلفة في دورة حياة التطوير وفق ترتيب معين، ولكن كن مطمئنًا أنك لست مضطرًا إلى أن يكون لديك كل هذه الأدوات لإصدار موقع ويب، فلن لا تحتاج لأيٍّ منها. لكن سيؤدي تضمين بعض هذه الأدوات في عملياتك إلى تحسين تجربة التطوير، ويُحتمَل أن يؤدي إلى تحسين جودة شيفرتك الإجمالية.

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

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

كيفية اختيار أداة معينة والحصول عليها

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

ستحتاج على الأرجح إلى مجموعة الأشياء التالية:

• نجح المدرسون أو الموجهون أو الزملاء الطلاب ذوو الخبرة أو الزملاء الذين لديهم بعض الخبرة في حل هذه المشكلات من قبل، ويمكنهم تقديم المشورة.
• مكان محدد مفيد للبحث، إذ تكون عمليات البحث العامة على الويب عن أدوات مطور الواجهة الأمامية عديمة الفائدة إلا إن عرفتَ اسم الأداة التي تبحث عنها.
  • إذا استخدمتَ مدير الحزم NPM لإدارة اعتمادياتك على سبيل المثال، فيُفضَّل الانتقال إلى صفحة npm الرئيسية والبحث عن نوع الأداة التي تبحث عنها. حاول مثلًا البحث عن "التاريخ date" إن أردتَ أداة تنسيق التاريخ، أو "المُنسِّق formatter" إذا كنت تبحث عن مُنسق شيفرة عام. انتبه إلى درجات الشعبية والجودة والصيانة، وآخر تحديث للحزمة. انقر على صفحات الأداة لمعرفة عدد تنزيلات الحزمة الشهرية، واحتوائها على توثيق جيد يمكنك استخدامه للتأكد من أنها تطبّق ما تريده، وبالتالي تُعَد مكتبة date-fns أداة تنسيق تاريخ جيدة لاستخدامها.
  • إذا أردت البحث عن إضافة Plugin لدمج وظائف الأدوات في محرّر الشيفرة، فألقِ نظرة على صفحة الإضافات / الامتدادات لمحرر الشيفرة، وراجع حزم Atom وامتدادات VSCode على سبيل المثال. ألقِ نظرة على الامتدادات المميزة في الصفحة الأولى، وحاول مرة أخرى البحث عن نوع الامتداد الذي تريده (أو اسم الأداة مثل البحث عن "eslint" في صفحة امتدادات VSCode). إذا حصلتَ على نتائج، فألقِ نظرة على معلومات عدد النجوم أو التنزيلات التي يحتويها الامتداد، إذ يُعَد ذلك مؤشرًا على جودته.
• المنتديات المتعلقة بالتنمية لطرح أسئلة حول الأدوات التي يجب استخدامها مثل قسم الأسئلة والأجوبة البرمجية في أكاديمية حسوب.

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

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

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

الخلاصة

قدّمنا من خلال هذا المقال مقدمة بسيطة عن أدوات الويب من طرف العميل، وسنقدّم في المقال القادم دورة مكثفة عن سطر الأوامر، إذ تُستدعَى كثير من الأدوات منه، وسنلقي نظرة على ما يمكن أن يفعله سطر الأوامر ثم نحاول تثبيت الأداة الأولى ونستخدمها.

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

ترجمة -وبتصرُّف- للمقالين Understanding client-side web development tools وClient-side tooling overview.

اقرأ أيضًا

• مدخل إلى أدوات التطوير في متصفح الويب DevTools
• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة
• الفرق بين مصمم الويب ومطور الويب وكيفية معرفة الأنسب بينهما
• الأدوات المستخدمة في بناء مواقع ويب

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

مقدمة عن المحررات البرمجية لتطوير الويب

تتكون مواقع الويب في معظمها من ملفات نصية، ولكي تختبر تجربة مريحة وممتعة في رحلة تطوير موقع ويب، لا بدّ من اختيار محرر النصوص بحكمة!

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

إليك بعض التساؤلات الأساسية التي ينبغي أخذها بعين الاعتبار:

• أي نظام تشغيل سأعمل عليه؟
• ما هي التقنيات التي أريد أن أتعامل معها؟
• ما الميزات الأساسية التي أتوقع وجودها في محرر النصوص؟
• هل أريد إضافة ميزات إضافية إلى محرر النصوص؟
• هل أحتاج إلى دعم أو مساعدة أثناء استخدام محرر النصوص؟
• هل يهمني مظهر محرر النصوص وشعوري عند العمل عليه؟

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

إليك قائمة ببعض المحررات الأكثر شعبية:

سنلقي نظرة في الفقرات التالية على بعض النقاط التي يجب أن نأخذها بعين الاعتبار عند اختيار محرر نصي.

معايير الاختبار

ولكن ما الذي عليك التفكير به عند اختيار محرر نصي؟ هيا بنا لنخوض أكثر في التفاصيل.

نظام التشغيل الذي تعمل عليه

بالرغم من أن الموضوع ما هو إلا تفضيلات شخصية، ولكن تذكر أن بعض المحررات متاحة فقط لأنظمة تشغيل محددة. وإن أردت التنقل من نظام تشغيل إلى آخر، سيحد ذلك من خياراتك. تسهل عليك محررات النصوص التي تعمل عبر المنصات المختلفة Cross-Platform في هذه الحالة أمر الانتقال من نظام إلى آخر.

تأكد في البداية من نظام التشغيل الذي تستخدمه ثم اعثر على محرر نصوص يدعمه. تحدد محررات النصوص على مواقعها الإلكترونية الأنظمة التي تدعمها، يمكن ألّا تدعم بعضها سوى إصداراتٍ معينة من أنظمة التشغيل (ويندوز 7 وما بعد وليس فيستا مثلًا). إن كنت تعمل على نظام التشغيل أوبونتو فمن الأفضل البحث ضمن مركز برامج أوبونتو Ubuntu Software Center. إنّ عالم أنظمة التشغيل لينوكس/ يونكس واسع ومتنوع ويمكن ألّا تتوافق حزم البرمجيات بين توزيعة وأخرى. وبالتالي إن وقع اختيارك على محرر نصوص معين لا تدعمه توزيعة لينكس التي تعمل عليها، عليك ترجمة الشيفرة المصدرية للبرنامج بنفسك لتناسب توزيعتك (وهذا عمل للمتمرسين وليس لضعاف القلوب!).

التقنيات التي أريد التعامل معها

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

• تلوين العبارات البرمجية Syntax Highlighting: سيغدو الملف أكثر وضوحًا عند تلوين شيفرات الأوامر والكلمات المفتاحية بألوان مختلفة تناسب التقانة التي تستخدمها.
• الإكمال التلقائي للشيفرة Code Completion: توفر عملية الإكمال التلقائي للبنى البرمجية التي تكتب شيفرتها الوقت كأن يغلق المحرر واسمات HTML المفتوحة، أو أن يقترح عليك خاصية معينة عند كتابة تنسيق CSS.
• استخدام مقاطع شيفرة (أو قصاصات برمجية) Code Snippets: تستخدم العديد من التقنيات هيكلية متشابهة عند كتابة مستنداتها كما تلاحظ عند كتابة مستندات HTML. لذلك عند استخدامك لمقاطع شيفرة جاهزة سيوفر عليك عناء إعادة كتابتها مرة تلو الأخرى.
• تدعم معظم محررات النصوص حاليًا تلوين العبارات البرمجية، ولا تدعم بالضرورة الميزتين الباقيتين. لذلك تأكد قبل كل شيء من دعم المتصفح الذي ستعتمده ميزة تلوين العبارات البرمجية لكل من HTML وCSS وجافا سكربت.

الميزات الأساسية التي تتوقع أن تجدها في محرر النصوص

يعتمد ذلك على احتياجاتك ومخططاتك. إليك بعض الميزات الوظيفية التي تساعدك غالبًا في عملك:

• البحث والاستبدال في مستند أو أكثر اعتمادًا على التعابير النمطية Regular Expressions أو غيرها من العبارات التي تحتاجها.
• الانتقال السريع إلى سطر محدد.
• عرض قسمين من ملف طويل معًا.
• عرض شيفرة HTML التي تكتبها كما ستظهر على المتصفح.
• اختيار عدة أسطر من أماكن مختلفة معًا.
• إظهار مجلدات مشروعك وما تحويه من ملفات.
• التنسيق التلقائي لشيفراتك باستخدام محسنات مظهر الشيفرة Code Beautifier.
• التدقيق الإملائي.
• الإزاحة التلقائية للشيفرة وفقًا لإعدادات الإزاحة.

إمكانية إضافة ميزات إضافية إلى المحرر

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

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

إن رغبت باستخدام الكثير من الميزات الوظيفية التي أبطأت محررك نظرًا لزيادة الإضافات التي ثبّتها، جرّب استخدام بيئة تطوير متكاملة Integrated Development Environment واختصارًا IDE. تؤمن لك هذه البيئات الكثير من الأدوات ضمن واجهة واحدة، وعلى الرغم من صعوبتها على المبتدئين تبقى خيارًا قائمًا إن شعرت أن محررك محدود القدرة. إليك بعض بيئات العمل المتكاملة:

• Aptana Studio.
• Eclipse.
• Komodo IDE.
• NetBeans IDE.
• Visual Studio.
• WebStorm.

الحاجة إلى الدعم أو المساعدة أثناء استخدام المحرر

من الجيد أن تعلم إن كنت ستتلقى مساعدة أو دعمًا عندما تستخدم برنامجًا معينًا. تحقق من أمرين اثنين عندما يتعلق الأمر بمحرر النصوص:

1. المحتوى الموجه للمستخدم (الأسئلة الأكثر شيوعًا ودليل المستخدم والمساعدة المباشرة عبر الإنترنت).
2. النقاشات مع المطورين ومستخدمين آخرين (المنتديات والبريد الإلكتروني ومحادثات عبر الإنترنت IRC).

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

أهمية مظهر المحرر وتجربة استخدامه

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

تثبيت المحرر وإعداده للعمل

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

• ويندوز: ستجد ملف التثبيت بإحدى اللاحقتين exe. أو msi. ويأتي البرنامج مضغوط ضمن أرشيف مثل zip. أو 7z أو rar.، وعليك في هذه الحالة تثبيت برنامج إضافي لاستخراج البرنامج من الأرشيف المضغوط. يدعم ويندوز zip. افتراضيًا، فلا حاجة لتثبيت أية برامج إضافية.
• ماك: يمكنك تنزيل ملف التثبيت ذو اللاحقة dmg. من موقع الويب الخاص بالمحرر، كما ستجد الكثير من المحررات النصية ضمن متجر آبل مما يسهِّل عملية التثبيت.
• لينوكس: بإمكانك الانطلاق من الواجهة الرسومية لبرنامج مدير الحزم Packet Manager في التوزيعات الأكثر شعبية من لينوكس مثل Ubuntu Software Center أو Mintinstall أو Gnome Software وغيرها من البرامج. ستجد أيضًا ملفًا لاحقته deb. أو rpm. للبرنامج في مرحلة ما قبل التجميع أو الحزم Prepackaging، لكنك ستستخدم في غالب الأحيان خادم المستودعات Repository Server الخاص بالتوزيعة التي تعمل عليها، أما الحالة الأسوء فهي ترجمة الملفات المصدرية للمحرر ليعمل على توزيعتك. خذ وقتك في قراءة تعليمات التثبيت التي يوفرها موقع ويب الخاص بالمحرر.
• يستمر نظام التشغيل في فتح الملفات النصية باستخدام محرر النصوص الافتراضي حتى تغير ارتباط الملف File Association. ويعني ذلك تحديد المحرر المفضل الذي يستخدمه نظام التشغيل في فتح الملف النصوص عند النقر المضاعف عليه.

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

ترجمة -وبتصرف- للمقال What text editors are available.

اقرأ أيضًا

• ما هو عنوان URL في الويب؟
• ما التكلفة المادية الكاملة لبناء موقع ويب؟
• مفهوم الروابط التشعبية في مواقع الويب

يمكنك تنزيل معظم البرامج التي تحتاجها لتطوير صفحات ومواقع الويب مجانًا وسنزوّدك بعدة روابط خلال هذا المقال.

عمومًا ستحتاج إلى أدوات التطوير لكي:

• تنشئ أو تحرر صفحة ويب.
• رفع الملفات إلى خادم ويب.
• استعراض موقع ويب.

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

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

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

إنشاء وتحرير صفحات الويب

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

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

إليك لقطة شاشة لأحد محررات النصوص المتقدمة:

إليك أيضًا لقطة شاشة لمحرر نصوص على الويب:

رفع الملفات إلى ويب

عليك أن ترفع صفحات موقعك إلى خادم ويب عندما يكتمل بناؤه ويصبح جاهزًا لاتاحته للناس. يمكنك شراء مساحة تخزين من أي مزود خدمة تختاره والذي سيرسل لك بدوره -عند إكمال عملية الشراء- بريدًا إلكترونيًا يضم معلومات الوصول إلى مساحة التخزين الخاصة بك على شكل عنوان SFTP URL (عنوان يستخدم برتوكول FTP الآمن)، بالإضافة إلى اسم المستخدم وكلمة المرور وغيرها من المعلومات اللازمة للاتصال بخادم الويب. تذكر أنّ بروتوكول SFTP أصبح قديم الطراز وبدأت أنظمة رفع ملفات جديدة باكتساب شعبية مثل RSync وGit/GitHub.

اقتباس

ملاحظة: يعد البروتوكول FTP غير آمن لذلك تأكد من دعم مزود الخدمة الذي يستضيف موقعك لبروتوكولات الاتصال الآمن مثل FSTP وRSync مع SSH.

تُعد خطوة رفع الملفات إلى خادم الويب خطوة مهمة جدًا من خطوات بناء الموقع، إليك قائمة مختصرة لبعض البرامج المجانية التي تعمل من ناحية العميل لرفع الملفات:

تصفح مواقع ويب

لا بد من وجود متصفح ويب لاستعراض المواقع وستجد الكثير من الخيارات التي تلبي احتياجاتك. لكن عندما تطور موقع ويب لا بدّ من اختباره على أحد المتصفحات الرئيسية التالية لتتأكد أن موقعك سيعمل عند معظم المستخدمين:

• موزيلا فايرفوكس.
• جوجل كروم.
• مايكروسوفت انترنت أكسبلورر أو مايكروسوفت إيدج.
• آبل سفاري.

فإن كنت تستهدف مجموعة محددة (منصة تقنية أو بلد محدد)، لا بدّ أن تختبر موقعك على متصفحات أخرى مثل أوبرا وKonqueror أو UC Browser.

تتعقد عملية اختبار المواقع لأن بعض المتصفحات لن تعمل إلا على أنظمة تشغيل محددة. فلن يعمل آبل سفاري سوى على أنظمة تشغيل آبل أي أو إس وماك أو إس ولن يعمل إنترنت إكسبلورر سوى على ويندوز. في حالات كهذه من الأفضل استخدام خدمات مثل Browsershots أو Browserstack. إذ سيعرضُ لك موقع Browsershots لقطات شاشة لموقعك كما سيبدو على عدة متصفحات، بينما يمنحك Browserstack إمكانية الوصول الكاملة عن بعد إلى محاكيات افتراضية Virtual Machines تساعدك على تجربة موقعك على أكثر البيئات شيوعًا. يمكنك أيضًا إعداد محاكي افتراضي خاص بك، لكن الأمر سيتطلب الأمر خبرات إضافية (إن قررت المضي بهذا الخيار، تزوّدك مايكروسوفت ببعض الأدوات التي تساعدك بما فيها محاكي افتراضي جاهز للاستخدام).

اختبر موقعك بشتى الوسائل على أجهزة حقيقية وخاصة أجهزة الهواتف المحمولة الحقيقية، فالمحاكيات هي تكنولوجيا جديدة لا زالت قيد التطوير لذلك فهي أقل وثوقية من محاكيات أجهزة سطح المكتب. وطالما أن أجهزة الهاتف المحمولة غالية الثمن، ننصحك أن تلق نظرة على Open Device Lab initiative. يمكنك أيضًا مشاركة الأجهزة إن أردت اختبار موقعك على منصات عدة دون أن تنفق الكثير من المال.

ترجمة -وبتصرف- للمقال What software do I need to build a website.

اقرأ أيضًا

• ما هو عنوان URL في الويب؟
• ما التكلفة المادية الكاملة لبناء موقع ويب؟
• ما هي محررات النصوص المستعملة في تطوير مواقع الويب؟
• ما هي أدوات مطوري الويب المدمجة في المتصفحات؟

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

لقد نال تطوير المواقع باستخدام React سمعة سيئة نظرًا لحاجته إلى أدوات كثيرة كان من الصعب تهيئتها بالشكل المناسب. أما في أيامنا هذه فقد أصبح استخدام React مريحًا بفضل البرنامج create-react-app. ويمكن القول أنه لم توجد قبله أية آليات مهمة لتطوير المواقع باستخدام JavaScript من جانب المتصفح.

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

تجميع وحزم الملفات

لقد طورنا تطبيقاتنا بتقسيمها إلى وحدات منفصلة، ثم أدرجنا هذه الوحدات في الأماكن التي تتطلبها. لكن ليس لدى المتصفح أية فكرة عن كيفية التعامل مع الشيفرة المجزأة ضمن وحدات، حتى ضمن وحدات ES6 التي عُرّفت في المعيار ECSMAScript.

ولهذا السبب، يجب إعادة تجميع الوحدات لكي تتعامل معها المتصفحات، أي يجب تحويل جميع ملفات الشيفرة إلى ملف واحد يحتوي على شيفرة التطبيق بالكامل. فعندما نشرنا نسخة الإنتاج من تطبيق React للواجهة الأمامية في القسم 3، نفذنا عملية تجميع للتطبيق باستخدام الأمر npm run build. حيث جمّع سكربت npm الشيفرة المصدرية باستخدام المجمّع webpack تحت الستار، ونتج عنها مجموعة من الملفات ضمن المجلد "build".

├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.8082e70dbf004a0fe961fc1f317b2683.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.f9a47af2.chunk.css
    │   └── main.f9a47af2.chunk.css.map
    └── js
        ├── 1.578f4ea1.chunk.js
        ├── 1.578f4ea1.chunk.js.map
        ├── main.8209a8f2.chunk.js
        ├── main.8209a8f2.chunk.js.map
        ├── runtime~main.229c360f.js
        └── runtime~main.229c360f.js.map

حيث يمثل الملف "index.html" الموجود في جذر المجلد "build" الملف الرئيسي للتطبيق، فهو الذي يحمّل ملفات JavaScript المجمّعة داخل المعرّف <script> (يوجد في الواقع ملفي JavaScript مجمّعين).

<!doctype html><html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>React App</title>
  <link href="/static/css/main.f9a47af2.chunk.css" rel="stylesheet"></head>
<body>
  <div id="root"></div>
  <script src="/static/js/1.578f4ea1.chunk.js"></script>
  <script src="/static/js/main.8209a8f2.chunk.js"></script>
</body>
</html>

فيمكن أن نرى من خلال المثال الذي أنشأناه باستخدام create-react-app، أنّ سكربت بناء التطبيق يجمّع أيضًا ملفات تنسيق CSS في ملف واحد باسم "static/css/main.f9a47af2.chunk.css/".

تجري عملية التجميع في واقع الأمر لتعريف نقطة دخول إلى التطبيق، وهي عادة الملف "index.js". فعندما يجمّع webpack الشيفرة فإنه يضم كل الشيفرات التي ستدرجها نقطة الدخول والشيفرة التي ستدرج تلك المُدرجات، وهكذا.

وطالما أنّ بعض الملفات التي تُدرج ستكون على شكل حزم مثل React وRedux وAxios، فسيضم ملف JavaScript المُجمّع محتوى كل مكتبة من تلك المكتبات.

اقتباس

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

سننشئ تاليًا يدويًا ومن الصفر ملف تهيئة webpack يناسب تطبيق React. لننشئ أولًا مجلدًا جديدًا لمشروعنا يحوي على المجلدين الفرعيين "build" و"src" وداخلهما الملفات التالية:

├── build
├── package.json
├── src
│   └── index.js
└── webpack.config.js

ستكون محتويات الملف "package.json" كالتالي:

{
  "name": "webpack-part7",
  "version": "0.0.1",
  "description": "practising webpack",
  "scripts": {},
  "license": "MIT"
}

لنثبت webpack كالتالي:

npm install --save-dev webpack webpack-cli

نحدد عمل webpack من خلال الملف "webpack.config.js" والذي نعطيه قيمًا أولية كالتالي:

const path = require('path')

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js'
  }
}
module.exports = config

سنعرف بعدها سكربت npm يُدعى "build" سينفذ عملية التجميع مع webpack:

// ...
"scripts": {
  "build": "webpack --mode=development"
},
// ...

سنضع بعض الشيفرة في الملف "src/index.js"

const hello = name => {
  console.log(`hello ${name}`)
}

عندما ننفذ الأمر npm run build، سيجمّع webpack شيفرة تطبيقنا وسينتج عنه ملف جديد "main.js" ستجده ضمن المجلد "build":

يحتوي الملف على العديد من النقاط المهمة. كما يمكننا أن نرى الشيفرة التي كتبناها سابقًا في آخر الملف:

سنضيف الآن الملف "App.js" إلى المجلد src، وسيحتوي الشيفرة التالية:

const App = () => {
  return null
}

export default App

لندرج الوحدة App ضمن الملف "index.js":

import App from './App';

const hello = name => {
  console.log(`hello ${name}`)
}

App()

عندما نجمع التطبيق من جديد بالأمر npm run build، سنجد أن webpack قد ميّز ملفين:

ستجد شيفرة التطبيق في نهاية ملف التجميع وبطريقة مبهمة نوعًا ما:

/***/ "./src/App.js":
/*!********************!*\
  !*** ./src/App.js ***!
  \********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nconst App = () => {\n  return null\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (App);\n\n//# sourceURL=webpack:///./src/App.js?");

/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./App */ \"./src/App.js\");\n\n\nconst hello = name => {\n  console.log(`hello ${name}`)\n};\n\nObject(_App__WEBPACK_IMPORTED_MODULE_0__[\"default\"])()\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

ملف التهيئة

لنلق نظرة على الملف "webpack.config.js":

const path = require('path')

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js'
  }
}

module.exports = config

كُتب ملف التهيئة باستخدام JavaScript، وصُدّر كائن التهيئة باستخدام عبارة وحدة Node. ستشرح عبارات التهيئة البسيطة التي كتبناها نفسها بنفسها. حيث تحدد الخاصية entry لكائن التهيئة الملف الذي سيستخدم كنقطة دخول إلى التطبيق المُجمّع. بينما تحدد الخاصية output المكان الذي ستُخزّن فيه الشيفرة المجمعة.يجب تعريف المسار الهدف على شكل مسار مطلق، ويسهل عمل ذلك باستخدام التابع path.resolve. كما سنستخدم المتغير العام ‎__dirname في Node والذي سيخزّن مسار الوصول إلى المجلد الحالي.

تجميع تطبيق React

لنحوّل تطبيقنا إلى تطبيق React بسيط.

سنثبّت أولًا المكتبات الضرورية:

npm install react react-dom

ثم سنحول تطبيقنا إلى تطبيق React بإضافة التعريفات التالية إلى الملف "index.js":

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

كما سنجري التغييرات التالية على الملف "App.js":

import React from 'react'

const App = () => (
  <div>hello webpack</div>
)

export default App

سنحتاج أيضًا إلى الملف "build/index.html" والذي سيشكل الصفحة الرئيسية للتطبيق والتي ستحمل بدورها شيفرة JavaScript المجمعة لتطبيقنا باستخدام المعرّف script:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

ستواجهنا المشكلة التالية عند تجميع التطبيق:

المُحمّلات

تنص رسالة الخطأ السابقة الناتجة عن webpack، على أننا قد نحتاج إلى مُحمّل مناسب لتجميع الملف App.js بالشكل الصحيح. لا يعرف webpack افتراضيًا سوى تجميع شيفرة JavaScript الأساسية. وربما أغفلنا فكرة أننا نستخدم عمليًا JSX لتصيير واجهات العرض في React، ولتوضيح ذلك، سنعرض الشيفرة التالية والتي لا تمثل شيفرة JavaScript نظامية:

const App = () => {
  return <div>hello webpack</div>
}

إنّ الشيفرة السابقة مكتوبة باستخدام JSX التي تؤمن طريقة بديلة لتعريف عناصر React ضمن المعرف <div> للغة HTML.

يمكن استخدام المُحمّلات لإبلاغ webpack عن الملفات التي ينبغي معالجتها قبل تجميعها. لنهيئ مُحملًا لتطبيقنا، يحوّل شيفرة JSX إلى شيفرة JavaScript نظامية:

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
  },
  module: {    
      rules: [      
          {        
              test: /\.js$/,        
              loader: 'babel-loader',        
              options: {          
                  presets: ['@babel/preset-react'],        
              },      
          },    
      ],  
  },}

عُرّف المُحمّل ضمن الخاصية module في المصفوفة rules.

يتألف تعريف المُحمّل من ثلاثة أقسام:

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-react']
  }
}

تحدد الخاصية test بأن المُحمِّل مخصص للملفات التي تنتهي باللاحقة "js"، بينما تحدد الخاصية loader أن معالجة هذه الملفات ستجري باستخدام babel-loader، أما الخاصية options فتستخدم لتحديد معاملات تهيئ وظيفة المحمّل.

لنثبت المُحمِّل والحزم التي يحتاجها كاعتمادية تطوير:

npm install @babel/core babel-loader @babel/preset-react --save-dev

سينجح الآن تجميع التطبيق.

لو عدّلنا قليلًا في شيفرة المكوّن APP، ثم ألقينا نظرة على الشيفرة المجمّعة، سنلاحظ أنّ النسخة المجمّعة من المكوّن ستكون على النحو التالي:

const App = () =>
  react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
    'div',
    null,
    'hello webpack'
  )

يمكن أن نلاحظ من خلال هذا المثال، أنّ عناصر React قد كُتبت بعد التجميع بشيفرة JavaScript نظامية بدلًا من عبارات JSX، وذلك باستخدام الدالة createElement التي تقدمها React.

يمكننا اختبار التطبيق المجمّع بتشغيل الملف "build/index.html" من خلال المتصفح:

تجدر الإشارة إلى أن استخدام عبارة awit/async ضمن شيفرة التطبيق، سيمنع بعض المتصفحات من إظهار أي شيء. يقودنا البحث عن رسالة الخطأ الظاهرة على الطرفية إلى المشكلة. علينا تثبيت اعتمادية مفقودة أو أكثر. في حالتنا نجد أن الاعتمادية ‎@babel/polyfill هي العنصر المفقود:

npm install @babel/polyfill

لنجري التعديلات التالية على الخاصية entry لكائن تهيئة webpack، وذلك ضمن الملف "webpack.config.js":

  entry: ['@babel/polyfill', './src/index.js']

يحتوي ملف التهيئة الآن كل ما يلزم لتطوير تطبيقات React.

نواقل الشيفرة

تُعرّف عملة نقل الشيفرة (Transpilling) بأنها عملية تحويل شيفرة JavaScript من شكل إلى آخر. ويشير المصطلح بشكل عام، إلى عملية ترجمة الشيفرة المصدرية بتحويلها من لغة إلى أخرى.

عند استخدام تعليمات التهيئة التي شرحناها سابقًا، فإننا نقلنا عمليًا شيفرة JSX إلى شيفرة JavaScript نظامية بمساعدة babel والذي يمثل حاليًا الأداة الأكثر شعبية لهذا الغرض.

وكما ذكرنا في القسم 1، أنّ معظم المتصفحات لا تدعم آخر الميزات التي قدمتها ES6 وES7، ولهذا تُنقل الشيفرة عادةً إلى نسخة JavaScript التي تتوافق مع معايير ES5.

تُعرّف عملية النقل التي ينفذها Babel كإضافة. إذ يستخدم المطورين في الواقع مُهيَّئات جاهزة (presets) وهي مجموعة من الإضافات المهيئة مسبقًا.

سنستخدم حاليًا المُهيَّئة ‎@babel/preset-react لنقل الشيفرة المصدرية لتطبيقنا:

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-react']  }
}

سنضيف المهيَّئة ‎@babel/preset-env التي تحتوي على كل شيئ قد نحتاجه في نقل الشيفرة التي تستخدم آخر ميزات اللغة إلى معيار ES5.

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react']  }
}

لنثبت المهيِّئة كالتالي:

npm install @babel/preset-env --save-dev

ستتحول الشيفرة بعد نقلها إلى أسلوب JavaScript القديم. فسيصبح تعريف المكوّن App كالتالي:

var App = function App() {
  return _react2.default.createElement('div', null, 'hello webpack')
};

لاحظ أن المتغيرات قد عرفت باستخدام التعليمة var لأن المعيار ES5 لا يفهم التعليمة const. وكذلك لم تُستعمل الدوال السهمية، بل استخدمت التعليمة function.

التنسيق باستخدام CSS

لنضف بعض تنسيقات CSS إلى التطبيق، وذلك بإنشاء الملف "src/index.css":

.container {
  margin: 10;
  background-color: #dee8e4;
}

لننسق المكوّن App:

const App = () => {
  return (
    <div className="container">
      hello webpack
    </div>
  )
}

ثم سندرج ملف التنسيق ضمن الملف "index.js":

import './index.css'

سيسبب ذلك انهيار عملية نقل الشيفرة:

إذ علينا عند استخدام CSS أن نستخدم المُحمّلين css وstyle:

{
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-react', '@babel/preset-env'],
      },
    },
    {      
       test: /\.css$/,      
       use: ['style-loader', 'css-loader'],    
    },  
  ];
}

تقتقضي مهمة المحمّل css loader تحميل ملف CSS بينما مهمة style loader هي توليد وإضافة عنصر التنسيق الذي يحتوي على كل التنسيقات التي يستخدمها التطبيق.

وهكذا ستُعرّف تنسيقات CSS ضمن الملف الرئيسي للتطبيق "index.html". وبالتالي لا حاجة لإدراج التنسيقات ضمنه. ويمكن عند الحاجة توليد تنسيقات CSS ثم وضعها في ملف منفصل باستخدام الإضافة mini-css-extract-plugin.

عند تثبيت المحمَّلين كالتالي:

npm install style-loader css-loader --save-dev

ستنجح عملية التجميع وسيحمل التطبيق تنسيقًا جديدًا.

المكتبة Webpack-dev-server

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

تقدم المكتبة webpack-dev-server حلًا لمشكلتنا. سنثبتها الآن:

npm install --save-dev webpack-dev-server

لنعرف سكربت npm لتشغيل خادم التطوير (dev-server):

{
  // ...
  "scripts": {
    "build": "webpack --mode=development",
    "start": "webpack serve --mode=development"  },
  //...
}

لنضف أيضًا الخاصية devServer إلى كائن التهيئة في الملف "webpack.config.js":

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
  },
  devServer: {    
      contentBase: path.resolve(__dirname, 'build'),    
      compress: true,    
      port: 3000,  
  },  // ...
};

سيشغل الأمر خادم التطوير على المنفذ 3000، وبالتالي يمكننا الوصول إلى تطبيقنا على العنوان http://localhost:3000 من خلال المتصفح. وعندما نغيّر في الشيفرة سيُحدّث المتصفح الصفحة تلقائيًا.

تتم عملية تحديث الشيفرة بسرعة. فعند استخدام خادم التطوير، لن تجمع الشيفرة بالطريقة المعتادة ضمن الملف "main.js"، بل ستبقى فقط في الذاكرة.

لنوسع الشيفرة بتغيير تعريف المكوّن App كالتالي:

import React, {useState} from 'react'

const App = () => {
  const [counter, setCounter] = useState(0)

  return (
    <div className="container">
      hello webpack {counter} clicks
      <button onClick={() => setCounter(counter + 1)}>
        press
      </button>
    </div>
  )
}

export default App

تجدر الملاحظة أنّ رسائل الخطأ لن تظهر بنفس الطريقة التي ظهرت بها عند استخدام create-react-app في تطوير التطبيق. لهذا السبب يجب أن ننتبه أكثر لما تعرضه الطرفية:

سيعمل التطبيق الآن بشكل جيد وستجري العمليات بسلاسة.

الدلالات المصدرية

لننقل معالج حدث النقر إلى دالة خاصة به، ولنخزّن القيمة السابقة للعداد في حالة مخصصة له تدعى values:

const App = () => {
  const [counter, setCounter] = useState(0)
  const [values, setValues] = useState()
  const handleClick = () => {
    setCounter(counter + 1)
    setValues(values.concat(counter))  }

  return (
    <div className="container">
      hello webpack {counter} clicks
      <button onClick={handleClick}>
        press
      </button>
    </div>
  )
}

لن يعمل التطبيق الآن، وستعرض الطرفية رسالة الخطأ التالية:

نعلم أن الخطأ موجود في التابع onClick، لكن في حال كان التطبيق أضخم، سنجد صعوبة بالغة في تقفي أثر الخطأ:

App.js:27 Uncaught TypeError: Cannot read property 'concat' of undefined
    at handleClick (App.js:27)

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

نحتاج بالطبع إلى رؤية شيفرتنا المصدرية الأساسية عند النقر على رسالة الخطأ. ولحسن الحظ فإصلاح رسالة الخطأ مع ذلك عملية سهلة. سنطلب من webpack أن يولد ما يسمى دلالة مصدرية (source map) للمُجمّع، بحيث يغدو ممكنًا الدلالة على الخطأ الذي يحدث عند التجميع ضمن الشيفرة المصدرية الأساسية.

يمكن توليد الدلالة المصدرية بإضافة الخاصية devtool إلى كائن التهيئة وإسناد القيمة source-map لها:

const config = {
  entry: './src/index.js',
  output: {
    // ...
  },
  devServer: {
    // ...
  },
  devtool: 'source-map',  // ..
};

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

ستصبح رسالة الخطأ الآن أوضح بكثير:

طالما أنها تشير إلى الشيفرة التي كتبناها:

يجعل توليد الدلالة المصدرية من استخدام منقح Chrome ممكنًا:

سنصلح الثغرة الآن بتهيئة القيمة الأولية للحالة values لتكون مصفوفة فارغة:

const App = () => {
  const [counter, setCounter] = useState(0)
  const [values, setValues] = useState([])
  // ...
}

تصغير الشيفرة

عندما سننشر التطبيق في مرحلة الإنتاج، سنستخدم الملف المُجمّع "main.js" الذي ولده webpack. إنّ حجم هذا الملف حوالي 974473 بايت على الرغم من أنّ شيفرة تطبيقنا لا تتجاوز عدة أسطر. إنّ هذا الحجم الكبير للملف يعود في الواقع إلى أنّ الملف المُجمَّع سيحتوي الشيفرة المرجعية لكامل مكتبة React. سيؤثر حجم الملف المجمّع لأن المتصفح سيحمّل الملف كاملًا عند تشغيل التطبيق للمرة الأولى. لن تكون هناك مشكلة بالحجم السابق إن كانت سرعة الاتصال بالإنترنت عالية، لكن الاستمرار في إضافة الاعتماديات سيخلق مشكلة في سرعة التحميل وخاصة لدى مستخدمي الهواتف النقالة.

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

تدعى عملية استمثال ملفات JavaScript بالتصغير (minification). وتعتبر الأداة UglifyJS من أفضل الأدوات المعدة لهذا الغرض.

لم تعد إضافات التصغير في webpack ابتداء من الإصدار 4 بحاجة إلى تهيئة إضافية. عليك فقط تعديل سكربت npm في الملف "package.json" لتحدد أنّ webpack سينفذ عملية التجميع في وضع الإنتاج:

{
  "name": "webpack-part7",
  "version": "0.0.1",
  "description": "practising webpack",
  "scripts": {
    "build": "webpack --mode=production",    
    "start": "webpack serve --mode=development"
  },
  "license": "MIT",
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  }
}

عندما نجمّع التطبيق ثانيةً، سيقل حجم الملف "main.js" بشكل واضح.

$ ls -l build/main.js
-rw-r--r--  1 mluukkai  984178727  132299 Feb 16 11:33 build/main.js

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

function h(){if(!d){var e=u(p);d=!0;for(var t=c.length;t;){for(s=c,c=[];++f<t;)s&&s[f].run();f=-1,t=c.length}s=null,d=!1,function(e){if(o===clearTimeout)return clearTimeout(e);if((o===l||!o)&&clearTimeout)return o=clearTimeout,clearTimeout(e);try{o(e)}catch(t){try{return o.call(null,e)}catch(t){return o.call(this,e)}}}(e)}}a.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)

تهيئة نسختي التطوير الإنتاج

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

سنخزّن المحتوى التالي ضمن الملف "db.json":

{
  "notes": [
    {
      "important": true,
      "content": "HTML is easy",
      "id": "5a3b8481bb01f9cb00ccb4a9"
    },
    {
      "important": false,
      "content": "Mongo can save js objects",
      "id": "5a3b920a61e8c8d3f484bdd0"
    }
  ]
}

هدفنا هنا هو تهيئة webpack بحيث يستخدم التطبيق خادم JSON على المنفذ 3001 كواجهة خلفية، إن تم استعمال webpack محليًا.

سيهيّأ الملف المجمّع عندها لاستخدام الواجهة الخلفية الموجودة على العنوان https://blooming-atoll-75500.herokuapp.com/api/notes.

سنثبت المكتبة axios ونشغل خادم JSON ومن ثم سنجري التعديلات اللازمة على التطبيق. تتطلب عملية التغيير إحضار الملاحظات من الواجهة الخلفية باستخدام خطاف مخصص يدعى useNotes:

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const useNotes = (url) => {  
    const [notes, setNotes] = useState([])  useEffect(() => {       
        axios.get(url).then(response => {      
        setNotes(response.data)
     })  
    },[url])  
    return notes}
const App = () => {
  const [counter, setCounter] = useState(0)
  const [values, setValues] = useState([])
  const url = 'https://blooming-atoll-75500.herokuapp.com/api/notes'
  const notes = useNotes(url)
  const handleClick = () => {
    setCounter(counter + 1)
    setValues(values.concat(counter))
  }

  return (
    <div className="container">
      hello webpack {counter} clicks
      <button onClick={handleClick} >press</button>
      <div>{notes.length} notes on server {url}</div>    
</div>
  )
}

export default App

استخدمنا عنوانًا مكتوبًا لخادم الواجهة الخلفية في التطبيق. لكن كيف يمكننا تغيير العنوان بحيث نصبح قادرين على تغييره لكي يدل على خادم الواجهة الخلفية عندما تُجمّع الشيفرة في مرحلة الإنتاج؟

سنغيّر كائن التهيئة في الملف "webpack.config.js" ليصبح دالة بدلًا من كونه تابعًا:

const path = require('path');

const config = (env, argv) => {
  return {
    entry: './src/index.js',
    output: {
      // ...
    },
    devServer: {
      // ...
    },
    devtool: 'source-map',
    module: {
      // ...
    },
    plugins: [
      // ...
    ],
  }
}

module.exports = config

سيبقى التعريف نفسه تقريبًا ماعدا أن كائن التهيئة سيعاد من قبل الدالة. تتلقى الدالة معاملين هما env وargv. يمكن استخدام المعامل الثاني للوصول إلى الخاصية mode المعرفة في سكربت npm.

يمكن استخدام الإضافة DefinePlugin في برنامج webpack لتعريف متغيرات عامة افتراضية يمكن استخدامها ضمن الشيفرة المجمّعة. لنعرف إذًا المتغير العام BACKEND_URL الذي يأخذ قيمًا مختلفة بناء على البيئة التي تجري فيها عملية تجميع الشيفرة:

const path = require('path')
const webpack = require('webpack')
const config = (env, argv) => {
  console.log('argv', argv.mode)

  const backend_url = argv.mode === 'production'    
  ? 'https://blooming-atoll-75500.herokuapp.com/api/notes'   
  : 'http://localhost:3001/api/notes'
  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'main.js'
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'build'),
      compress: true,
      port: 3000,
    },
    devtool: 'source-map',
    module: {
      // ...
    },
    plugins: [      
        new webpack.DefinePlugin({        
            BACKEND_URL: JSON.stringify(backend_url)
        })
    ]
  }
}

module.exports = config

يستخدم المتغير العام ضمن الشيفرة بالطريقة التالية:

const App = () => {
  const [counter, setCounter] = useState(0)
  const [values, setValues] = useState([])
  const notes = useNotes(BACKEND_URL)
  // ...
  return (
    <div className="container">
      hello webpack {counter} clicks
      <button onClick={handleClick} >press</button>
      <div>{notes.length} notes on server {BACKEND_URL}</div>    
    </div>
  )
}

إن كانت هناك اختلافات واسعة في تهيئة نسختي الإنتاج والتطوير. فمن الأفضل فصل تهيئة كل نسخة ضمن ملف خاص بها.

يمكن تحري نسخة الإنتاج المجمّمعة من التطبيق محليًا وذلك بتنفيذ الأمر التالي:

npx static-server

ستكون هذه النسخة متاحة بشكل افتراضي على العنوان http://localhost:9080.

استخدام شيفرة Polyfill

انتهى تطبيقنا الآن وأصبح جاهزًا للعمل مع مختلف المتصفحات الحديثة الموجودة حاليًا ماعدا Internet Explorer. وذلك لأن الوعود التي تستخدمها axios غير مدعومة من قبل IE.

هنالك العديد من الأمور التي لا يدعمها IE. وبعضها مؤذٍ كالتابع find الذي يستخدم للتعامل مع مصفوفات إذ يفوق قدرة هذا المتصفح.

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

فإن أردنا أن يكون تطبيقنا متوافقًا مع IE، سنحتاج إلى شيفرة polyfill، وهي شيفرة تضيف الوظائف غير المدعومة إلى المتصفحات القديمة.

يمكن إضافة تلك الشيفرات بمساعدة webpack and Babel أو بتثبيت إحدى مكتباتها. فشيفرة polyfill التي تقدمها المكتبة promise-polyfill سهلة الاستخدام، وليس علينا سوى إضافة ما يلي إلى شيفرتنا:

import PromisePolyfill from 'promise-polyfill'

if (!window.Promise) {
  window.Promise = PromisePolyfill
}

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

يمكنك إيجاد قائمة بمكتبات polyfill بزيارة الموقع github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills، كما يمكنك الاطلاع على توافق المتصفحات مع الواجهات البرمجية المختلفة من خلال زيارة الموقع https://caniuse.com، أو من خلال زيارة موقع Mozilla.

إلغاء التهيئة الافتراضية (تحرير المشروع)

تستخدم الأداة create-react-app برنامج webpack خلف الستار. فإن لم تجد أنّ التهيئة الافتراضية كافية، يمكنك إلغاءها بعملية تسمى تحرير المشروع (eject)، والتي يتم التخلص فيها من العمليات خلف الكواليس، كما تُخزّن التهيئة الافتراضية في المجلد config وفي ملف package.json معدّل.

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

كما ننصحك بقراءة ملفات التهيئة للمشاريع المحررة بعناية، فهي ذات قيمة تعليمية كبيرة.

ترجمة -وبتصرف- للفصل webpack من سلسلة Deep Dive Into Modern Web Development

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

• استخدام اختبارات الوحدة (Unit tests) وذلك للتأكد من أن تعديلات ما على الشيفرة البرمجية لن يعطّل شيفرة أُخرى.
• استخدام عملية كشف الأخطاء المحتملة (Linting) لضمان كتابة شيفرة برمجية خالية من الأخطاء.
• استخدام طرق مختلفة للبنية الهيكلية للشيفرة البرمجية لكلّ من وضع التطوير ووضع النشر.

بالإضافة إلى ذلك فإن معايير الوِب بشكلها الحالي طرحت تحديات جديدة لتطوير تطبيقات الوِب. على سبيل المثال صفحات الوِب الحالية تُنشئ الكثير من الطلبات غير المتزامنة والّذي بدوره يؤدي إلى خفض أداء تطبيق الوِب انخفاضًا كبيرًا بسبب معالجة طلبات ملفات التنسيق والجافاسكربت. إذ أن لكل طلبٍ من هذه الطلبات (حتى وإن كان لملف صغير الحجم) فإنه سيحتاج إلى ترويسة اتصال (Header) وكُلفة إنشاء اتصال (handshakes). وهذه المشكلة تحديدًا تُعالجُ من خلال تجميع الملفات معًا لتصبح في ملف واحد وبذلك سنستدعي ملف جافاسكربت وملف تنسيق بدلًا من المئات الملفات.

من الشائع في وقتنا الحالي استخدام لغات ذات معالجة مُسبّقة (language preprocessors) مثل: SASS و JSX والّتي تُترجم من هذه اللغات إلى ملفات جافاسكربت وملفات تنسيقات. بالإضافة إلى ذلك شاع أيضًا استخدام المحوّل (Transpilers) وهو محوّل يغيّر الشيفرة البرمجية من إصدار معين للغة جافاسكربت إلى إصدار أقدم، وذلك لضمان عمل هذه الشيفرة البرمجية على جميع المتصفحات. مثل المحوّل Babel.

إن هذه المهام (والّتي لا علاقة لها بالمنطق البرمجي لتطبيق الوِب بحد ذاته) تمثل عبئًا على على المطور. ولكن لحسن الحظ يوجد حلٌ لهذا الأمر وهو منفذ المهام (Task Runner) والّذي جاء لمساعدتنا في أتمتة هذه المهام حتى نستطيع أن نحسّن من بيئة التطوير مع التركيز على بناء المنطق البرمجي لتطبيق الوِب. بمجرد ضبط الإعدادات الخاصة بمنفذ المهام كلّ ما عليك فعله هو استدعاء أمرٍ على الطرفية وستُنفذ بعدها المهام المؤتمتة.

سأستخدم الأداة Gulp كمنفذ للمهام وذلك لأنه مناسب للمبرمجين وسهل التعلّم ومفهوم (تحدثنا في مقال سابق كيفية استخدام هذه الأداة بكلّ التفاصيل).

مقدمة سريعة لأداة Gulp

تتألف واجهة برمجة التطبيقات (API) لهذه الأداة من أربع دوالّ:

• gulp.src
• gulp.dest
• gulp.task
• gulp.watch

في المثال التالي نلاحظ أن المهمة my-first-task ستستخدم ثلاثة دوال من أصل الأربعة.

gulp.task('my-first-task', function() {
  gulp.src('/public/js/**/*.js')
  .pipe(concat())
  .pipe(minify())
  .pipe(gulp.dest('build'))
});

عند تنفيذ المهمة my-first-task ستصغّر أولًا جميع الملفات المطابقة للنمط ‎/public/js/**/*.js‏ ومن ثمّ ستُنقل إلى المجلد build.

الجميل في التعليمة ‏pipe()‎. هي أنه يمكنك أخذ مجموعة من ملفات الإدخال وتمريرها عبر الأنبوب لتنفيذ بعض التحويلات المناسبة عليهم ومن ثمّ إعادة ملفات الخرج المطلوبة. لجعل الأمور أكثر توافقية. غالبًا ما تنفذ العمليات المطلوبة في الإنبوب (مثل: minify()‎) من خلال مكتبات مدير الحزم npm، ونتيجة ذلك من النادر جدًا في التطبيق الفعلي لهذه االعمليات أن نحتاج لكتابة تفاصيل هذه العمليات كتابةً يدوية إلا إذا أردت أن تُعيد تسمية الملفات في الأنبوب. من الجدير بالذكر أن Gulp يَستخدم المجاري (streams) الّتي توفرها node.js، وهذا يسمح بتمرير البيانات الّتي ستُعالَج عبر الأنابيب (pipes) وهذا ما تفعله الدالة ‎.pipe()‎؛ لشرحٍ تفصيليٍ عن المجاري في node.js، سأحيلك إلى هذه المقالة.

الخطوة التالية لفهم Gulp هي فهم مصفوفة تبعيات المهام.

gulp.task('my-second-task', ['lint', 'bundle'], function() {
  ...
});

في هذا المثال إن المهمة my-second-task تُعيد نتيجة الدالة المجهولة (anonymous function)، وذلك بعد اكتمال مهمة lint ومهمة التجميع bundle. وبذلك يُسمح لنا بفصل الاهتمامات عن بعضها بعضًا كما يمكنك أيضًا إنشاء سلسلة من المهام الصغيرة بمسؤولية واحدة مثل تحويل LESS إلى CSS. وإنشاء مهمة رئيسية (Master Task) والّتي ستستدعي ببساطة جميع المهام الأخرى (الصغيرة) عبر مصفوفة من تبعيات المهام.

وأخيرًا لدينا التعليمة gulp.watch والّذي يراقب التغييرات في ملف (أو ملفات) ما والمطابق لنمط مرّر لها، وما إن يحدث تغيير ما في هذا الملف حتى تُنفذّ سلسلة من المهام المحددة.

gulp.task('my-third-task', function() {
  gulp.watch('/public/js/**/*.js', ['lint', 'reload'])
})

في المثال السابق أي تغيير في الملفات الّتي تطابق النمط /public/js/**/*.js سيؤدي إلى تشغيل مهمة كشف الأخطاء المحتملة lint وبعدها مهمة إعادة التحميل reload. إن الاستخدام الشائع للتعليمة gulp.watch هو تشغيل عمليات إعادة التحميل المباشر في المتصفح، وهي ميزة رائعة جدًا أثناء مرحلة التطوير ولن تستطيع العمل بدونها بمجرد أن تجربها.

وإلى هنا نستطيع القول بأننا فهمنا كلّ ما سنحتاج لاستخدامه في الأداة Gulp.

أين سنستخدم أداة Webpack؟

عندما نستخدام نمط CommonJS فإن تجميع كلّ ملفات الجافاسكربت ليصبحوا في ملف واحد ليس بهذه البساطة. إذ إن الخاصية (entry point) والّتي تُسند عادةً للقيمة index.js أو app.js مع سلسلة من التعليمات require أو import الموجودة في أعلى الملف. وسيكون شكل ملف جافاسكربت في الإصدار ES5 على الشكل التالي:

var Component1 = require('./components/Component1');
var Component2 = require('./components/Component2');

وسيكون شكل ملف جافاسكربت في الإصدار ES6 على الشكل التالي:

import Component1 from './components/Component1';
import Component2 from './components/Component2';

إن المثالين السابقين يجلبان التبعيات قبل تنفيذ بقية الشيفرات البرمجية في ملف app.js، وممكن أن يكون لهذه التبعيات تبعيات أخرى والّتي ستُجلب أيضًا. وبالإضافة إلى ذلك من الممكن أن تُستدعى نفس التبعية في أماكن متعددة في تطبيق الوِب خاصتك. ولكننا نريد جلب هذه التبعية مرة واحدة فقط. لهذا فأن كانت شجرة التبعيات بعمق عدة مستويات (أي التبعيات ذات هرمية كبيرة) فعندها ستزداد صعوبة تجميع هذه التبعيات في ملف واحد. ولكن لحسن الحظ يوجد حلّ رائع لهذه المشكلة وهو مُجمّع الحزم (الوحدات) مثل:Browserify أو Webpack.

لماذا يفضل المطورون استخدام Webpack بدلًا من Gulp؟

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

ببساطة إن قوة أداة Webpack مكنتها من تنفيذ الغالبية العظمى من المهام الملقاة على عاتق منفذ المهام (مثل: Gulp أو أي منفذ مهام عمومًا). فعلى سبيل المثال توفر Webpack خيارات تصغير وخرائط الشيفرة البرمجية المحوّلة Source Maps (لمزيد من المعلومات عنها يمكنك الإطلاع على المقال التالي) للشيفرة البرمجية المُجمعّة.

بالإضافة إلى ذلك يمكن استخدامها كوسيط (Middleware) من خلال خادم مخصص يدعى webpack-dev-server والّذي يدعم كلًا من إعادة التحميل المباشر (live reloading) وإعادة التحميل النشط (hot reloading) لصفحات الوِب (والّتي سنتحدث عنها لاحقًا في هذا المقال). وكما يمكنك أيضًا تحويل الشيفرة البرمجية (transpiling) من إصدار جافاسكربت حديث مثل ES6 إلى إصدارٍ قديم مثل: ES5. ويمكنك أيضًا استخدام طريقة المعالجات المُسبقة (pre-processors) أو المُلحقة (post-processors) لملفات التنسيق. وبذلك تُترك عملية إختبار الوحدة (Unit Tests) وعملية كشف الأخطاء المحتملة (linting) كمهام رئيسية مستقلة نظرًا من كوننا قلصنا ما لا يقلّ عن ستة مهام محتملة للأداة Gulp لمهمتين فقط. يلجأ العديد من المطورين لاستخدام NPM Scripts بدلًا من استخدام Gulp، وذلك لتجنب إضافة أداة Gulp إلى المشروع في حين وجود بديل قوي ينوب عنها.

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

طرق إعداد منفذ مهام

سنتعرف على ثلاث طرق لإنشاء وإعداد منفذ مهام مساعد في المشاريع البرمجية. وكلّ واحدٍ منهم سينفذ المهام التالية:

• إعداد خادم تطوير مع ميزة إعادة التحميل المباشر (live reloading) فور حدوث أي تعديل على صفحة الوِب المُراقبة.
• تجميع ملفات التنسيق والجافاسكربت (بالإضافة إلى تحويل الشيفرة البرمجية للغة جافاسكربت من الإصدار ES6 إلى ES5، وتحويل ملفات التنسيق من SASS إلى ملفات CSS وخرائط الشيفرة البرمجية المحوّلة) وذلك بطريقة قابلة للتطوير والتوسّع لهذه الملفات المحوّلة.
• تشغيل اختبار الوحدة (Unit Tests) سواءً كمهمة قائمة بحد ذاتها أو في وضع المراقبة.
• تشغيل عملية الكشف عن الأخطاء المحتملة (Linting) سواءً كمهمة قائمة بحد ذاتها أو في وضع المراقبة.
• توفير القدرة على جمع كلّ المهام السابقة عبر أمر واحد لكتابته عبر الطرفية.
• وجود أمر آخر لتجميع الملفات وضغطها أو تنفيذ تحسينات أخرى عليها من أجل عملية النشر.

وستكون طرق إعداد منفذ المهام على الشكل التالي:

1. Gulp + Browserify
2. Gulp + Webpack
3. Webpack + NPM Scripts

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

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

سننشئ مشروعًا على Git وسنضيف له ثلاثة تفريعات من أجل اختبار كلّ طريقة من الطرق

git checkout <branch name>
npm prune (optional)
npm install
gulp (or npm start, depending on the setup)

لنناقش الآن كلّ تفريعة (طريقة) من هذه الفروع على حدة.

ستكون البنية الهرمية لمجلد المشروع على الشكل التالي:

- app
 - components
 - fonts
 - styles
- index.html
- index.js
- index.test.js
- routes.js

سنتطرق لشرح أهم الملفات الموجودة في المشروع وذلك حرصًا على كمال المعلومة. سيكون الملف index.html على الشكل التالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bundle.css">
    <title>Gulp Browserify Setup</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

نلاحظ أن هذا الملف بسيط جدًا إذ إنه يُحمّلُ تطبيق React في الوسم <div id="app"></div> ولن نستخدم إلا ملف واحد للتنسيقات وملف آخر للجافاسكربت، في الواقع في طريقة الإعداد هذه لن نستخدم حتى ملف التنسيق bundle.css.

وسيكون الملف index.js على الشكل التالي:

import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './routes';

render(<Router history={browserHistory} routes={routes} />, document.getElementById('app'));

نلاحظ أن هذا الملف سيكون بمثابة نقطة الدخول (entry point) لتطبيقنا. إذ إننا بصدد تحميل React Router في الوسم div مع السِمة app الّتي أشرنا لها في الملف السابق.

وسيكون الملف routes.js على الشكل التالي:

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
import ContactPage from './components/contact/ContactPage';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="contact" component={ContactPage} />
  </Route>
);

نلاحظ أن هذا الملف يحدد مسارات المشروع. وستكون المسارات / و ‎/about و ‎/contact مرتبطة مع المكونات HomePage و AboutPage و ContactPage على التتالي.

وسيكون الملف index.test.js على الشكل التالي:

import expect from 'expect';

describe('Array', () => {
  it('should return -1 when the value is not present', () => {
    expect(-1).toBe([1,2,3].indexOf(4));
  });
  it('should correctly filter elements in an array', () => {
    const arr = [1,2,3,4,5];
    const newArr = arr.filter(el => el > 3);
    expect(newArr.length).toBe(2);
  });
  it('should correctly map elements in an array', () => {
    const arr = [1,2,3,4,5];
    const newArr = arr.map(el => el * 2);
    expect(newArr).toEqual([2,4,6,8,10]);
  });
});

describe('Object', () => {
  it('should convert an int to a string with the toString method', () => {
    const val = 5;
    const valToString = val.toString();
    expect(val).toNotBe(valToString);
    expect(valToString).toBe('5');
  });
  it('should correctly test whether an object has a certain property', () => {
    const obj = {a: 1, b: 2};
    expect(obj.hasOwnProperty('a')).toBe(true);
    expect(obj.hasOwnProperty('c')).toBe(false);
  });
});

describe('String', () => {
  it('should convert a string to lowercase', () => {
    const str = 'HELLO';
    const strLower = str.toLowerCase();
    expect(strLower).toBe('hello');
  });
  it('should convert a string to uppercase', () => {
    const str = 'hello';
    const strLower = str.toUpperCase();
    expect(strLower).toBe('HELLO');
  });
  it('should remove spaces from both ends of a string', () => {
    const str = ' hello there ';
    const strTrimmed = str.trim();
    expect(strTrimmed).toBe('hello there');
  });
  it('should split the string into an array of strings based on the provided delimiter', () => {
    const str = 'she-sells-seashells-down-by-the-seashore';
    const strSplit = str.split('-');
    expect(Array.isArray(strSplit)).toBe(true);
    expect(strSplit.length).toBe(7);
  });
});

نلاحظ أن هذا الملف يحتوي على سلسلة من اختبارات الوحدة (Unit Tests) والّتي ستختبر سلوك الشيفرة الأصلية للجافاسكربت (Native JavaScript) في عملية النشر الفعلية للتطبيق يمكنك إنشاء اختبار لكل مكون React (اختبار واحد على الأقل لكل مكوّن يعالج حالة معينة) واختبار السلوك الخاص بإطار العمل React. وعلى أية حال يكفي أن يكون لديك اختبار وحدة بسيط والّذي نستطيع تشغيله في وضع المراقبة (watch mode عند تفعيل هذا الوضع تثبت ملفات مخصصة لمراقبة أي تغييرات تحصل في الملفات الأخرى وفي حال حصول أي تغييرات في الملفات سيعاد ترجمة الملفات للحصول على الخرج الجديد).

وسيكون الملف components/App.js على الشكل التالي:

import React, {PropTypes} from 'react';
import Header from './common/Header';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.object.isRequired
};

export default App;

يمكن اعتبار الملف السابق حاوية لجميع مكونات العرض الموجودة لدينا. إذ تحتوي كلّ صفحة لدينا على الترويسة <Header/> بالإضافة إلى this.props.children والّذي يقيّم لعرض محتواه في الصفحة نفسها. فعلى سبيل المثال إذا كان في المتصفح /contact سيقيّم إلى ContactPage.

وسيكون الملف components/home/HomePage.js على الشكل التالي:

import React from 'react';
import {Jumbotron, Grid, Row, Col, Panel} from 'react-bootstrap';

class HomePage extends React.Component {
  render() {
    return (
      <div className="HomePage">
        <Jumbotron>
          <Grid>
            <h1>Home Page</h1>
          </Grid>
        </Jumbotron>
        <Grid>
          <Row>
            <Col sm={6}>
              <Panel header="Panel 1">
                <p>Content A</p>
                <p>Content B</p>
              </Panel>
            </Col>
            <Col sm={6}>
              <Panel header="Panel 2">
                <p>Content A</p>
                <p>Content B</p>
              </Panel>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default HomePage;

هذا الملف سيكون الصفحة الرئيسية المعروضة. استخدمت react-bootstrap نظرًا لأن نظام الشبكة (Grid) في إطار العمل Bootstrap ممتاز لإنشاء صفحات متجاوبة. وعند استخدامه استخدامًا صحيحًا سيُقّلل عدد استعلامات الوسائط (media queries) الّتي سنكتبها للأجهزة صغيرة الحجم تقليلًا كبيرًا.

المكونات الأخرى المتبقية (مثل: Header و AboutPage و ContactPage) مبنية بطريقة مشابهة (باستخدام react-bootstrap بدون التلاعب بالحالة [state manipulation]).

أما الآن لنتحدث أكثر عن ملفات التنسيق.

منهجية الملفات التنسيق

أسلوبي المفضل في تنسيق ملفات React هو امتلاك ملف تنسيق خاص لكلّ مكوّن من المكونات. إذ سيكون هذا التنسيق ضمن نطاق هذا المكون فقط. ستلاحظ أنه في كلّ مكون من المكونات هنالك وسم div ذو مستوى أعلى وسيكون أسم الصنف التابع له مطابق لأسم المكون نفسه. لذلك المكون HomePage.js سيكون مغلف بوسم له الشكل التالي:

<div className="HomePage">
  ...
</div>

وسيكون هنالك أيضًا ملف HomePage.scss والّذي سيكون مهيكل على الشكل التالي:

@import '../../styles/variables';

.HomePage {
  // Content here
}

لماذا هذه المنهجية مفيدة للغاية؟ لأنها تنتج لنا وحدات (Modular) ذات جودة عالية. مما يُلغي الكثير من المشاكل غير المرغوب بها في التنسيق.

لنفترض أن لدينا مكونين React وهما Component1 و Component2. وفي كلّ واحد منهما نريد إعادة تنسيق الوسم h2 ليصبح حجم الخط كما في الملف التالي:

/* Component1.scss */
.Component1 {
  h2 {
    font-size: 30px;
  }
}

/* Component2.scss */
.Component2 {
  h2 {
    font-size: 60px;
  }
}

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

وبالنسبة للتنسيقات المُسبقة للمكونات (per-component styles) أحب أن أخصص مجلد تنسيقات styles يحتوي على جميع التنسيقات العامة في الملف global.scss بجانب تنسيقات SASS مخصصة والّتي تكون مسؤولة عن معالجة التنسيقات المخصّصة (في حالتنا مثل: ‎_fonts.scss و ‎_variables.scss من أجل الخطوط والمتغيّرات على التوالي). تتيح لنا هذه التنسيقات العامة تحديد الشكل العام للتطبيق بأكمله بينما يمكن للتنسيقات الأخرى المخصصة أن تُستورد بحسب الحاجة لها.

والآن بعد أن استكشفنا بعمق الشيفرة البرمجية المشتركة بين كلِّ طرق إعداد منفذ المهام. لننتقل إلى أول طريقة منهم.

1. طريقة Gulp + Browserify

يتكون ملف gulpfile.js من 22 سطرًا من تعليمات لاستيراد المكتبات والحزم و150 سطرًا من الشيفرات البرمجية الأخرى. لذا ومن أجل الإيجاز سنراجع بالتفاصيل أهم النقاط الرئيسية في هذا الملف (مثل: js و css و server و watch و default).

محزم ملفات جافاسكربت

// ضبط إعداد Browserify
const b = browserify({
  entries: [config.paths.entry],
  debug: true,
  plugin: PROD ? [] : [hmr, watchify],
  cache: {},
  packageCache: {}
})
.transform('babelify');
b.on('update', bundle);
b.on('log', gutil.log);

(...)

gulp.task('js', bundle);

(...)



function bundle() {
  return b.bundle()
  .on('error', gutil.log.bind(gutil, 'Browserify Error'))
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(cond(PROD, minifyJS()))
  .pipe(cond(!PROD, sourcemaps.init({loadMaps: true})))
  .pipe(cond(!PROD, sourcemaps.write()))
  .pipe(gulp.dest(config.paths.baseDir));
}

نلاحظ في الدالّة bundle أن ملفات الجافاسكربت ستُحزّم باستخدام Browserify وستُستخدم خرائط الشيفرة البرمجية المحوّلة (Source maps) في وضع التطوير بينما ستُستخدم عملية التصغير لملفات جافاسكربت في وضع الإنتاج.

في الحقيقة إن هذا النهج سيء وذلك لعدة أسباب إحداها أن المهمة ستقسّم إلى ثلاثة أجزاء منفصلة. إذ في البداية سننشئ كائن للتحزيم وليكن b وسنمرر له بعض الخيارات المطلوبة، ومن ثمّ نحدد بعض مُعالِجات الأحداث (event handlers). ثم لدينا مهمة Gulp والّتي يجب أن نمرر لها اسم الدالة بدلًا من تمريرها سطريًا (إن b.on('update') تستخدم نفس الطريقة). إن هذه الطريقة غير أنيقة مثل الطريقة الموجودة في مهام Gulp والّتي تتطلب فقط تمرير gulp.src وتوجيه بعض التغييرات.

هناك مشكلة أخرى تجبرنا على اتباع طرق مختلفة لإعادة تحميل ملفات html و css و js في المتصفح. لاحظ طريقة إعداد مهمة المراقب الموضحة في الشيفرة التالية:

gulp.task('watch', () => {
  livereload.listen({basePath: 'dist'});

  gulp.watch(config.paths.html, ['html']);
  gulp.watch(config.paths.css, ['css']);
  gulp.watch(config.paths.js, () => {
    runSequence('lint', 'test');
  });
});

عندما سيحصل أي تغيير في ملف html سيعاد تشغيل مهمة html من جديد.

gulp.task('html', () => {
  return gulp.src(config.paths.html)
  .pipe(gulp.dest(config.paths.baseDir))
  .pipe(cond(!PROD, livereload()));
});

إن آخر تعليمة في الأنبوب هي عملية إعادة التحميل المباشرlivereload() إذا كانت قيمة الخاصية NODE_ENV ليست production، ستُحدث الصفحة في المتصفح تحديثًا تلقائيًا.

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

غير أن المراقب الخاص بملفات الجافاسكربت لا يستدعي مهمة js على الإطلاق، وإنما معالج الأحداث في الأداة Browserify يتعامل مع إعادة التحميل باستخدام منهجية مختلفة تمامًا (يطلق عليها اسم مبدل الوحدات النشط [hot module replacement]). إن التضارب في هذه المنهجية مزعج للغاية. ولكنه للأسف ضروري وإذا استدعينا تعليمة إعادة التحميل المباشر في نهاية دالة bundle فعندها سيؤدي ذلك إلى إعادة بناء كلّ ملفات جافاسكربت في حال حدث أي تغيير في أي ملف منهم. من الواضح أن هذه المنهجية غير قابلة للتوسّع والتطوّر. إذ كلما زاد عدد ملفات جافاسكربت كلما استغرقت عملية إعادة التجميع وقتًا أطول. وفجأة عملية البناء الّتي كانت تستغرق 500 ميلي ثانية ستستغرق 30 ثانية مما سيُعيق منهجية التطوير الرشيق أجايل agile.

محزم ملفات التنسيق

gulp.task('css', () => {
  return gulp.src(
    [
      'node_modules/bootstrap/dist/css/bootstrap.css',
      'node_modules/font-awesome/css/font-awesome.css',
      config.paths.css
    ]
  )
  .pipe(cond(!PROD, sourcemaps.init()))
  .pipe(sass().on('error', sass.logError))
  .pipe(concat('bundle.css'))
  .pipe(cond(PROD, minifyCSS()))
  .pipe(cond(!PROD, sourcemaps.write()))
  .pipe(gulp.dest(config.paths.baseDir))
  .pipe(cond(!PROD, livereload()));
});