Monorepository mit TypeScript: Code-Organisation in der Praxis

Monorepo mit TypeScript: Code-Organisation in der Praxis

Moderne Frontend- und Backend-Entwicklung steht zunehmend vor dem Problem, mehrere miteinander verbundene Projekte zu verwalten. Wenn die Anzahl der Pakete, Bibliotheken und Anwendungen wächst, beginnt der traditionelle Ansatz mit separaten Repositories (Multi-Repo) die Entwicklung zu bremsen: Code-Duplizierung, Schwierigkeiten bei der Versionssynchronisation und lange Review-Zyklen. Die Lösung ist ein Monorepo, insbesondere in Kombination mit TypeScript. In diesem Artikel analysieren wir praktische Aspekte der Code-Organisation in einem TypeScript-Monorepo: von der Tool-Auswahl bis zu konkreten Beispielen für Struktur und Konfiguration.

Was ist ein Monorepo und warum brauchen TypeScript-Projekte es?

Ein Monorepo ist ein Ansatz, bei dem der Code mehrerer Projekte (Pakete, Bibliotheken, Dienste) in einem einzigen Git-Repository gespeichert wird. Für TypeScript ist dies besonders relevant, da die streng typisierte Sprache die Wiederverwendung gemeinsamer Typen und Interfaces zwischen verschiedenen Teilen des Systems erleichtert.

Die Hauptvorteile eines Monorepos mit TypeScript:

• Einheitliche Abhängigkeitsversionen – die Situation, in der verschiedene Projekte unterschiedliche Versionen derselben Bibliothek verwenden, wird vermieden.
• Code-Wiederverwendung – gemeinsame Typen, Hilfsfunktionen und Konfigurationen sind für alle Pakete leicht zugänglich.
• Atomare Commits – Änderungen, die mehrere Pakete betreffen, können zusammen committet werden.
• Vereinfachtes CI/CD – eine einzige Pipeline zum Bauen und Testen aller Teile.

Allerdings erfordert ein Monorepo Disziplin bei der Code-Organisation. Ohne eine richtige Struktur wird es zu einer "Müllhalde". TypeScript hilft, Ordnung zu schaffen, dank strenger Typisierung und eines modularen Systems.

Auswahl des Tools zur Verwaltung des Monorepos

Es gibt mehrere beliebte Tools für die Arbeit mit Monorepos. Betrachten wir die beiden am weitesten verbreiteten für TypeScript: Nx und Turborepo.

Nx ist ein leistungsstarkes System mit Unterstützung für Monorepos, Code-Generierung und erweitertem Caching. Es eignet sich hervorragend für große Projekte mit vielen Paketen.

Turborepo ist ein leichteres und schnelleres Tool von Vercel, das auf Einfachheit ausgerichtet ist. Es ist ideal für mittlere Projekte und Teams, die eine minimale Konfiguration wünschen.

Beispiel einer grundlegenden Konfiguration mit Turborepo:

// turbo.json{  "$schema": "https://turbo.build/schema.json",  "pipeline": {    "build": {      "dependsOn": ["^build"],      "outputs": ["dist/**"]    },    "test": {      "dependsOn": ["build"]    },    "lint": {}  }}

Für TypeScript ist die Konfiguration von tsconfig.json mit Unterstützung für project references obligatorisch. Dies ermöglicht es dem Compiler, Abhängigkeiten zwischen Paketen zu verstehen.

// tsconfig.base.json{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "bundler",    "strict": true,    "composite": true,    "declaration": true,    "declarationMap": true,    "sourceMap": true,    "outDir": "./dist",    "rootDir": "./src"  }}

Praktische Organisation der Monorepo-Struktur

Das Schlüsselprinzip ist die Aufteilung des Codes in logische Schichten. Betrachten wir eine typische Struktur für ein TypeScript-Monorepo mit einer Webanwendung und einem Backend:

monorepo/├── apps/│   ├── web/          # Frontend-Anwendung (React, Vue, etc.)│   └── api/          # Backend-Service (Express, NestJS)├── packages/│   ├── shared/       # Gemeinsame Typen und Interfaces│   ├── utils/        # Hilfsfunktionen│   ├── ui/           # UI-Komponenten (falls verwendet)│   └── config/       # Gemeinsame Konfigurationen (eslint, tsconfig)├── tools/            # Skripte und Tools für CI/CD├── turbo.json├── package.json└── tsconfig.