Frontend Academy · درس

مساحات عمل pnpm لـ Monorepos

أعدّ مساحة عمل pnpm باستخدام pnpm-workspace.yaml في الجذر، وارفع الاعتماديات المشتركة إلى المستوى الأعلى، واستخدم بروتوكول workspace: لربط الحزم المحلية

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

لماذا pnpm؟

pnpm (Performant npm) هو مدير حزم سريع وفعّال في استهلاك مساحة القرص. يخزّن نسخة واحدة من كل حزمة في مخزن عالمي قابل للعنونة حسب المحتوى، ثم ينشئ روابط إليها من node_modules في المشروع. إذا كانت التبعية نفسها مستخدمة في عدة مشاريع، فستُخزَّن نسخة واحدة فقط على القرص.

السرعة وتوفير مساحة القرص

في المستودع الأحادي المعتاد، تكون عمليات تثبيت pnpm أسرع بمقدار 2 إلى 3 مرات من npm أو yarn، وتستخدم مساحة قرص أقل بنحو 70%. وتظهر الفائدة بوضوح في المستودعات الأحادية التي تضم حزمًا كثيرة.

تثبيت pnpm

استخدموا Corepack (المضمّن مع Node 16 والإصدارات الأحدث) أو ثبّتوه عالميًا.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

إعداد مساحة العمل

أنشئوا ملف pnpm-workspace.yaml في الجذر، وأدرجوا فيه المجلدات التي تحتوي على الحزم.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

بنية المشروع

يمتلك كل تطبيق وكل حزمة ملف package.json خاصًا بهما. ويحتوي الجذر على ملف package.json لمساحة العمل، مع تبعيات التطوير المشتركة.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

تثبيت التبعيات

شغّلوا pnpm install في الجذر مرة واحدة. سيثبّت pnpm كل شيء في جميع الحزم، مع رفع التبعيات المشتركة إلى مستوى أعلى.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

بروتوكول workspace:

أشيروا إلى الحزم الداخلية باستخدام workspace:*. يحلّ pnpm هذه الإشارة إلى الحزمة المحلية، ويستبدلها عند النشر بإصدار حقيقي.

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

تشغيل النصوص البرمجية عبر الحزم

يشغّل pnpm -r نصًا برمجيًا في كل حزمة. استخدموا --filter لتحديد مجموعة فرعية.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

حلّ التبعيات بصرامة

يستخدم pnpm، افتراضيًا، روابط رمزية بحيث لا ترى الحزمة إلا التبعيات التي أدرجتها صراحةً في package.json الخاص بها. فلا يحدث تسرب غير مقصود بين الحزم — وهو خلل يسمح به كل من npm وyarn classic.

أنماط hoist

لا يرفع pnpm أي تبعيات إلى مستوى أعلى افتراضيًا. إذا احتاجت تبعية غير مباشرة إلى أن تكون متاحة (مثل TypeScript عالمي)، فأضيفوا إلى .npmrc: shamefully-hoist=true (تجنبوه إن أمكن) أو استخدموا public-hoist-pattern محددًا.

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

يحدّث pnpm update التبعيات ضمن نطاقات semver. أما pnpm update -L فيرقّيها إلى أحدث إصدار (مع تجاهل caret).

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

الدمج مع Turborepo

يوفّر pnpm مساحة العمل والتثبيت، بينما يوفّر Turborepo تنسيق المهام والتخزين المؤقت. ويتكاملان على نحو ممتاز — إذ تستخدم معظم المستودعات الأحادية لـ JS كليهما.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

نصائح CI

خزّنوا مخزن pnpm القابل للعنونة حسب المحتوى (~/.local/share/pnpm/store) مؤقتًا لتسريع CI. استخدموا --frozen-lockfile لإيقاف العملية إذا كان ملف pnpm-lock.yaml سيتغير.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

تحقق سريع

ما الميزة الرئيسية لـ pnpm على npm أو yarn من حيث توفير مساحة القرص في مستودع أحادي؟

مراجعة سريعة: مساحات عمل pnpm

مخزن واحد قابل للعنونة حسب المحتوى مع روابط رمزية = تثبيت سريع ومساحة قرص أقل بنحو 70%. يدرج pnpm-workspace.yaml مجلدات الحزم. ويُستخدم البروتوكول workspace:* للتبعيات الداخلية. يشغّل pnpm -r النصوص البرمجية عبر جميع الحزم، ويُستخدم --filter للمجموعات الفرعية. ويمنع الحل الصارم للتبعيات تسربها. اقرنوه مع Turborepo لتنسيق المهام. استخدموا --frozen-lockfile في CI.

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

هل درس «مساحات عمل pnpm لـ Monorepos» مجاني؟

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

ماذا ستتعلم في «مساحات عمل pnpm لـ Monorepos»؟

أعدّ مساحة عمل pnpm باستخدام pnpm-workspace.yaml في الجذر، وارفع الاعتماديات المشتركة إلى المستوى الأعلى، واستخدم بروتوكول workspace: لربط الحزم المحلية تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «مساحات عمل pnpm لـ Monorepos»؟

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

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

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

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

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