Frontend Academy · درس

npm وpackage.json: الاعتماديات والبرامج النصية

هيّئ مشروعًا باستخدام npm init، وأضف اعتماديات التشغيل والتطوير، واكتب برامج npm النصية القابلة لإعادة الاستخدام، وافهم semver.

npm وpackage.json: الاعتماديات والبرامج النصية درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هو npm؟

يدير npm (Node Package Manager) تبعيات المشروع والبرامج النصية. ويقرأ package.json لمعرفة ما يجب تثبيته، ويكتب package-lock.json لتسجيل الإصدارات الدقيقة. وقد نُشرت أكثر من مليوني حزمة في سجل npm.

تهيئة مشروع

ينشئ npm init -y ملف package.json بقيم افتراضية. وتقبل الراية -y جميع القيم الافتراضية من دون عرض مطالبات.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

ملف package.json

الحقول الأساسية: name وversion وdescription وmain (نقطة الدخول) وscripts وdependencies وdevDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

تثبيت الحزم

يضيف npm install package الحزمة إلى dependencies. ويضيف npm install -D package الحزمة إلى devDependencies (ولا تكون مطلوبة في بيئة الإنتاج). أما npm install من دون وسيطات، فيثبّت كل ما هو موجود في package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

الإصدار الدلالي

يستخدم npm نظام semver: major.minor.patch. وتسمح البادئة ^ بالتحديثات المتوافقة (ضمن الإصدار major نفسه). وتسمح البادئة ~ بتحديثات patch فقط. أما الإصدارات الدقيقة فلا تحتوي على بادئة.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

برامج npm النصية

عرّفوا الأوامر في الحقل scripts. وشغّلوها باستخدام npm run scriptname. أما البرامج النصية المدمجة (test وstart)، فتُشغّل مباشرةً باستخدام npm test أو npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

‏npm run مقابل npx

يشغّل npm run برنامجًا نصيًا من package.json. وينفّذ npx حزمة من node_modules، أو ينزّلها ويشغّلها مؤقتًا — وهو مفيد للأوامر التي تُنفّذ مرة واحدة، مثل npx create-vite@latest.

package-lock.json

يسجل package-lock.json الإصدار الدقيق لكل حزمة مثبّتة (وتبعياتها الانتقالية). أضيفوه إلى المستودع لضمان استخدام جميع المطورين وCI للإصدارات نفسها. ولا تعدّلوه يدويًا مطلقًا.

node_modules و.gitignore

لا تلتزموا بمجلد node_modules في المستودع مطلقًا — فقد يبلغ حجمه مئات الميغابايت. أضيفوه دائمًا إلى .gitignore. ويمكن لأي شخص استعادته باستخدام npm install.

# .gitignore
node_modules/

تحديث الحزم وإزالتها

يحدّث npm update الحزم ضمن نطاق semver الخاص بها. ويعرض npm outdated ما يمكن تحديثه. وتزيل npm uninstall package حزمةً.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm أم yarn أم pnpm

من بدائل npm: yarn (أسرع، ويدعم مساحات العمل وPlug'n'Play)، وpnpm (مخزن روابط رمزية موفّر للمساحة، وتبعيات صارمة، والأسرع للمستودعات الأحادية). الأوامر الأساسية متشابهة في الأدوات الثلاث.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

تحقق سريع

ماذا يفعل الخيار -D عند تشغيل npm install -D jest؟

مراجعة: npm و package.json

ينشئ npm init ملف package.json. يضيف npm install التبعيات. يُستخدم -D مع devDependencies. تعني ^ في semver إمكانية إجراء تحديثات متوافقة. تشغّل Scripts الأوامر باستخدام npm run. يسجّل package-lock.json الإصدارات الدقيقة — لذا يجب إيداعه في المستودع. يجب إضافة node_modules إلى .gitignore. يشغّل npx أوامر الحزم لمرة واحدة.

الأسئلة الشائعة

هل درس «npm وpackage.json: الاعتماديات والبرامج النصية» مجاني؟

نعم — نص درس «npm وpackage.json: الاعتماديات والبرامج النصية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «npm وpackage.json: الاعتماديات والبرامج النصية»؟

هيّئ مشروعًا باستخدام npm init، وأضف اعتماديات التشغيل والتطوير، واكتب برامج npm النصية القابلة لإعادة الاستخدام، وافهم semver. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «npm وpackage.json: الاعتماديات والبرامج النصية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

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

جميع الدروس في هذه الدورة

وحدات ES: import وexport وdynamic import
npm وpackage.json: الاعتماديات والبرامج النصية
Vite: خادم التطوير والبناء
مفاهيم التجميع: tree shaking وتقسيم الشيفرة

← العودة إلى Frontend Academy