شرح أمر react-scripts start في Create React App وفهم سكربتات NPM

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

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

في هذا المقال ستتعرف بوضوح على وظيفة حزمة react-scripts، وما الذي يحدث خلف الكواليس عند تشغيل أوامر NPM المختلفة داخل مشروع Create React App.

ما هي الأدوات التي يستخدمها Create React App في الخلفية؟

قد لا ترى أدوات مثل Babel أو Webpack ضمن التبعيات الظاهرة مباشرة في ملف package.json الخاص بمشروعك، لكن هذا لا يعني أنها غير موجودة. في الواقع، تعتمد CRA عليها فعلياً، إلا أن إعداداتها مخفية داخل حزمة react-scripts.

وعند الاطلاع على ملف package.json الخاص بحزمة react-scripts، ستجد عدداً كبيراً من الحزم المسؤولة عن تشغيل التطبيق وبنائه واختباره وتحليل الشيفرة. هذه البنية الجاهزة هي ما يجعل تجربة البدء مع React سهلة وسريعة.

الشرح التالي يستند إلى سلوك Create React App في إصدار قريب من 4.0.1، مع توضيح المفاهيم الأساسية التي لا يزال معظمها صالحاً لفهم الآلية العامة.

دور Babel

تتمثل مهمة Babel الأساسية في تحويل الشيفرة الحديثة إلى صيغة أقدم وأكثر توافقاً مع المتصفحات المختلفة. فمنذ ظهور ES2015 وما بعده، بدأت المتصفحات بدعم ميزات JavaScript الحديثة تدريجياً، لكن JSX تظل صيغة خاصة بـ React وليست جزءاً أصيلاً من مواصفات اللغة.

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

دور ESLint

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

دور Jest

Jest هي مكتبة اختبارات طورتها Facebook وتعمل بسلاسة مع React. بفضلها يمكنك كتابة اختبارات لوحدات التطبيق والمكونات دون الحاجة إلى تجهيز بنية اختبار كاملة من الصفر.

دور PostCSS

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

دور Webpack

Webpack هو مجمّع وحدات مسؤول عن جمع ملفات التطبيق وموارده في بنية مناسبة للتشغيل. ولا يقتصر دوره على الدمج فقط، بل يمكنه أيضاً تشغيل أدوات أخرى فوق الشيفرة مثل Babel وESLint وPostCSS ضمن سلسلة بناء واحدة.

ما الذي تفعله حزمة react-scripts فعلياً؟

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

الأوامر الأساسية التي توفرها الحزمة هي:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

عند تشغيل أي أمر من هذه الأوامر، يتم تنفيذ الملف /bin/react-scripts.js، والذي يقرأ الوسيط المرسل إليه. وهو يقبل فقط الأوامر start وbuild وtest وeject. وإذا مررت أمراً غير معروف، فسيتم إرجاع رسالة تفيد بأن السكربت غير معروف.

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

كيف يعمل أمر react-scripts start؟

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

المهام التي ينفذها أمر start

• ضبط بيئة البناء إلى development لكل من Node وBabel.
• قراءة متغيرات البيئة المستخدمة أثناء التشغيل.
• التحقق من أن الحزم الأساسية في المشروع ليست في حالة تعارض أو تقادم واضح.
• فحص ما إذا كان المشروع يستخدم TypeScript أم لا.
• استيراد الوحدات المطلوبة، خصوصاً ما يتعلق بـ Webpack.
• التحقق من المنفذ المتاح وعنوان المضيف، وغالباً تكون القيمة الافتراضية 0.0.0.0:3000.
• تشغيل المصرّف compiler والاستماع لرسائل Webpack.
• فتح المتصفح تلقائياً وتشغيل خادم التطوير.

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

لماذا يُعد هذا الأمر مهماً أثناء التطوير؟

أمر react-scripts start لا ينشئ نسخة نهائية من التطبيق، بل يوفر بيئة مرنة وسريعة للتطوير. وهذه البيئة تمنحك مزايا مهمة مثل:

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

متى تستخدم أمر react-scripts build؟

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

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

الهدف هنا هو تحسين الأداء عبر:

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

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

تجد المخرجات النهائية لهذا الأمر داخل المجلد build/ في جذر المشروع، وهو المجلد الذي تعتمد عليه عادة عند النشر.

كيف يعمل أمر react-scripts test؟

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

أين يبحث الأمر عن ملفات الاختبار؟

يمكنك حفظ ملفات الاختبار في أي مكان داخل المجلد src/، وسيقوم السكربت بالعثور على الملفات التي تنتهي بالامتدادات التالية:

• .test.js
• .spec.js

كما يمكنه أيضاً تنفيذ أي ملف .js موجود داخل المجلد __tests__/.

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

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

ماذا يفعل أمر react-scripts eject؟

يُعد أمر eject الأكثر حساسية بين أوامر CRA. عند تشغيله، يتم فك الارتباط مع حزمة react-scripts وإظهار كل ملفات الإعدادات وأدوات البناء داخل مشروعك، بحيث تصبح قابلة للتعديل المباشر.

بعد تنفيذ هذا الأمر:

• تُنسخ ملفات الإعداد إلى المجلد config/ في جذر المشروع.
• تُنسخ سكربتات البناء إلى المجلد scripts/.
• تُنقل التبعيات المطلوبة إلى ملف package.json الخاص بالمشروع.

هذا القرار نهائي عملياً، لأنه يخرجك من البنية المبسطة التي توفرها Create React App. لذلك لا يُنصح به إلا إذا كنت تحتاج فعلاً إلى تعديل عميق في إعدادات Webpack أو Babel أو غيرهما.

وإذا كنت تستخدم نظام إدارة إصدارات مثل Git وكنت قد نفذت الأمر عن طريق الخطأ، فقد تتمكن من التراجع عبر أوامر مثل git checkout أو git reset، بشرط أن تكون التغييرات غير معتمدة بطريقة تعيق الرجوع.

هل تحتاج فعلاً إلى eject؟

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

مقارنة سريعة بين أوامر react-scripts

لماذا لا تزال Create React App مفيدة لفهم بيئة React؟

حتى مع ظهور أدوات أحدث في منظومة React، تبقى Create React App نقطة تعليمية مهمة لفهم كيفية عمل أدوات البناء في الخلفية. فهي تمنح المطور تصوراً واضحاً حول العلاقة بين Babel وWebpack وJest وغيرها، دون أن تجبره منذ البداية على إدارة إعدادات تفصيلية كثيرة.

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

الخلاصة التقنية

حزمة react-scripts هي القلب التشغيلي لمشاريع Create React App، فهي تخفي تعقيد الإعدادات وتوفر أوامر جاهزة للتطوير والبناء والاختبار. أمر start يخدم بيئة التطوير السريعة، بينما ينتج build نسخة محسّنة للإنتاج، ويعتني test بجانب الجودة، أما eject فيفتح الباب للتخصيص الكامل مقابل فقدان البساطة. من الناحية التقنية، فهم هذه الأوامر يساعد أي مطور React على اتخاذ قرارات أفضل بشأن بنية المشروع وأدواته، بدلاً من استخدام الأوامر كصندوق أسود دون إدراك آلية عملها.