مستودع أحادي مع TypeScript: تنظيم الكود عمليًا

مستودع أحادي مع TypeScript: تنظيم الكود عمليًا

يواجه تطوير الواجهات الأمامية والخلفية الحديثة بشكل متزايد مشكلة إدارة عدة مشاريع مترابطة. عندما يزداد عدد الحزم والمكتبات والتطبيقات، يبدأ النهج التقليدي مع المستودعات المنفصلة (multi-repo) في إبطاء التطوير: تكرار الكود، صعوبات في مزامنة الإصدارات، ودورات مراجعة طويلة. الحل هو المستودع الأحادي (monorepo)، خاصةً مع TypeScript. في هذه المقالة، سنستعرض الجوانب العملية لتنظيم الكود في مستودع أحادي باستخدام TypeScript: من اختيار الأدوات إلى أمثلة محددة للهيكل والإعداد.

ما هو المستودع الأحادي ولماذا هو ضروري لمشاريع TypeScript؟

المستودع الأحادي هو نهج يتم فيه تخزين كود عدة مشاريع (حزم، مكتبات، خدمات) في مستودع Git واحد. هذا مهم بشكل خاص لـ TypeScript، لأن لغة الكتابة الصارمة تسمح بإعادة استخدام الأنواع والواجهات المشتركة بسهولة بين أجزاء النظام المختلفة.

المزايا الرئيسية للمستودع الأحادي مع TypeScript:

• إصدار موحد للتبعيات - يتم استبعاد الموقف الذي تستخدم فيه مشاريع مختلفة إصدارات مختلفة من نفس المكتبة.
• إعادة استخدام الكود - الأنواع المشتركة والأدوات المساعدة والتكوينات متاحة بسهولة لجميع الحزم.
• الالتزامات الذرية - يمكن الالتزام بالتغييرات التي تؤثر على عدة حزم معًا.
• تبسيط CI/CD - خط أنابيب واحد لبناء واختبار جميع الأجزاء.

ومع ذلك، يتطلب المستودع الأحادي انضباطًا في تنظيم الكود. بدون هيكل صحيح، يتحول إلى "مزبلة". يساعد TypeScript في ترتيب الأمور بفضل الكتابة الصارمة والنظام المعياري.

اختيار أداة إدارة المستودع الأحادي

هناك العديد من الأدوات الشائعة للعمل مع المستودعات الأحادية في السوق. دعنا ننظر إلى اثنتين من أكثرها شيوعًا لـ TypeScript: Nx و Turborepo.

Nx هو نظام قوي يدعم المستودعات الأحادية، وتوليد الكود، والتخزين المؤقت المتقدم. إنه مناسب تمامًا للمشاريع الكبيرة التي تحتوي على العديد من الحزم.

Turborepo هي أداة أخف وأسرع من Vercel، تركز على البساطة. إنها مثالية للمشاريع والفرق المتوسطة التي تريد الحد الأدنى من التكوين.

مثال على الإعداد الأساسي باستخدام Turborepo:

// turbo.json{  "$schema": "https://turbo.build/schema.json",  "pipeline": {    "build": {      "dependsOn": ["^build"],      "outputs": ["dist/**"]    },    "test": {      "dependsOn": ["build"]    },    "lint": {}  }}

بالنسبة لـ TypeScript، من الضروري إعداد tsconfig.json مع دعم مراجع المشروع (project references). وهذا يسمح للمترجم بفهم التبعيات بين الحزم.

// tsconfig.base.json{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "bundler",    "strict": true,    "composite": true,    "declaration": true,    "declarationMap": true,    "sourceMap": true,    "outDir": "./dist",    "rootDir": "./src"  }}

تنظيم هيكل المستودع الأحادي عمليًا

المبدأ الأساسي هو تقسيم الكود إلى طبقات منطقية. دعنا نلقي نظرة على هيكل نموذجي لمستودع أحادي TypeScript مع تطبيق ويب وخلفية:

monorepo/├── apps/│   ├── web/          # تطبيق الواجهة الأمامية (React, Vue, etc.)│   └── api/          # خدمة الخلفية (Express, NestJS)├── packages/│   ├── shared/       # الأنواع والواجهات المشتركة│   ├── utils/        # الدوال المساعدة│   ├── ui/           # مكونات واجهة المستخدم (إذا تم استخدامها)│   └── config/       # التكوينات المشتركة (eslint, tsconfig)├── tools/            # البرامج النصية والأدوات لـ CI/CD├── turbo.json├── package.json└── tsconfig.