Frontend Academy · Урок

Настройка монорепозитория с Turborepo

Организуйте несколько приложений и общих пакетов в одном репозитории, определите конвейер Turbo и кэшируйте сборки, чтобы пересобирать только изменившееся

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

Что такое монорепозиторий

Один репозиторий Git, в котором размещено несколько проектов (приложений и библиотек), совместно использующих код. Например, веб-приложение, мобильное приложение, общая библиотека интерфейса и общие утилиты в одном репозитории. Это упрощает совместное использование кода, атомарные сквозные изменения и единый CI-процесс.

Зачем нужен Turborepo

Turborepo — высокопроизводительная система сборки для монорепозиториев JavaScript. Она кэширует результаты задач, выполняет их параллельно в разных пакетах и пересобирает только изменившиеся части. Создана Vercel.

Настройка Turborepo

Используйте официальный стартовый шаблон.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json с рабочими пространствами

Корневой package.json объявляет рабочие пространства — npm/yarn/pnpm создают для них символические ссылки, чтобы приложения могли импортировать пакеты по имени.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — конвейер

Определите задачи (сборка, проверка стиля, тестирование, разработка) и зависимости между пакетами.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

Объяснение dependsOn

^build означает: прежде чем собирать этот пакет, соберите все его зависимости из рабочего пространства. Поэтому, если app/web зависит от packages/ui, сначала собирается ui.

Запуск задач

Запустите задачу во всём монорепозитории. Turbo выполняет задачи в топологическом порядке и параллельно.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Кэширование результатов

Turbo вычисляет хеш входных данных (исходных файлов, зависимостей и среды) и кэширует результаты. Повторный запуск без изменений выполняется мгновенно: Turbo воспроизводит кэшированный результат, не запуская задачу заново.

Удалённое кэширование

Отправьте кэш на удалённый сервер (Vercel Remote Cache или собственный сервер), чтобы машины CI и коллеги могли совместно его использовать. Первый разработчик оплачивает сборку, а все остальные получают результат из кэша.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Фильтрация с помощью --filter

Запустите задачу только для соответствующих пакетов.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Внутренние пакеты

Пакеты в packages/ импортируют друг друга по имени. Укажите их в зависимостях как "@repo/ui": "*" (с pnpm: workspace:*).

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

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

Советы для CI

Используйте turbo run build --filter=...[origin/main] в CI, чтобы собирать только то, что изменилось после основной ветки. В сочетании с удалённым кэшем сборка неизменившихся пакетов сокращается с минут до секунд.

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

Что означает запись ^build в массиве dependsOn задачи Turbo?

Итоги: Turborepo

Система монорепозиториев JavaScript: структура apps/ + packages/ с рабочими пространствами. turbo.json определяет задачи и связи dependsOn. ^build означает, что сначала собираются зависимости. Локальный кэш на основе хешей мгновенно выполняет повторяющиеся задачи. Удалённый кэш позволяет команде и CI совместно использовать результаты. --filter выбирает подмножества. Для быстрого CI в PR используйте фильтрацию по изменениям.

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

Урок «Настройка монорепозитория с Turborepo» бесплатный?

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

Чему я научусь в уроке «Настройка монорепозитория с Turborepo»?

Организуйте несколько приложений и общих пакетов в одном репозитории, определите конвейер Turbo и кэшируйте сборки, чтобы пересобирать только изменившееся Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Настройка монорепозитория с Turborepo»?

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

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

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

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

Атомарный дизайн: атомы, молекулы и организмы
Настройка монорепозитория с Turborepo
Микрофронтенды: Module Federation
Структура каталогов по функциональным возможностям

← Назад к Frontend Academy