TypeScript Academy · Урок

Рабочие пространства pnpm с TypeScript

Настройте монорепозиторий с pnpm и общим tsconfig

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

Что такое рабочие области pnpm

Рабочие области pnpm позволяют управлять несколькими пакетами в одном репозитории с общей структурой node_modules, уменьшая расход дискового пространства и обеспечивая импорты между пакетами.

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

Создание структуры рабочей области

В типичном монорепозитории pnpm каталог packages/ содержит общие библиотеки, а каталог apps/ — приложения, готовые к развёртыванию.

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

Корневой tsconfig.json

Корневой tsconfig задаёт основные параметры и содержит ссылки на все пакеты рабочей области.

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

tsconfig на уровне пакета

Каждый пакет расширяет корневую конфигурацию и задаёт собственные параметры composite и outDir.

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

Установка зависимостей между пакетами

Используйте pnpm add с протоколом рабочей области, чтобы связать пакеты внутри монорепозитория.

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

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

Разрешение путей в TypeScript

Добавьте псевдонимы paths в корневой tsconfig, чтобы TypeScript во время разработки разрешал пакеты рабочей области в их исходный код.

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

Сборка всех пакетов

Запустите tsc --build из корневого каталога, чтобы собрать все составные пакеты в порядке зависимостей.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

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

pnpm -r (рекурсивный режим) или --filter запускает сценарии во всех подходящих пакетах.

# Run tests in all packages
pnpm -r test

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

Общая конфигурация ESLint и Prettier

Храните конфигурации проверки кода в общем пакете и расширяйте их в каждом пакете, чтобы обеспечить единый стиль кода во всём монорепозитории.

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

Интеграция с Turborepo

Добавьте Turborepo для кэширования и параллельного выполнения задач сборки, проверки и анализа кода, используя граф рабочей области pnpm для определения порядка зависимостей.

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

Итоги: рабочие области pnpm с TypeScript

Рабочие области pnpm и ссылки на проекты TypeScript создают мощную структуру монорепозитория: общую структуру node_modules, импорты между пакетами через workspace:* и быстрые сборки с помощью tsc --build.

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

Какой файл определяет, какие каталоги являются пакетами рабочей области pnpm?

Чему Вы научились

Рабочие области pnpm со ссылками на проекты TypeScript обеспечивают эффективный монорепозиторий с общей структурой node_modules, связыванием пакетов через протокол рабочей области и инкрементальными сборками. Добавьте Turborepo для кэширования и параллельного выполнения.

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

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

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

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

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

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

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

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

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

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

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

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

Объяснение ссылок на проекты TypeScript
Рабочие пространства pnpm с TypeScript
Стратегия общего пакета типов
Инкрементальные сборки и кэш в монорепозиториях

← Назад к TypeScript Academy