כיצד להשתמש ב-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, הגדרה זו מושלמת ליישומים בקנה מידה גדול או ספריות משותפות.