TypeScript Academy · Lezione

Workspace pnpm con TypeScript

Configuri un monorepo con pnpm e un tsconfig condiviso.

Workspace pnpm con TypeScript è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 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 TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Che cosa sono i workspace pnpm?

I workspace pnpm consentono di gestire più pacchetti in un unico repository con una struttura node_modules condivisa, riducendo l'uso del disco e abilitando gli import tra pacchetti.

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

Creazione della struttura del workspace

Un monorepo pnpm tipico contiene packages/ per le librerie condivise e apps/ per le applicazioni distribuibili.

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

tsconfig.json radice

Il tsconfig radice definisce le opzioni di base e include i riferimenti a tutti i pacchetti del workspace.

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

tsconfig a livello di pacchetto

Ogni pacchetto estende la configurazione radice e imposta i propri valori per composite e outDir.

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

Installazione delle dipendenze tra pacchetti

Utilizzi pnpm add con il workspace protocol per collegare i pacchetti all'interno del monorepo.

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

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

Risoluzione dei percorsi in TypeScript

Aggiunga gli alias paths nel tsconfig radice, così TypeScript risolve i pacchetti del workspace verso il relativo codice sorgente durante lo sviluppo.

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

Build di tutti i pacchetti

Utilizzi tsc --build dalla radice per creare la build di tutti i pacchetti compositi nell'ordine delle dipendenze.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Esecuzione degli script tra i pacchetti

pnpm -r (ricorsivo) o --filter esegue gli script in tutti i pacchetti corrispondenti.

# Run tests in all packages
pnpm -r test

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

Configurazione condivisa di ESLint e Prettier

Mantenga le configurazioni di linting in un pacchetto condiviso ed estendale in ogni pacchetto, così da garantire uno stile del codice coerente in tutto il monorepo.

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

Integrazione con Turborepo

Aggiunga Turborepo per memorizzare nella cache e parallelizzare le attività di build, test e lint, utilizzando il grafo del workspace pnpm per determinare l'ordine delle dipendenze.

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

Riepilogo: workspace pnpm con TypeScript

I workspace pnpm e i riferimenti ai progetti TypeScript creano una configurazione efficace per i monorepo: node_modules condiviso, import tra pacchetti tramite workspace:* e build rapide con tsc --build.

Verifica rapida

Quale file definisce quali directory sono pacchetti del workspace pnpm?

Che cosa ha imparato

I workspace pnpm con i riferimenti ai progetti TypeScript offrono un monorepo efficiente con node_modules condiviso, collegamenti tra pacchetti tramite il workspace protocol e build incrementali. Aggiunga Turborepo per la memorizzazione nella cache e la parallelizzazione.

Domande Frequenti

La lezione «Workspace pnpm con TypeScript» è gratuita?

Sì — il testo completo di «Workspace pnpm con TypeScript» è 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 TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Workspace pnpm con TypeScript»?

Configuri un monorepo con pnpm e un tsconfig condiviso. Eserciti TypeScript 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 TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript 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 2 di 4.

Quanto tempo richiede la lezione «Workspace pnpm con TypeScript»?

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 TypeScript Academy?

Sì. Ogni lezione TypeScript 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

Riferimenti ai progetti TypeScript
Workspace pnpm con TypeScript
Strategia per un pacchetto di tipi condivisi
Build incrementali e cache nei monorepo

← Torna a TypeScript Academy