0Pricing
Frontend Academy · Lezione

pnpm Workspaces per i monorepo

Configurare un workspace pnpm con un pnpm-workspace.yaml nella root, fare l’hoisting delle dipendenze condivise e usare il protocollo workspace: per collegare i pacchetti locali

pnpm Workspaces per i monorepo è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché pnpm?

pnpm (Performant npm) è un gestore di pacchetti veloce ed efficiente in termini di spazio su disco. Memorizza una sola copia di ogni pacchetto in uno store globale content-addressable e crea collegamenti a essa dai node_modules del progetto. Stessa dipendenza, più progetti = una sola copia su disco.

Velocità e risparmio di spazio su disco

In un monorepo tipico, le installazioni di pnpm sono da 2 a 3 volte più veloci di quelle di npm/yarn e utilizzano circa il 70% in meno di spazio su disco. I vantaggi sono enormi nei monorepo con molti pacchetti.

Installazione di pnpm

Utilizzi Corepack (incluso in Node 16+) oppure lo installi globalmente.

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

# Or:
npm install -g pnpm

Configurazione del workspace

Crei un pnpm-workspace.yaml nella root, elencando le cartelle che contengono i pacchetti.

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

Struttura del progetto

Ogni app e pacchetto ha il proprio package.json. La root ha un package.json del workspace con le devDeps condivise.

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

Installazione delle dipendenze

Esegua pnpm install una sola volta nella root. pnpm installa tutto in tutti i pacchetti, portando al livello superiore le dipendenze comuni.

pnpm install

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

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

Protocollo workspace:

Faccia riferimento ai pacchetti interni con workspace:*. pnpm risolve il riferimento al pacchetto locale; durante la pubblicazione lo sostituisce con una versione reale.

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

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

Esecuzione degli script tra i pacchetti

pnpm -r esegue uno script in ogni pacchetto. Utilizzi --filter per selezionare un sottoinsieme.

# 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

Risoluzione rigorosa delle dipendenze

Per impostazione predefinita, pnpm utilizza i symlink, quindi un pacchetto vede solo le dipendenze dichiarate esplicitamente nel proprio package.json. Non si verificano fughe accidentali tra pacchetti, un problema consentito sia da npm sia da yarn classic.

Pattern di hoisting

Per impostazione predefinita, pnpm non esegue alcun hoisting. Se una dipendenza transitiva deve essere accessibile (ad esempio TypeScript a livello globale), la aggiunga a .npmrc: shamefully-hoist=true (lo eviti se possibile) oppure utilizzi uno specifico public-hoist-pattern.

Aggiornamento delle dipendenze

pnpm update aggiorna le dipendenze all'interno degli intervalli semver. pnpm update -L passa all'ultima versione, ignorando il caret.

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

Integrazione con Turborepo

pnpm fornisce workspace e installazione; Turborepo fornisce l'orchestrazione dei task e il caching. Si combinano perfettamente: la maggior parte dei monorepo JS utilizza entrambi.

# pnpm install dependencies
pnpm install

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

Suggerimenti per la CI

Metta in cache lo store content-addressable di pnpm (~/.local/share/pnpm/store) per velocizzare la CI. Utilizzi --frozen-lockfile per interrompere l'esecuzione se pnpm-lock.yaml dovesse cambiare.

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

Verifica rapida

Qual è il principale vantaggio in termini di spazio su disco di pnpm rispetto a npm/yarn in un monorepo?

Riepilogo: workspace pnpm

Un singolo store content-addressable + symlink = installazioni rapide e circa il 70% in meno di spazio su disco. pnpm-workspace.yaml elenca le cartelle dei pacchetti. Il protocollo workspace:* serve per le dipendenze interne. pnpm -r esegue gli script in tutti i pacchetti; --filter serve per i sottoinsiemi. La risoluzione rigorosa impedisce le dipendenze che fuoriescono dai pacchetti. Lo abbini a Turborepo per l'orchestrazione dei task. Utilizzi --frozen-lockfile nella CI.

Domande Frequenti

La lezione «pnpm Workspaces per i monorepo» è gratuita?

Sì — il testo completo di «pnpm Workspaces per i monorepo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «pnpm Workspaces per i monorepo»?

Configurare un workspace pnpm con un pnpm-workspace.yaml nella root, fare l’hoisting delle dipendenze condivise e usare il protocollo workspace: per collegare i pacchetti locali Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «pnpm Workspaces per i monorepo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Vite: sistema di plugin e modalità SSR
  2. esbuild: velocità e limitazioni
  3. pnpm Workspaces per i monorepo
  4. Turbo: caching e pipeline di task
← Torna a Frontend Academy