Frontend Academy · Lektion

pnpm Workspaces til monorepos

Opsæt et pnpm-workspace med en rod-pnpm-workspace.yaml, hæv delte afhængigheder, og brug workspace:-protokollen til at linke lokale pakker.

Lektion 3 af 415 trin

pnpm Workspaces til monorepos er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor pnpm?

pnpm (Performant npm) er en hurtig og diskpladsbesparende pakkehåndtering. Den gemmer én kopi af hver pakke i et globalt indholdsadresseret lager og opretter links til det fra projektets node_modules. Samme afhængighed, flere projekter = én kopi på disken.

Hastighed og besparelser på diskplads

I et typisk monorepo er pnpm-installationer 2-3 gange hurtigere end npm/yarn og bruger omkring 70 % mindre diskplads. Det giver enorme besparelser i monorepoer med mange pakker.

Installation af pnpm

Brug Corepack (følger med Node 16+) eller installer globalt.

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

# Or:
npm install -g pnpm

Opsætning af workspace

Opret en pnpm-workspace.yaml i roden med en liste over mapper, der indeholder pakker.

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

Projektstruktur

Hver app og pakke har sin egen package.json. Roden har en workspace-package.json med fælles 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

Installation af afhængigheder

Kør pnpm install én gang i roden. pnpm installerer alt i alle pakker og løfter fælles afhængigheder op.

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:-protokollen

Referér til interne pakker med workspace:*. pnpm opløser referencen til den lokale pakke; ved publicering erstattes den af en reel version.

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

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

Kørsel af scripts på tværs af pakker

pnpm -r kører et script i hver pakke. Brug --filter til delmængder.

# 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

Streng opløsning af afhængigheder

Som standard bruger pnpm symbolske links, så en pakke kun kan se de afhængigheder, den udtrykkeligt har angivet i sin package.json. Ingen utilsigtet lækage mellem pakker — en fejl, som både npm og klassisk yarn tillader.

Mønstre for hoisting

Som standard løfter pnpm intet op. Hvis en transitiv afhængighed skal være tilgængelig (f.eks. global TypeScript), skal du føje dette til .npmrc: shamefully-hoist=true (undgå det om muligt), eller brug et specifikt public-hoist-pattern.

Opdatering af afhængigheder

pnpm update opdaterer inden for semver-intervaller. pnpm update -L opdaterer til den seneste version uden hensyn til caret-operatoren.

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

Kombination med Turborepo

pnpm leverer workspace og installation; Turborepo leverer orkestrering af opgaver og cachelagring. De passer perfekt sammen — de fleste JavaScript-monorepoer bruger begge.

# pnpm install dependencies
pnpm install

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

Tip til CI

Cachelagr pnpm's indholdsadresserede lager (~/.local/share/pnpm/store) for hurtigere CI. Brug --frozen-lockfile for at få en fejl, hvis pnpm-lock.yaml ville blive ændret.

# .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

Hurtigt tjek

Hvad er pnpm's vigtigste fordel med hensyn til diskplads sammenlignet med npm/yarn i et monorepo?

Besvar den i den interaktive lektion

Opsummering: pnpm-workspaces

Ét indholdsadresseret lager + symbolske links = hurtige installationer og omkring 70 % mindre diskplads. pnpm-workspace.yaml viser mapperne med pakker. workspace:*-protokollen bruges til interne afhængigheder. pnpm -r kører scripts på tværs af alle pakker; --filter bruges til delmængder. Streng opløsning forhindrer lækkende afhængigheder. Kombinér med Turborepo til orkestrering af opgaver. Brug --frozen-lockfile i CI.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “pnpm Workspaces til monorepos” gratis?

Ja — hele teksten til “pnpm Workspaces til monorepos” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “pnpm Workspaces til monorepos”?

Opsæt et pnpm-workspace med en rod-pnpm-workspace.yaml, hæv delte afhængigheder, og brug workspace:-protokollen til at linke lokale pakker. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “pnpm Workspaces til monorepos”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy