0Pricing
TypeScript Academy · Lekcja

Obszary robocze pnpm z TypeScript

Skonfiguruj monorepo za pomocą pnpm i współdzielonego tsconfig.

Obszary robocze pnpm z TypeScript to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Czym są workspace’y pnpm

Workspace’y pnpm umożliwiają zarządzanie wieloma pakietami w jednym repozytorium ze współdzieloną strukturą node_modules, zmniejszając zużycie miejsca na dysku i umożliwiając importy między pakietami.

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

Tworzenie struktury workspace

Typowe monorepo pnpm zawiera katalog packages/ na współdzielone biblioteki oraz katalog apps/ na aplikacje przeznaczone do wdrożenia.

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

Główny tsconfig.json

Główny tsconfig definiuje podstawowe opcje i zawiera referencje do wszystkich pakietów workspace.

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

tsconfig na poziomie pakietu

Każdy pakiet rozszerza główną konfigurację i ustawia własne opcje composite oraz outDir.

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

Instalowanie zależności między pakietami

Należy użyć pnpm add wraz z protokołem workspace, aby połączyć pakiety w monorepo.

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

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

Rozwiązywanie ścieżek w TypeScript

Należy dodać aliasy paths w głównym tsconfig, aby podczas tworzenia aplikacji TypeScript rozwiązywał pakiety workspace do ich kodu źródłowego.

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

Kompilowanie wszystkich pakietów

Należy użyć tsc --build w katalogu głównym, aby skompilować wszystkie pakiety kompozytowe w kolejności wynikającej z zależności.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Uruchamianie skryptów w wielu pakietach

pnpm -r (rekurencyjnie) lub --filter uruchamia skrypty we wszystkich pasujących pakietach.

# Run tests in all packages
pnpm -r test

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

Współdzielona konfiguracja ESLint i Prettier

Konfigurację lintowania należy przechowywać we współdzielonym pakiecie i rozszerzać ją w każdym pakiecie, aby zapewnić spójny styl kodu w całym monorepo.

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

Integracja z Turborepo

Należy dodać Turborepo, aby buforować i uruchamiać równolegle zadania kompilowania, testowania i lintowania, korzystając z grafu workspace pnpm do ustalania kolejności zależności.

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

Podsumowanie: workspace’y pnpm z TypeScript

Workspace’y pnpm wraz z referencjami projektów TypeScript tworzą wydajne środowisko monorepo: współdzielone node_modules, importy między pakietami za pomocą workspace:* oraz szybkie kompilacje z użyciem tsc --build.

Szybkie sprawdzenie

W którym pliku definiuje się, które katalogi są pakietami workspace pnpm?

Czego się Państwo nauczyli

Workspace’y pnpm wraz z referencjami projektów TypeScript zapewniają wydajne monorepo ze współdzielonym node_modules, łączeniem pakietów za pomocą protokołu workspace i kompilacjami przyrostowymi. Turborepo pozwala dodatkowo buforować zadania i uruchamiać je równolegle.

Często zadawane pytania

Czy lekcja „Obszary robocze pnpm z TypeScript” jest bezpłatna?

Tak — pełny tekst „Obszary robocze pnpm z TypeScript” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Obszary robocze pnpm z TypeScript”?

Skonfiguruj monorepo za pomocą pnpm i współdzielonego tsconfig. Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Obszary robocze pnpm z TypeScript”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Objaśnienie referencji projektów TypeScript
  2. Obszary robocze pnpm z TypeScript
  3. Strategia pakietu współdzielonych typów
  4. Kompilacje przyrostowe i pamięć podręczna w monorepo
← Powrót do TypeScript Academy