Frontend Academy · Lekcja

pnpm Workspaces dla monorepo

Skonfiguruje Pan/Pani obszar roboczy pnpm z głównym plikiem pnpm-workspace.yaml, podniesie współdzielone zależności i użyje protokołu workspace: do łączenia lokalnych pakietów.

pnpm Workspaces dla monorepo to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego pnpm?

pnpm (Performant npm) to szybki i oszczędny pod względem miejsca menedżer pakietów. Przechowuje jedną kopię każdego pakietu w globalnym magazynie adresowanym treścią, a następnie tworzy do niej odnośniki z katalogu node_modules projektu. Ta sama zależność w wielu projektach oznacza jedną kopię na dysku.

Szybkość i oszczędność miejsca na dysku

W typowym monorepo instalacje pnpm są od 2 do 3 razy szybsze niż w npm lub yarn i zużywają około 70% mniej miejsca na dysku. W monorepo z wieloma pakietami daje to ogromne korzyści.

Instalowanie pnpm

Użyj Corepacka (dołączonego do Node 16+) albo zainstaluj pnpm globalnie.

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

# Or:
npm install -g pnpm

Konfiguracja workspace

Utwórz w katalogu głównym plik pnpm-workspace.yaml, w którym wymienisz foldery zawierające pakiety.

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

Struktura projektu

Każda aplikacja i każdy pakiet mają własny plik package.json. W katalogu głównym znajduje się plik package.json workspace z współdzielonymi 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

Instalowanie zależności

Uruchom pnpm install raz w katalogu głównym. pnpm zainstaluje wszystko we wszystkich pakietach, przenosząc wspólne zależności do wspólnego poziomu.

pnpm install

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

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

Protokół workspace:

Odwołuj się do wewnętrznych pakietów za pomocą workspace:*. pnpm rozwiązuje takie odwołanie do pakietu lokalnego, a podczas publikowania zastępuje je rzeczywistą wersją.

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

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

Uruchamianie skryptów we wszystkich pakietach

pnpm -r uruchamia skrypt w każdym pakiecie. Użyj --filter, aby ograniczyć zakres.

# 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

Ścisłe rozwiązywanie zależności

Domyślnie pnpm używa dowiązań symbolicznych, dzięki czemu pakiet widzi tylko zależności jawnie wymienione w jego package.json. Nie dochodzi do przypadkowego przenikania zależności między pakietami — błędu, na który pozwalają zarówno npm, jak i klasyczny yarn.

Wzorce hoistowania

Domyślnie pnpm niczego nie hoistuje. Jeśli zależność tranzytywna musi być dostępna (np. globalny TypeScript), dodaj do .npmrc: shamefully-hoist=true (w miarę możliwości unikaj tej opcji) albo użyj konkretnego wzorca public-hoist-pattern.

Aktualizowanie zależności

pnpm update aktualizuje pakiety w ramach zakresów semver. pnpm update -L aktualizuje je do najnowszych wersji (ignorując znak karetki).

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

Łączenie z Turborepo

pnpm zapewnia workspace i instalowanie zależności, a Turborepo — orkiestrację zadań i buforowanie. Doskonale się uzupełniają — większość monorepo JS używa obu narzędzi.

# pnpm install dependencies
pnpm install

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

Wskazówki dotyczące CI

Buforuj magazyn pnpm adresowany treścią (~/.local/share/pnpm/store), aby przyspieszyć CI. Użyj --frozen-lockfile, aby przerwać działanie, jeśli pnpm-lock.yaml miałby ulec zmianie.

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

Szybki test

Jaka jest główna zaleta pnpm w porównaniu z npm lub yarn pod względem miejsca na dysku w monorepo?

Podsumowanie: workspace pnpm

Jeden magazyn adresowany treścią i dowiązania symboliczne oznaczają szybkie instalacje oraz około 70% mniej zajętego miejsca na dysku. Plik pnpm-workspace.yaml zawiera listę folderów z pakietami. Protokół workspace:* służy do określania wewnętrznych zależności. pnpm -r uruchamia skrypty we wszystkich pakietach, a --filter ogranicza zakres. Ścisłe rozwiązywanie zależności zapobiega ich przenikaniu. Połącz pnpm z Turborepo, aby uzyskać orkiestrację zadań. W CI używaj --frozen-lockfile.

Często zadawane pytania

Czy lekcja „pnpm Workspaces dla monorepo” jest bezpłatna?

Tak — pełny tekst „pnpm Workspaces dla monorepo” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „pnpm Workspaces dla monorepo”?

Skonfiguruje Pan/Pani obszar roboczy pnpm z głównym plikiem pnpm-workspace.yaml, podniesie współdzielone zależności i użyje protokołu workspace: do łączenia lokalnych pakietów. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.

Ile czasu zajmuje lekcja „pnpm Workspaces dla monorepo”?

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

Tak. Każda lekcja Frontend 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

← Powrót do Frontend Academy