ماذا يحدث عند تشغيل أوامر npm؟

تضغط على مفتاح Enter لتنفيذ أمر npm وتنتظر. فجأة، يعمل مشروعك. يبدو الأمر وكأنه سحر.

إنه ليس سحراً. بل هو سلسلة من طلبات الشبكة، وتحليل الكود، وتحسين الملفات.

توقف عن تشغيل الأوامر بشكل عشوائي. افهم المحرك الذي يقف وراء هذه الأوامر الأساسية.

  1. npm install يقرأ هذا الأمر ملف package.json الخاص بك، ويتصل بسجل سحابي (cloud registry) للعثور على التبعيات (dependencies) الخاصة بك. • يقوم بتنزيل الحزم في مجلد node_modules. • يقوم بحل تعارضات الإصدارات. • ينشئ ملف package-lock.json لتسجيل الإصدارات الدقيقة.

  2. npm run format:check هذه خطوة تحقق، حيث تستخدم أدوات مثل Prettier لفحص ملفاتك. • تقوم ببناء تخطيط افتراضي لكودك. • تقارن الكود الخاص بك بقواعد التنسيق (style rules) الخاصة بك. • تضع علامات على الأخطاء دون تغيير ملفاتك.

  3. npm run format يقوم هذا الأمر بإصلاح المشكلات التي تم العثور عليها أثناء عملية التحقق. • يقوم بتشغيل Prettier على مشروعك. • يعيد كتابة ملفاتك لتتوافق مع قواعد التنسيق الخاصة بك. • يقوم بتنظيف المسافات والتنسيق تلقائياً.

  4. npm run lint فكر في هذا الأمر كمدقق إملائي لكودك؛ حيث يقوم ESLint بالبحث عن أخطاء مثل: • أخطاء في بناء الجملة (Syntax mistakes). • المتغيرات غير المستخدمة. • عمليات الاستيراد (imports) المفقودة. • الاستخدام غير الصحيح لـ React Hook.

  5. npm run build يجهز هذا الأمر تطبيقك للعالم الحقيقي، حيث ينشئ مجلد dist. • يقوم بعملية tree shaking لإزالة الكود غير المستخدم. • يقوم بتصغير الكود (minification) عن طريق إزالة المسافات البيضاء وتقصير أسماء المتغيرات. • يقوم بتجميع JavaScript و CSS والأصول (assets) في ملفات محسنة. • هذه الملفات جاهزة للنشر (deployment) على الخادم.

  6. npm run dev يبدأ هذا الأمر خادماً محلياً لتعمل عليه. • يستخدم Native ES Modules لتجميع الملفات فقط عندما يطلبها المتصفح. • يستخدم Hot Module Replacement (HMR) لتحديث موقعك فوراً دون الحاجة لإعادة تحميل الصفحة.

  7. npm run preview هذا هو فحصك النهائي؛ حيث يتجاهل الكود المصدري (source code) وينظر فقط إلى مجلد dist. • يحاكي كيفية عمل تطبيقك على خادم حقيقي. • يساعدك في اكتشاف الأخطاء (bugs) قبل النشر في بيئة الإنتاج (production).

الطرفية (terminal) ليست صندوقاً أسود. فهم هذه الأدوات يساعدك على تصحيح الأخطاء (debug) بشكل أسرع عندما تتعطل الأمور.

ما هو الأمر الذي غير طريقة كتابتك للكود بمجرد أن عرفت كيف يعمل؟ أخبرني في التعليقات أدناه.

المصدر: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba