Frontend Academy · درس

إعداد Monorepo باستخدام Turborepo

نظّم تطبيقات متعددة وحزمًا مشتركة في مستودع واحد، وحدّد مسار Turbo، وخزّن عمليات البناء مؤقتًا لإعادة بناء ما تغيّر فقط

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

ما Monorepo؟

مستودع Git واحد يستضيف عدة مشاريع (تطبيقات ومكتبات) تتشارك الشيفرة. ومن أمثلته: تطبيق ويب + تطبيق جوّال + مكتبة واجهة مستخدم مشتركة + أدوات مساعدة مشتركة في مستودع واحد. وهذا يسهّل مشاركة الشيفرة، وإجراء التغييرات الذرية العابرة للمشاريع، واستخدام مسار CI واحد.

لماذا Turborepo؟

Turborepo هو نظام بناء عالي الأداء لـ monorepos الخاصة بـJavaScript. يخزّن مخرجات المهام مؤقتًا، وينفّذ المهام بالتوازي عبر الحزم، ولا يعيد بناء إلا ما تغيّر. وقد طوّرته Vercel.

إعداد Turborepo

استخدم أداة البدء الرسمية.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json مع Workspaces

يعلن package.json الجذر عن workspaces؛ إذ ينشئ npm/yarn/pnpm روابط رمزية لها، ما يتيح للتطبيقات استيراد الحزم باستخدام أسمائها.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — مسار المهام

حدّد المهام (build وlint وtest وdev) وتبعياتها بين الحزم.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

شرح dependsOn

تعني ^build: قبل بناء هذه الحزمة، ابنِ جميع تبعيات workspace الخاصة بها. لذلك، إذا كان app/web يعتمد على packages/ui، فسيُبنى ui أولًا.

تشغيل المهام

شغّل مهمة عبر monorepo بأكمله. ينفّذ Turbo المهام بالترتيب الطوبولوجي مع التوازي.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

تخزين المخرجات مؤقتًا

يحسب Turbo بصمات المدخلات (الملفات المصدرية + التبعيات + البيئة) ويخزّن المخرجات مؤقتًا. تصبح إعادة التشغيل من دون تغييرات فورية؛ إذ يعيد Turbo تشغيل المخرجات المخزنة مؤقتًا من دون إعادة التنفيذ.

التخزين المؤقت عن بُعد

ادفع ذاكرة التخزين المؤقت إلى خدمة بعيدة (Vercel Remote Cache أو خدمة مستضافة ذاتيًا) لتتمكن أجهزة CI وأعضاء الفريق من مشاركتها؛ يتحمل أول مطور تكلفة البناء، بينما يحصل الآخرون على إصابة في ذاكرة التخزين المؤقت.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

التصفية باستخدام --filter

شغّل مهمة للحزم المطابقة فقط.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

الحزم الداخلية

تستورد الحزم الموجودة في packages/ بعضها بعضًا باستخدام أسمائها. أشر إليها في dependencies بالشكل "@repo/ui": "*" (ومع pnpm استخدم: workspace:*).

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

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

نصائح CI

استخدم turbo run build --filter=...[origin/main] في CI لبناء ما تغيّر فقط منذ الفرع الرئيسي. وبالاقتران مع التخزين المؤقت عن بُعد، تنخفض مدة البناء من دقائق إلى ثوانٍ للحزم التي لم تتغير.

اختبار سريع

ماذا يعني الإدخال ^build في مصفوفة dependsOn الخاصة بمهمة Turbo؟

مراجعة: Turborepo

نظام monorepo لـJavaScript: بنية apps/ + packages/ مع workspaces. يعرّف turbo.json المهام وعلاقات dependsOn. يعني ^build بناء التبعيات أولًا. تجعل ذاكرة التخزين المؤقت المحلية القائمة على البصمات العمل المتكرر فوريًا. وتشارك ذاكرة التخزين المؤقت عن بُعد النتائج بين الفريق وCI. يستهدف --filter مجموعات فرعية. استخدم changed-since لتسريع CI الخاص بطلبات الدمج.

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

هل درس «إعداد Monorepo باستخدام Turborepo» مجاني؟

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

ماذا ستتعلم في «إعداد Monorepo باستخدام Turborepo»؟

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

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

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

كم من الوقت يستغرق درس «إعداد Monorepo باستخدام Turborepo»؟

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

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

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

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

التصميم الذري: الذرات والجزيئات والكائنات
إعداد Monorepo باستخدام Turborepo
الواجهات الأمامية المصغّرة: Module Federation
هيكل المجلدات القائم على الميزات

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