Monorepository mit TypeScript: Code-Organisation und Best Practices

Monorepo mit TypeScript: Effiziente Code-Organisation für skalierbare Projekte

Die Entwicklung moderner Anwendungen erfordert oft die Aufteilung des Codes in mehrere unabhängige Module oder Pakete. Dabei stellt sich ein Dilemma: Soll jedes Paket in einem eigenen Repository (Polyrepo) gespeichert oder alles in einem einzigen (Monorepo) zusammengefasst werden? Für TypeScript-Projekte wird ein Monorepo besonders attraktiv, da es Typenkonsistenz, vereinfachtes Refactoring und zentrales Abhängigkeitsmanagement bietet. In diesem Artikel werden wir untersuchen, wie man ein Monorepo mit TypeScript organisiert, konfiguriert und effektiv in der Entwicklung einsetzt.

Was ist ein Monorepo und warum wird es für TypeScript benötigt?

Ein Monorepo ist ein Ansatz, bei dem der Code mehrerer Projekte (Pakete, Bibliotheken, Microservices) in einem einzigen Repository gespeichert wird. Im Kontext von TypeScript ist dies besonders nützlich, weil:

• Gemeinsame Typen und Interfaces: Sie können gemeinsame Typen in einem Paket definieren und in allen anderen wiederverwenden, wodurch Duplikate und Synchronisationsprobleme vermieden werden.
• Einheitliche Konfiguration: tsconfig.json, Linter und Formatierer werden einmal für das gesamte Projekt konfiguriert.
• Vereinfachtes Refactoring: Änderungen an gemeinsamem Code oder Interfaces wirken sich sofort auf alle abhängigen Pakete aus, und TypeScript zeigt Inkonsistenzen an.
• Atomare Commits: Änderungen, die mehrere Pakete betreffen, können mit einem einzigen Vorgang committet und gepusht werden.

Allerdings erfordert ein Monorepo eine korrekte Organisation, sonst wird es chaotisch. Die wichtigsten Werkzeuge für die Arbeit mit Monorepos in TypeScript sind npm/yarn/pnpm workspaces und TypeScript Project References.

Struktur eines Monorepos mit TypeScript

Betrachten wir eine typische Monorepo-Struktur für eine Webanwendung, bestehend aus Frontend, Backend und einer gemeinsamen Utility-Bibliothek:

my-monorepo/├── packages/│   ├── shared/          # Gemeinsame Typen, Utilities, Konstanten│   │   ├── src/│   │   │   └── index.ts│   │   ├── tsconfig.json│   │   └── package.json│   ├── backend/         # Server-Anwendung (z.B. Express)│   │   ├── src/│   │   │   └── app.ts│   │   ├── tsconfig.json│   │   └── package.json│   └── frontend/        # Client-Anwendung (z.B. React)│       ├── src/│       │   └── App.tsx│       ├── tsconfig.json│       └── package.json├── tsconfig.base.json   # Basis-Konfigurationsdatei für TypeScript├── package.json         # Root package.json (workspaces)└── .gitignore

In dieser Struktur:

• packages/* — Verzeichnis, das alle Pakete des Projekts enthält.
• tsconfig.base.json — gemeinsame TypeScript-Konfiguration, von der alle Pakete erben.
• package.json im Root deklariert die Workspaces.

Einrichtung eines Monorepos: Schritt-für-Schritt-Anleitung

1. Initialisierung des Root-Projekts und Konfiguration der Workspaces

Erstellen Sie das Root-Verzeichnis und die Datei package.json:

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

Der Parameter "private": true verhindert die versehentliche Veröffentlichung des Root-Pakets. "workspaces": ["packages/*"] teilt npm mit, wo die untergeordneten Pakete zu finden sind.

2. Erstellung der Basis-TypeScript-Konfiguration

Datei tsconfig.base.json im Root des Projekts:

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