Frontend Academy · Урок

Рабочие пространства pnpm для монорепозиториев

«Рабочие пространства pnpm для монорепозиториев» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужен pnpm?

pnpm (Performant npm) — быстрый и экономный по месту менеджер пакетов. Он хранит единственную копию каждого пакета в глобальном хранилище с адресацией по содержимому и создаёт ссылки на неё из node_modules проектов. Одна и та же зависимость в нескольких проектах = одна копия на диске.

Скорость и экономия места на диске

В типичном монорепозитории установка с pnpm в 2–3 раза быстрее, чем с npm или yarn, и использует примерно на 70% меньше места на диске. Для монорепозиториев с большим количеством пакетов это даёт огромный выигрыш.

Установка pnpm

Используйте Corepack, входящий в состав Node 16+, или установите pnpm глобально.

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

# Or:
npm install -g pnpm

Настройка рабочего пространства

Создайте pnpm-workspace.yaml в корне проекта и укажите в нём папки, содержащие пакеты.

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

Структура проекта

У каждого приложения и пакета есть собственный package.json. В корне находится package.json рабочего пространства с общими 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

Установка зависимостей

Один раз выполните pnpm install в корне проекта. pnpm установит всё во всех пакетах и поднимет общие зависимости.

pnpm install

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

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

Протокол workspace:

Ссылайтесь на внутренние пакеты с помощью workspace:*. pnpm разрешает такую зависимость в локальный пакет, а при публикации заменяет её реальной версией.

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

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

Запуск скриптов во всех пакетах

pnpm -r запускает скрипт в каждом пакете. Для подмножеств используйте --filter.

# 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

Строгое разрешение зависимостей

По умолчанию pnpm использует символические ссылки, поэтому пакет видит только зависимости, явно указанные в его package.json. Случайного доступа к зависимостям других пакетов нет — это ошибка, которую допускают и npm, и классический yarn.

Шаблоны поднятия зависимостей

По умолчанию pnpm ничего не поднимает. Если транзитивная зависимость должна быть доступна, например глобальный TypeScript, добавьте в .npmrc: shamefully-hoist=true (по возможности избегайте этого) или используйте конкретный public-hoist-pattern.

Обновление зависимостей

pnpm update обновляет зависимости в пределах диапазонов semver. pnpm update -L обновляет их до последних версий, игнорируя ограничение caret.

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

Совместное использование с Turborepo

pnpm предоставляет рабочее пространство и установку зависимостей, а Turborepo — оркестрацию задач и кэширование. Они отлично сочетаются: большинство монорепозиториев на JS используют оба инструмента.

# pnpm install dependencies
pnpm install

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

Советы для CI

Кэшируйте хранилище pnpm с адресацией по содержимому (~/.local/share/pnpm/store), чтобы ускорить CI. Используйте --frozen-lockfile, чтобы установка завершалась с ошибкой, если pnpm-lock.yaml должен измениться.

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

Быстрая проверка

В чём главное преимущество pnpm перед npm и yarn с точки зрения места на диске в монорепозитории?

Итоги: рабочие пространства pnpm

Единое хранилище с адресацией по содержимому и символические ссылки = быстрая установка и примерно на 70% меньше места на диске. В pnpm-workspace.yaml перечислены папки пакетов. Протокол workspace:* используется для внутренних зависимостей. pnpm -r запускает скрипты во всех пакетах, а --filter — в подмножествах. Строгое разрешение предотвращает утечки зависимостей. Для оркестрации задач используйте Turborepo. В CI применяйте --frozen-lockfile.

Часто задаваемые вопросы

Урок «Рабочие пространства pnpm для монорепозиториев» бесплатный?

Да — полный текст урока «Рабочие пространства pnpm для монорепозиториев» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Рабочие пространства pnpm для монорепозиториев»?

Настройте рабочее пространство pnpm с корневым файлом pnpm-workspace.yaml, вынесите общие зависимости на верхний уровень и используйте протокол workspace: для связывания локальных пакетов Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Рабочие пространства pnpm для монорепозиториев»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Vite: система плагинов и режим SSR
esbuild: скорость и ограничения
Рабочие пространства pnpm для монорепозиториев
Turbo: кэширование и конвейеры задач

← Назад к Frontend Academy