TypeScript Academy · leksjon

pnpm Workspaces med TypeScript

Konfigurer et monorepo med pnpm og en delt tsconfig.

Leksjon 2 av 413 trinn

pnpm Workspaces med TypeScript er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva er pnpm Workspaces?

pnpm workspaces lar Dem administrere flere pakker i ett enkelt repositorium med en delt node_modules-struktur, noe som reduserer diskbruken og muliggjør importer på tvers av pakker.

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

Opprette arbeidsområdestrukturen

Et typisk pnpm-monorepo har packages/ for delte biblioteker og apps/ for applikasjoner som kan distribueres.

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

Rotens tsconfig.json

Rotens tsconfig angir grunnleggende alternativer og refererer til alle pakkene i arbeidsområdet.

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

tsconfig på pakkenivå

Hver pakke utvider rotkonfigurasjonen og angir sin egen composite og outDir.

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

Installere avhengigheter på tvers av pakker

Bruk pnpm add sammen med workspace-protokollen for å koble pakker i monorepoet.

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

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

TypeScript-oppløsning av paths

Legg til aliaser for paths i rotens tsconfig, slik at TypeScript løser workspace-pakker til kildekoden deres under utvikling.

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

Bygge alle pakker

Bruk tsc --build fra roten for å bygge alle komposittpakker i avhengighetsrekkefølge.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Kjøre skript på tvers av pakker

pnpm -r (rekursivt) eller --filter kjører skript i alle pakker som samsvarer.

# Run tests in all packages
pnpm -r test

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

Felles ESLint- og Prettier-konfigurasjon

Oppbevar linting-konfigurasjoner i en felles pakke, og utvid dem i hver pakke for å sikre en konsekvent kodestil på tvers av monorepoet.

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

Turborepo-integrasjon

Legg til Turborepo for å hurtigbufre og parallellisere bygge-, test- og linting-oppgaver ved å bruke pnpm-arbeidsområdets graf til å bestemme avhengighetsrekkefølgen.

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

Oppsummering: pnpm Workspaces med TypeScript

pnpm workspaces + TypeScript-prosjektreferanser gir et effektivt monorepo-oppsett: delt node_modules, importer på tvers av pakker via workspace:* og raske bygg med tsc --build.

Rask kontroll

Hvilken fil definerer hvilke kataloger som er pnpm-workspace-pakker?

Besvar den i den interaktive leksjonen

Dette har De lært

pnpm workspaces med TypeScript-prosjektreferanser gir Dem et effektivt monorepo med delt node_modules, kobling på tvers av pakker via workspace-protokollen og inkrementelle bygg. Legg til Turborepo for hurtigbufring og parallellisering.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «pnpm Workspaces med TypeScript» gratis?

Ja – hele teksten i «pnpm Workspaces med TypeScript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «pnpm Workspaces med TypeScript»?

Konfigurer et monorepo med pnpm og en delt tsconfig. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «pnpm Workspaces med TypeScript»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

TypeScript-prosjektreferanser forklart
pnpm Workspaces med TypeScript
Strategi for en delt types-pakke
Inkrementelle bygg og hurtigbuffer i monorepoer

← Tilbake til TypeScript Academy