0Pricing
Frontend Academy · Lektion

pnpm Workspaces für Monorepos

Richten Sie einen pnpm-Workspace mit einer pnpm-workspace.yaml im Stammverzeichnis ein, heben Sie gemeinsam genutzte Abhängigkeiten ins Root-Verzeichnis und verknüpfen Sie lokale Pakete mit dem workspace:-Protokoll.

pnpm Workspaces für Monorepos ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum pnpm?

pnpm (Performant npm) ist ein schneller, platzsparender Paketmanager. Es speichert eine einzige Kopie jedes Pakets in einem globalen inhaltsadressierbaren Store und verknüpft Projekte aus deren node_modules damit. Dieselbe Abhängigkeit in mehreren Projekten bedeutet also nur eine Kopie auf der Festplatte.

Geschwindigkeit und Speicherplatzersparnis

In einem typischen Monorepo sind Installationen mit pnpm 2- bis 3-mal schneller als mit npm/yarn und benötigen etwa 70 % weniger Speicherplatz. Besonders bei Monorepos mit vielen Paketen ergibt sich ein großer Vorteil.

pnpm installieren

Verwenden Sie Corepack (in Node 16+ enthalten) oder installieren Sie pnpm global.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

Workspace einrichten

Erstellen Sie im Stammverzeichnis eine pnpm-workspace.yaml, in der die Ordner mit Paketen aufgeführt sind.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

Projektstruktur

Jede Anwendung und jedes Paket verfügt über eine eigene package.json. Im Stammverzeichnis befindet sich eine Workspace-package.json mit gemeinsam genutzten devDeps.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

Abhängigkeiten installieren

Führen Sie einmal im Stammverzeichnis pnpm install aus. pnpm installiert alles in allen Paketen und führt gemeinsame Abhängigkeiten per Hoisting nach oben.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

workspace:-Protokoll

Referenzieren Sie interne Pakete mit workspace:*. pnpm löst dies zum lokalen Paket auf; beim Veröffentlichen wird es durch eine echte Version ersetzt.

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

// On publish, workspace:* becomes the actual version of @repo/ui.

Skripte in mehreren Paketen ausführen

pnpm -r führt ein Skript in jedem Paket aus. Verwenden Sie --filter für Teilmengen.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

Strikte Auflösung von Abhängigkeiten

Standardmäßig verwendet pnpm symbolische Links, sodass ein Paket nur die Abhängigkeiten sieht, die es ausdrücklich in seiner package.json aufgeführt hat. Dadurch gelangen Abhängigkeiten nicht versehentlich aus anderen Paketen hinein — ein Fehler, den npm und yarn classic beide zulassen.

Hoisting-Muster

Standardmäßig führt pnpm kein Hoisting durch. Wenn eine transitive Abhängigkeit zugänglich sein muss (z. B. ein globales TypeScript), ergänzen Sie in .npmrc: shamefully-hoist=true (möglichst vermeiden) oder verwenden Sie ein spezifisches public-hoist-pattern.

Abhängigkeiten aktualisieren

pnpm update aktualisiert innerhalb der semver-Bereiche. pnpm update -L aktualisiert auf die neueste Version (ignoriert das Caret).

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Mit Turborepo kombinieren

pnpm stellt Workspace- und Installationsfunktionen bereit; Turborepo übernimmt die Aufgabenorchestrierung und das Caching. Beide ergänzen sich perfekt — die meisten JS-Monorepos verwenden sie gemeinsam.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

Tipps für CI

Speichern Sie den inhaltsadressierbaren Store von pnpm (~/.local/share/pnpm/store) im Cache, um CI-Läufe zu beschleunigen. Verwenden Sie --frozen-lockfile, damit der Lauf fehlschlägt, wenn sich pnpm-lock.yaml ändern würde.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

Schnelltest

Was ist der wichtigste Vorteil von pnpm gegenüber npm/yarn hinsichtlich des Speicherplatzes in einem Monorepo?

Zusammenfassung: pnpm-Workspaces

Ein einziger inhaltsadressierbarer Store + symbolische Links ergeben schnelle Installationen und etwa 70 % weniger Speicherplatzbedarf. pnpm-workspace.yaml listet die Paketordner auf. Das workspace:*-Protokoll dient für interne Abhängigkeiten. pnpm -r führt Skripte in allen Paketen aus; --filter für Teilmengen. Die strikte Auflösung verhindert durchlässige Abhängigkeiten. Kombinieren Sie pnpm mit Turborepo für die Aufgabenorchestrierung. Verwenden Sie in CI --frozen-lockfile.

Häufig gestellte Fragen

Ist die Lektion „pnpm Workspaces für Monorepos“ kostenlos?

Ja — der vollständige Text von „pnpm Workspaces für Monorepos“ 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 „pnpm Workspaces für Monorepos“?

Richten Sie einen pnpm-Workspace mit einer pnpm-workspace.yaml im Stammverzeichnis ein, heben Sie gemeinsam genutzte Abhängigkeiten ins Root-Verzeichnis und verknüpfen Sie lokale Pakete mit dem works… 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 3 von 4.

Wie lange dauert die Lektion „pnpm Workspaces für Monorepos“?

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

  1. Vite: Plugin-System und SSR-Modus
  2. esbuild: Geschwindigkeit und Einschränkungen
  3. pnpm Workspaces für Monorepos
  4. Turbo: Caching und Task-Pipelines
← Zurück zu Frontend Academy