Monorepo mit TypeScript: Code-Organisation für Anfänger

Monorepo mit TypeScript: Code-Organisation für Anfänger

Die Entwicklung moderner Anwendungen mit TypeScript erfordert oft die Verwaltung mehrerer miteinander verbundener Pakete (z. B. einer Komponentenbibliothek, eines Backend-Dienstes und von Hilfsprogrammen). Anstatt jedes Paket in einem separaten Repository (Multirepo) zu speichern, entscheiden sich viele Teams für ein Monorepo – ein einziges Repository, das alle Projekte enthält. In diesem Artikel erklären wir, wie Sie ein Monorepo mit TypeScript organisieren, auch wenn Sie Anfänger sind.

Was ist ein Monorepo und warum wird es benötigt?

Ein Monorepo ist ein Ansatz, bei dem der Code mehrerer Projekte (Pakete, Module) in einem einzigen Repository gespeichert wird. Das bedeutet nicht, dass alle Projekte zu einem einzigen Haufen verschmelzen: Sie bleiben logisch getrennt, befinden sich aber unter einem Dach.

Vorteile für TypeScript-Projekte:

• Einheitliche Abhängigkeitsversionen. Sie vermeiden Situationen, in denen verschiedene Pakete unterschiedliche Versionen von TypeScript oder derselben Bibliothek verwenden.
• Einfaches Refactoring. Die Änderung einer gemeinsamen Schnittstelle oder eines Typs an einer Stelle wird sofort in allen abhängigen Paketen aktualisiert.
• Vereinfachte Veröffentlichung. Tools für Monorepos (z. B. Lerna oder Nx) helfen dabei, nur geänderte Pakete automatisch zu veröffentlichen.
• Gemeinsame Konfiguration. Sie können eine einzige tsconfig.json für alle Pakete haben und diese bei Bedarf überschreiben.

Tools zur Erstellung eines Monorepos

Für die Arbeit mit einem Monorepo in TypeScript gibt es mehrere beliebte Tools:

• npm Workspaces – eine integrierte Funktion von npm ab Version 7. Einfach und effektiv.
• Yarn Workspaces – eine ähnliche Funktion im Paketmanager Yarn.
• Lerna – ein klassisches Tool, das oft zusätzlich zu npm oder Yarn Workspaces verwendet wird.
• Nx – ein leistungsstarkes System für Monorepos mit erweiterten Caching- und Codegenerierungsfunktionen.
• Turborepo – ein modernes Tool von Vercel, das auf Geschwindigkeit und Einfachheit ausgelegt ist.

In dieser Anleitung verwenden wir npm Workspaces, da dies die einfachste Methode ist, die keine Installation zusätzlicher globaler Tools erfordert.

Schritt-für-Schritt-Einrichtung eines Monorepos mit TypeScript

1. Erstellen der Root-Struktur

Beginnen Sie mit der Erstellung des Root-Ordners Ihres Monorepos und der Initialisierung der package.json:

mkdir my-monorepocd my-monoreponpm init -y

Bearbeiten Sie nun die Root-package.json, indem Sie das Feld workspaces hinzufügen. Dies teilt npm mit, wo Ihre Pakete zu finden sind:

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

Das Flag "private": true verhindert die versehentliche Veröffentlichung des Root-Pakets auf npm.

2. Erstellen der Pakete

Erstellen Sie die Ordnerstruktur für Ihre Pakete. Eine typische Struktur sieht wie folgt aus:

my-monorepo/├── packages/│   ├── utils/          # Gemeinsame Hilfsprogramme│   ├── ui/             # Komponentenbibliothek│   └── backend/        # Serveranwendung├── package.json└── tsconfig.json

Erstellen Sie den Ordner packages und darin Ordner für jedes Paket. Jedes Paket muss seine eigene package.json haben. Zum Beispiel für das Paket utils:

mkdir -p packages/utilscd packages/utilsnpm init -y

Bearbeiten Sie packages/utils/package.json, indem Sie den Namen und ggf. die Version hinzufügen:

{  "name": "@my-project/utils",  "version": "1.0.0",  "main": "dist/index.js",  "types": "dist/index.