Erste Schritte mit Nx für Monorepo-Management

Die Verwaltung mehrerer verwandter Projekte kann schnell komplex werden. Mit dem Wachstum Ihrer Codebasis benötigen Sie Tools, die dabei helfen, Konsistenz zu wahren, Code effizient zu teilen und Build-Zeiten zu optimieren. Nx ist eine leistungsstarke Lösung, die speziell für diese Herausforderungen entwickelt wurde.

Diese Anleitung zeigt Ihnen, wie Sie Nx einrichten und verwenden, um ein Monorepo effektiv zu verwalten. Sie lernen die Grundkonzepte kennen, erstellen einen grundlegenden Arbeitsbereich und verstehen, wie die intelligenten Features von Nx Ihren Entwicklungsworkflow dramatisch verbessern können.

Was ist ein Monorepo?

Ein Monorepo ist eine Versionskontrollstrategie, bei der mehrere Projekte in einem einzigen Repository gespeichert werden. Im Gegensatz zu separaten Repositories für jedes Projekt (Polyrepo) enthält ein Monorepo alle verwandten Projekte an einem Ort.

Vorteile von Monorepos

• Code-Sharing - Code zwischen Projekten wiederverwenden ohne komplexes Package-Management
• Atomare Änderungen - Mehrere Projekte in einem einzigen Commit aktualisieren
• Konsistente Tooling - Dieselben Entwicklungsstandards auf alle Projekte anwenden
• Vereinfachte Abhängigkeiten - Projektbeziehungen an einem Ort verwalten
• Koordinierte Releases - Updates zwischen voneinander abhängigen Projekten synchronisieren

Monorepos bringen jedoch Herausforderungen mit sich, wie die Verwaltung von Build-Abhängigkeiten und die Skalierung mit dem Wachstum Ihrer Codebasis. Hier kommt Nx ins Spiel.

Was ist Nx?

Nx ist ein erweiterbares Build-System, das speziell für Monorepo-Management entwickelt wurde. Ursprünglich für Angular-Anwendungen entwickelt, unterstützt Nx jetzt mehrere Frontend- und Backend-Frameworks, einschließlich React, Vue, Node.js und mehr.

Hauptfeatures von Nx

• Intelligentes Caching - Vermeidet das Neuerstellen von unverändertem Code
• Dependency-Graph - Visualisiert Beziehungen zwischen Projekten
• Affected-Befehle - Baut und testet nur das, was von Ihren Änderungen betroffen ist
• Code-Generatoren - Erstellt konsistente Projektstrukturen
• Erweiterbare Plugins - Unterstützt verschiedene Frameworks und Tools

Einrichten Ihres ersten Nx-Arbeitsbereichs

Lassen Sie uns einen grundlegenden Nx-Arbeitsbereich mit einer React-Anwendung und einer geteilten Bibliothek erstellen.

Voraussetzungen

• Node.js (v14 oder später)
• npm oder yarn

Erstellen eines Nx-Arbeitsbereichs

# Nx CLI global installieren (optional)
npm install -g nx

# Neuen Arbeitsbereich erstellen
npx create-nx-workspace@latest my-workspace

Während der Einrichtung werden Sie aufgefordert zu wählen:

1. Welchen Stack zu verwenden (wählen Sie “React”)
2. Anwendungsname (z.B. “web-app”)
3. Style-Format (CSS, SCSS, etc.)
4. Nx Cloud-Einrichtung (optional, aber empfohlen für Team-Projekte)

Dies erstellt einen Arbeitsbereich mit der folgenden Struktur:

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

Verstehen der Arbeitsbereich-Struktur

• apps/ - Enthält Ihre Anwendungen (Frontend, Backend, Mobile)
• libs/ - Enthält geteilte Code-Bibliotheken, die anwendungsübergreifend verwendet werden
• nx.json - Konfiguriert Nx-Verhalten und Plugins
• package.json - Verwaltet Abhängigkeiten für den gesamten Arbeitsbereich

Hinzufügen von Projekten zu Ihrem Arbeitsbereich

