Frontend Academy · Lektion

Monorepo-Einrichtung mit Turborepo

Organisieren Sie mehrere Apps und gemeinsam genutzte Pakete in einem einzigen Repository, definieren Sie eine Turbo-Pipeline und cachen Sie Builds, sodass nur geänderte Teile neu erstellt werden.

Lektion 2 von 414 Schritte

Monorepo-Einrichtung mit Turborepo ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Monorepo?

Ein einzelnes Git-Repository, das mehrere Projekte (Apps, Bibliotheken) enthält, die Code gemeinsam nutzen. Beispiele: Web-App + Mobile-App + gemeinsame UI-Bibliothek + gemeinsame Utils in einem Repository. Das erleichtert die gemeinsame Nutzung von Code und atomare, übergreifende Änderungen und ermöglicht eine einzige CI-Pipeline.

Warum Turborepo?

Turborepo ist ein leistungsstarkes Build-System für JavaScript-Monorepos. Es cached Task-Ausgaben, führt Aufgaben paketübergreifend parallel aus und baut nur neu, was sich geändert hat. Entwickelt von Vercel.

Turborepo einrichten

Verwenden Sie das offizielle Starterprojekt.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json mit Workspaces

Die package.json im Root deklariert Workspaces — npm/yarn/pnpm verknüpft sie per Symlink, sodass Apps Pakete über ihren Namen importieren können.

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

turbo.json — Die Pipeline

Definieren Sie Aufgaben (build, lint, test, dev) und ihre Abhängigkeiten zwischen den Paketen.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

dependsOn erklärt

^build bedeutet: Bevor dieses Paket gebaut wird, werden alle zugehörigen Workspace-Abhängigkeiten gebaut. Wenn app/web also von packages/ui abhängt, wird ui zuerst gebaut.

Aufgaben ausführen

Führen Sie eine Aufgabe im gesamten Monorepo aus. Turbo arbeitet mit Parallelisierung in topologischer Reihenfolge.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Ausgaben cachen

Turbo bildet einen Hash aus Eingaben (Quelldateien + Abhängigkeiten + Umgebung) und cached die Ausgaben. Eine erneute Ausführung ohne Änderungen ist sofort abgeschlossen — Turbo gibt die gecachte Ausgabe wieder aus, ohne die Aufgabe erneut auszuführen.

Remote-Caching

Übertragen Sie den Cache an einen Remote-Cache (Vercel Remote Cache, selbst gehostet), damit CI-Rechner und Teammitglieder ihn gemeinsam nutzen können — der erste Entwickler trägt die Kosten des Builds, alle anderen erhalten einen Cache-Treffer.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Mit --filter filtern

Führen Sie eine Aufgabe nur für passende Pakete aus.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Interne Pakete

Pakete in packages/ importieren einander über ihren Namen. Referenzieren Sie sie in den Abhängigkeiten als "@repo/ui": "*" (bei pnpm: workspace:*).

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "*",
    "@repo/utils": "*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

CI-Tipps

Verwenden Sie turbo run build --filter=...[origin/main] in CI, um nur zu bauen, was sich seit dem main-Branch geändert hat. Zusammen mit dem Remote-Cache sinkt die Build-Zeit für unveränderte Pakete von Minuten auf Sekunden.

Kurzer Check

Was bedeutet der Eintrag ^build im dependsOn-Array einer Turbo-Aufgabe?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Turborepo

JavaScript-Monorepo-System: Struktur mit apps/ und packages/ sowie Workspaces. turbo.json definiert Aufgaben und dependsOn-Beziehungen. ^build = Abhängigkeiten zuerst bauen. Der hashbasierte lokale Cache macht wiederholte Arbeit sofort verfügbar. Der Remote-Cache teilt Cache-Treffer im Team und in CI. --filter zielt auf Teilmengen. Verwenden Sie changed-since für schnelle PR-CI.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Monorepo-Einrichtung mit Turborepo“ kostenlos?

Ja — der vollständige Text von „Monorepo-Einrichtung mit Turborepo“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Monorepo-Einrichtung mit Turborepo“?

Organisieren Sie mehrere Apps und gemeinsam genutzte Pakete in einem einzigen Repository, definieren Sie eine Turbo-Pipeline und cachen Sie Builds, sodass nur geänderte Teile neu erstellt werden. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Monorepo-Einrichtung mit Turborepo“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Atomic Design: Atome, Moleküle und Organismen
Monorepo-Einrichtung mit Turborepo
Micro-frontends: Module Federation
Featurebasierte Ordnerstruktur

← Zurück zu Frontend Academy