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

مونوريبو مع TypeScript: تنظيم فعال للكود للمشاريع القابلة للتوسع

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

ما هو المونوريبو ولماذا هو ضروري لـ TypeScript؟

المونوريبو (monorepo) هو نهج يتم فيه تخزين كود عدة مشاريع (حزم، مكتبات، خدمات مصغرة) في مستودع واحد. في سياق TypeScript، هذا مفيد بشكل خاص للأسباب التالية:

• الأنواع والواجهات المشتركة: يمكنك تعريف أنواع مشتركة في حزمة واحدة وإعادة استخدامها في جميع الحزم الأخرى، مما يتجنب التكرار وعدم التزامن.
• إعدادات موحدة: يتم إعداد tsconfig.json، وأدوات التحليل (linters) وأدوات التنسيق (formatters) مرة واحدة للمشروع بأكمله.
• إعادة هيكلة مبسطة: ينعكس تغيير الكود أو الواجهة المشتركة فورًا على جميع الحزم التابعة، وسيقوم TypeScript بالإشارة إلى أي تناقضات.
• الالتزامات الذرية (Atomic Commits): يمكن تنفيذ التغييرات التي تؤثر على حزم متعددة ودفعها بعملية واحدة.

ومع ذلك، يتطلب المونوريبو تنظيمًا صحيحًا، وإلا فإنه يتحول إلى فوضى. الأدوات الرئيسية للعمل مع المونوريبو في TypeScript هي npm/yarn/pnpm workspaces و TypeScript Project References.

هيكل المونوريبو مع TypeScript

لننظر إلى هيكل نموذجي لمونوريبو لتطبيق ويب يتكون من واجهة أمامية (frontend)، وواجهة خلفية (backend)، ومكتبة أدوات مشتركة:

my-monorepo/├── packages/│   ├── shared/          # أنواع وأدوات وثوابت مشتركة│   │   ├── src/│   │   │   └── index.ts│   │   ├── tsconfig.json│   │   └── package.json│   ├── backend/         # تطبيق الخادم (مثل Express)│   │   ├── src/│   │   │   └── app.ts│   │   ├── tsconfig.json│   │   └── package.json│   └── frontend/        # تطبيق العميل (مثل React)│       ├── src/│       │   └── App.tsx│       ├── tsconfig.json│       └── package.json├── tsconfig.base.json   # ملف إعدادات TypeScript الأساسي├── package.json         # package.json الجذر (workspaces)└── .gitignore

في هذا الهيكل:

• packages/* — الدليل الذي يحتوي على جميع حزم المشروع.
• tsconfig.base.json — إعدادات TypeScript المشتركة التي ترث منها جميع الحزم.
• package.json في الجذر يعلن عن مساحات العمل (workspaces).

إعداد المونوريبو: دليل خطوة بخطوة

1. تهيئة المشروع الجذر وإعداد Workspaces

قم بإنشاء الدليل الجذر وملف package.json:

{  "name": "my-monorepo",  "private": true,  "workspaces": [    "packages/*"  ],  "scripts": {    "build": "npm run build --workspaces",    "lint": "eslint packages/*/src --ext .ts,.tsx",    "test": "jest"  }}

المعامل "private": true يمنع النشر العرضي للحزمة الجذرية. "workspaces": ["packages/*"] يوجه npm إلى مكان البحث عن الحزم الفرعية.

2. إنشاء إعدادات TypeScript الأساسية

ملف tsconfig.base.json في جذر المشروع:

{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "node",    "strict": true,    "esModuleInterop": true,    "ski