Jak używać TypeScript w konfiguracji Monorepo

Konfiguracja monorepo pozwala zarządzać wieloma pakietami lub projektami w jednym repozytorium. W przypadku TypeScript ta konfiguracja jest szczególnie wydajna w przypadku udostępniania typów, interfejsów, a nawet narzędzi w różnych pakietach. Ten przewodnik przeprowadzi Cię przez proces konfiguracji TypeScript w środowisku monorepo.

1. Konfigurowanie Monorepo

Aby skonfigurować monorepo, możesz użyć narzędzi takich jak npm workspaces lub yarn workspaces. Te narzędzia pozwalają zarządzać wieloma pakietami w tym samym repozytorium i ułatwiają udostępnianie kodu między projektami.

1.1 Inicjalizacja Monorepo

Najpierw utwórz nowy folder dla swojego monorepo i zainicjuj go poleceniem npm lub yarn.

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

Następnie skonfiguruj obszary robocze w pliku package.json:

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

Ta konfiguracja informuje npm lub yarn, że wszystkie pakiety będą znajdować się w folderze packages.

2. Dodawanie pakietów do Monorepo

Utwórz dwa pakiety w swoim monorepo. W tym przykładzie utworzymy pakiet shared dla kodu wielokrotnego użytku i pakiet web-app dla aplikacji front-end.

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

Wewnątrz każdego pakietu zainicjuj plik package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Dodawanie TypeScript do Monorepo

Następnie skonfigurujemy TypeScript. Zainstaluj TypeScript i niezbędne zależności w katalogu głównym swojego monorepo:

npm install typescript --save-dev

Utwórz plik tsconfig.json na poziomie głównym, aby zdefiniować konfigurację TypeScript dla całego monorepo:

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

Kluczem jest tutaj opcja paths, która umożliwia TypeScript zrozumienie importów z różnych pakietów w monorepozytorium.

4. Konfigurowanie TypeScript w każdym pakiecie

Każdy pakiet potrzebuje własnego tsconfig.json, aby działać poprawnie w monorepo. Oto przykładowa konfiguracja dla pakietu shared:

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

A dla pakietu web-app:

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

Teraz TypeScript może być używany w każdym pakiecie, a konfiguracje są udostępniane z głównego pliku tsconfig.json.

5. Dodawanie kodu TypeScript do pakietów

Dodajmy przykładowy kod TypeScript do obu pakietów. W pakiecie shared utwórz folder src i dodaj plik TypeScript:

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

W index.ts wyeksportuj prostą funkcję:

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

W pakiecie web-app utwórz folder src i plik index.ts:

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

Teraz zaimportuj funkcję współdzieloną:

import { greet } from 'shared';

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

6. Budowa Monorepo

Aby skompilować cały kod TypeScript w monorepo, musimy użyć kompilatora TypeScript. W katalogu głównym monorepo uruchom:

npx tsc --build

To polecenie skompiluje wszystkie pakiety zgodnie z odpowiednimi plikami tsconfig.json.

Wniosek

W tym przewodniku omówiliśmy, jak skonfigurować i używać TypeScript w monorepo. Organizując kod w strukturze monorepo, możesz łatwo udostępniać kod w wielu pakietach, co usprawni proces rozwoju. Dzięki silnemu typowaniu i odniesieniom do projektów TypeScript ta konfiguracja jest idealna dla aplikacji na dużą skalę lub bibliotek współdzielonych.