Lassen Sie uns nun eine geteilte UI-Bibliothek hinzufügen und sehen, wie Nx Abhängigkeiten verwaltet.

Erstellen einer geteilten Bibliothek

nx g @nx/react:lib ui-components

Dies erstellt eine Bibliothek in libs/ui-components/, die von jeder Anwendung in Ihrem Arbeitsbereich importiert werden kann.

Erstellen einer Komponente in der Bibliothek

nx g @nx/react:component button --project=ui-components --export

Dies generiert eine Button-Komponente in Ihrer UI-Bibliothek und exportiert sie zur Verwendung in anderen Projekten.

Verwenden der Bibliothek in Ihrer Anwendung

Bearbeiten Sie Ihre Anwendung, um die neue Komponente zu verwenden:

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Ausführen von Tasks mit Nx

Nx bietet eine einheitliche Möglichkeit, Tasks in Ihren Projekten auszuführen.

Häufige Befehle

# Entwicklungsserver starten
nx serve web-app

# Anwendung bauen
nx build web-app

# Tests ausführen
nx test web-app

# Code linten
nx lint web-app

Tasks für alle Projekte ausführen

nx run-many --target=build --all

Nutzen der intelligenten Features von Nx

Die Stärke von Nx wird deutlich, wenn Ihr Arbeitsbereich wächst. Lassen Sie uns die wertvollsten Features erkunden.

Visualisierung von Projektabhängigkeiten

nx graph

Dies öffnet eine interaktive Visualisierung Ihrer Projektabhängigkeiten und hilft Ihnen dabei, die Architektur Ihres Monorepos zu verstehen.

Verstehen betroffener Projekte

Wenn Sie Änderungen vornehmen, kann Nx bestimmen, welche Projekte betroffen sind:

nx affected:graph

Dies zeigt nur die Projekte, die von Ihren kürzlichen Änderungen betroffen sind.

Nur das Geänderte bauen

nx affected --target=build

Dies baut nur die Projekte, die von Ihren Änderungen betroffen sind, und spart erhebliche Zeit in CI/CD-Pipelines.

Caching für Geschwindigkeit

Nx cached automatisch Task-Ergebnisse. Wenn Sie dieselbe Task mit denselben Eingaben ausführen, verwendet Nx das gecachte Ergebnis anstatt sie erneut auszuführen:

# Erster Lauf (führt die Task aus)
nx build web-app

# Zweiter Lauf (verwendet Cache)
nx build web-app

Nx-Arbeitsbereich-Konfiguration

Die nx.json-Datei steuert das Verhalten von Nx. Hier ist eine grundlegende Konfiguration:

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Wichtige Einstellungen:

• npmScope - Das Präfix für den Import von Bibliotheken
• affected.defaultBase - Der Git-Branch zum Vergleichen
• cacheableOperations - Tasks, die gecacht werden sollen
• dependsOn - Task-Abhängigkeiten (z.B. Bibliotheken vor Anwendungen bauen)

Praxisbeispiel: Full-Stack-Anwendung

Lassen Sie uns ein vollständigeres Beispiel mit einem React-Frontend und Node.js-Backend erstellen:

# React-App erstellen
nx g @nx/react:app client

# Node.js-API erstellen
nx g @nx/node:app api

# Geteilte Types-Bibliothek erstellen
nx g @nx/js:lib shared-types

Dies gibt Ihnen einen Arbeitsbereich mit:

1. Einer React-Client-Anwendung
2. Einem Node.js-API-Server
3. Einer geteilten Bibliothek für gemeinsame Typen

Sie können beide Anwendungen gleichzeitig ausführen:

nx run-many --target=serve --projects=api,client --parallel

Fazit

Nx macht Monorepo-Management unkompliziert und effizient. Durch die Bewältigung der Komplexität von Projektabhängigkeiten und Build-Optimierung können Sie sich auf das Schreiben von Code konzentrieren, anstatt Ihre Repository-Struktur zu verwalten. Beginnen Sie mit einer einfachen Einrichtung wie in dieser Anleitung gezeigt und erweitern Sie sie, während Ihr Projekt wächst.

FAQs