TypeScript Academy · Lektion

pnpm-Workspaces mit TypeScript

Konfigurieren Sie mit pnpm und einer gemeinsamen tsconfig ein Monorepo.

pnpm-Workspaces mit TypeScript ist eine kostenlose TypeScript 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 TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind pnpm Workspaces?

Mit pnpm Workspaces können Sie mehrere Pakete in einem einzigen Repository mit einer gemeinsamen node_modules-Struktur verwalten. Das reduziert den Speicherbedarf und ermöglicht paketübergreifende Importe.

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

Workspace-Struktur erstellen

Ein typisches pnpm-Monorepo enthält packages/ für gemeinsam verwendete Bibliotheken und apps/ für bereitstellbare Anwendungen.

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

Root-tsconfig.json

Die Root-tsconfig legt grundlegende Optionen fest und referenziert alle Workspace-Pakete.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

tsconfig auf Paketebene

Jedes Paket erweitert die Root-Konfiguration und legt sein eigenes composite und outDir fest.

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Paketübergreifende Abhängigkeiten installieren

Verwenden Sie pnpm add mit dem Workspace-Protokoll, um Pakete innerhalb des Monorepos zu verknüpfen.

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

TypeScript-Pfadauflösung

Fügen Sie Aliase über paths in der Root-tsconfig hinzu, damit TypeScript Workspace-Pakete während der Entwicklung auf ihren Quellcode auflöst.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

Alle Pakete bauen

Verwenden Sie tsc --build im Stammverzeichnis, um alle Composite-Pakete in der Reihenfolge ihrer Abhängigkeiten zu bauen.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Skripte paketübergreifend ausführen

Mit pnpm -r (rekursiv) oder --filter führen Sie Skripte in allen passenden Paketen aus.

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

Gemeinsame ESLint- und Prettier-Konfiguration

Bewahren Sie die Linting-Konfigurationen in einem gemeinsamen Paket auf und erweitern Sie sie in jedem Paket, um einen einheitlichen Codestil im gesamten Monorepo sicherzustellen.

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Turborepo-Integration

Fügen Sie Turborepo hinzu, um Build-, Test- und Lint-Aufgaben zu cachen und zu parallelisieren. Verwenden Sie dabei den pnpm-Workspace-Graphen für die Reihenfolge der Abhängigkeiten.

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

Zusammenfassung: pnpm Workspaces mit TypeScript

pnpm Workspaces und TypeScript Project References bilden eine leistungsfähige Monorepo-Struktur: gemeinsame node_modules, paketübergreifende Importe über workspace:* und schnelle Builds mit tsc --build.

Kurze Überprüfung

Welche Datei legt fest, welche Verzeichnisse pnpm-Workspace-Pakete sind?

Das haben Sie gelernt

pnpm Workspaces mit TypeScript Project References ermöglichen ein effizientes Monorepo mit gemeinsamen node_modules, paketübergreifender Verknüpfung über das Workspace-Protokoll und inkrementellen Builds. Fügen Sie Turborepo für Caching und Parallelisierung hinzu.

Häufig gestellte Fragen

Ist die Lektion „pnpm-Workspaces mit TypeScript“ kostenlos?

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

Was lerne ich in „pnpm-Workspaces mit TypeScript“?

Konfigurieren Sie mit pnpm und einer gemeinsamen tsconfig ein Monorepo. Du übst TypeScript 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 TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript 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 „pnpm-Workspaces mit TypeScript“?

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 TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript 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

TypeScript-Projektreferenzen erklärt
pnpm-Workspaces mit TypeScript
Strategie für ein gemeinsames Typenpaket
Inkrementelle Builds und Caching in Monorepos

← Zurück zu TypeScript Academy