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 pnpmWorkspace 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.jsonAbhä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 prettierworkspace:-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] lintStrikte 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 buildSchnelltest
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
- Vite: Plugin-System und SSR-Modus
- esbuild: Geschwindigkeit und Einschränkungen
- pnpm Workspaces für Monorepos
- Turbo: Caching und Task-Pipelines