كيفية استخدام TypeScript في إعداد Monorepo

يتيح لك إعداد مستودع واحد إدارة حزم أو مشاريع متعددة في مستودع واحد. مع TypeScript، يعد هذا الإعداد قويًا بشكل خاص لمشاركة الأنواع والواجهات وحتى الأدوات المساعدة عبر حزم مختلفة. سيرشدك هذا الدليل إلى كيفية إعداد TypeScript في بيئة مستودع واحد.

1. إعداد المستودع الأحادي

لإعداد مستودع أحادي، يمكنك استخدام أدوات مثل npm workspaces أو yarn workspaces. تتيح لك هذه الأدوات إدارة حزم متعددة في نفس المستودع وتسهل مشاركة التعليمات البرمجية عبر المشاريع.

1.1 تهيئة مستودع أحادي

أولاً، قم بإنشاء مجلد جديد لمستودعك الأحادي وقم بتشغيله باستخدام npm أو yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

بعد ذلك، قم بتكوين مساحات العمل في package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

يخبر هذا الإعداد npm أو yarn أن جميع الحزم ستعيش داخل المجلد packages.

2. إضافة الحزم إلى المستودع الأحادي

قم بإنشاء حزمتين في مستودعك الأحادي. في هذا المثال، سنقوم بإنشاء حزمة shared للكود القابل لإعادة الاستخدام وحزمة web-app لتطبيق الواجهة الأمامية.

mkdir -p packages/shared
mkdir -p packages/web-app

داخل كل حزمة، قم بتهيئة package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. إضافة TypeScript إلى Monorepo

بعد ذلك، سنقوم بإعداد TypeScript. قم بتثبيت TypeScript والتبعيات الضرورية في جذر مستودعك الأحادي:

npm install typescript --save-dev

قم بإنشاء ملف tsconfig.json على مستوى الجذر لتحديد تكوين TypeScript لمستودع monorepo بأكمله:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

المفتاح هنا هو خيار paths، والذي يسمح لـ TypeScript بفهم الواردات من حزم مختلفة في المستودع الأحادي.

4. تكوين TypeScript في كل حزمة

تحتاج كل حزمة إلى ملف tsconfig.json خاص بها لتعمل بشكل صحيح في المستودع الأحادي. فيما يلي مثال لتكوين الحزمة shared:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

وللحزمة web-app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

الآن، يمكن استخدام TypeScript في كل حزمة، ويتم مشاركة التكوينات من الجذر tsconfig.json.

5. إضافة كود TypeScript إلى الحزم

دعنا نضيف بعض أكواد TypeScript النموذجية إلى الحزمتين. في الحزمة shared، أنشئ مجلد src وأضف ملف TypeScript:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

في index.ts، قم بتصدير دالة بسيطة:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

في الحزمة web-app، قم بإنشاء مجلد src وملف index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

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

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. بناء المستودع الأحادي

لتجميع كل أكواد TypeScript في مستودع monorepo، نحتاج إلى استخدام مُجمِّع TypeScript. في جذر مستودع monorepo، قم بتشغيل:

npx tsc --build

سيقوم هذا الأمر بتجميع كافة الحزم باتباع ملفات tsconfig.json الخاصة بها.

خاتمة

في هذا الدليل، تناولنا كيفية إعداد TypeScript واستخدامه في مستودع أحادي. من خلال تنظيم الكود الخاص بك في بنية مستودع أحادي، يمكنك بسهولة مشاركة الكود عبر حزم متعددة، مما يجعل عملية التطوير الخاصة بك أكثر كفاءة. بفضل الكتابة القوية لـ TypeScript ومراجع المشروع، يعد هذا الإعداد مثاليًا للتطبيقات واسعة النطاق أو المكتبات المشتركة.