כיצד להשתמש ב-TypeScript בהגדרת Monorepo

הגדרת monorepo מאפשרת לך לנהל מספר חבילות או פרויקטים במאגר יחיד. עם TypeScript, הגדרה זו חזקה במיוחד לשיתוף סוגים, ממשקים ואפילו כלי עזר בין חבילות שונות. מדריך זה ידריך אותך כיצד להגדיר TypeScript בסביבת monorepo.

1. הגדרת המונורפו

כדי להגדיר monorepo, אתה יכול להשתמש בכלים כמו npm סביבות עבודה או yarn סביבות עבודה. כלים אלה מאפשרים לך לנהל מספר חבילות באותו מאגר ולהקל על שיתוף קוד בין פרויקטים.

1.1 אתחול מונורפו

ראשית, צור תיקייה חדשה עבור monorepo שלך ואתחול אותה עם 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. הוספת חבילות למונורפו

צור שתי חבילות ב-monorepo שלך. עבור דוגמה זו, ניצור חבילת 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 משלה כדי לעבוד כמו שצריך ב-monorepo. להלן תצורה לדוגמה עבור החבילה 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 במונורפו, עלינו להשתמש במהדר TypeScript. בשורש המונורפו, הפעל:

npx tsc --build

פקודה זו תרכיב את כל החבילות על ידי מעקב אחר קבצי tsconfig.json שלהם.

מַסְקָנָה

במדריך זה, כיסינו כיצד להגדיר ולהשתמש ב-TypeScript ב-monorepo. על ידי ארגון הקוד שלך במבנה monorepo, אתה יכול בקלות לשתף קוד על פני מספר חבילות, מה שהופך את תהליך הפיתוח שלך ליעיל יותר. עם ההקלדה וההפניות החזקות של TypeScript, הגדרה זו מושלמת ליישומים בקנה מידה גדול או ספריות משותפות.