Turborepo и Nx совместно с Vite
## Архитектурная модель монорепозитория с Vite, Turborepo и Nx
Современные фронтенд-экосистемы всё чаще переходят к монорепозиториям, где несколько приложений и библиотек живут в едином пространстве кода. В связке с быстрым сборщиком Vite это позволяет добиться высокой скорости разработки, унификации зависимостей и предсказуемой сборки. Для управления такими репозиториями используются два доминирующих инструмента: Turborepo и Nx.
Vite в монорепозитории выполняет роль локального dev-сервера и сборщика отдельных пакетов, тогда как Turborepo и Nx управляют графом задач, кешированием, оркестрацией сборок и распределением вычислений. Их совместное использование формирует многоуровневую систему: Vite отвечает за исполнение конкретного фронтенд-проекта, а Nx или Turborepo — за координацию всего репозитория.
---
## Роль Vite в монорепозитории
Vite изначально проектировался как инструмент для одиночных приложений, но его архитектура идеально подходит для монорепо благодаря модульности и ESM-ориентированности.
### Основные функции Vite в связке с монорепо
* локальный dev-server с мгновенным HMR
* сборка отдельных пакетов внутри workspace
* обработка зависимостей через pre-bundling
* поддержка TypeScript без отдельной трансформации
* работа с алиасами и workspace-структурами
В монорепозитории Vite чаще всего используется в двух сценариях:
1. запуск отдельного приложения (web-app, admin panel)
2. сборка UI-библиотек внутри packages
Ключевым преимуществом является то, что Vite не требует глобальной сборки всего монорепозитория, а работает на уровне конкретного пакета.
---
## Структура монорепозитория с Turborepo или Nx
Типичная структура проекта:
```
apps/
web/
admin/
packages/
ui/
config/
utils/
```
В такой архитектуре:
* apps — исполняемые приложения
* packages — переиспользуемые библиотеки
Обе системы — Turborepo и Nx — строят граф зависимостей между этими узлами.
---
## Turborepo + Vite
### Принцип работы
Turborepo строит pipeline задач, где каждая операция (build, test, lint) рассматривается как узел графа. Vite при этом остаётся инструментом конкретного приложения.
Основная идея:
* Turborepo не заменяет Vite
* Turborepo запускает Vite как задачу
### Пример pipeline
```
build:
dependsOn: ["^build"]
outputs: ["dist/**"]
```
Знак `^` означает зависимость от пакетов выше по графу.
### Кэширование
Turborepo использует content-based caching:
* если исходники не изменились — результат берётся из кеша
* Vite-сборка не выполняется повторно
Это критично для монорепо с десятками пакетов.
---
## Nx + Vite
Nx предлагает более строгую модель управления проектом, чем Turborepo.
### Ключевые особенности Nx
* граф зависимостей строится автоматически
* встроенные executors для Vite
* строгая типизация границ модулей
* генераторы кода (schematics)
Nx интегрирует Vite через плагинный слой, где Vite становится executor’ом.
### Nx graph
Nx строит полный dependency graph:
* apps/web → packages/ui → packages/utils
* изменение utils приводит к пересборке зависимых узлов
---
## Интеграция Vite в Nx
Vite используется как build tool внутри executor:
```json
{
"targets": {
"build": {
"executor": "@nx/vite:build"
}
}
}
```
В dev-режиме:
```json
{
"targets": {
"serve": {
"executor": "@nx/vite:dev-server"
}
}
}
```
Nx добавляет:
* контроль границ модулей
* изоляцию зависимостей
* строгую организацию архитектуры
---
## Сравнение подходов Turborepo и Nx при использовании Vite
### Гибкость
Turborepo:
* минимальная конфигурация
* отсутствие навязанных правил
Nx:
* строгая архитектура
* обязательные соглашения
### Производительность
Обе системы используют кеширование, но:
* Turborepo: быстрее в простых сценариях
* Nx: эффективнее в крупных графах зависимостей
### Интеграция с Vite
Turborepo:
* Vite запускается как обычный script
Nx:
* Vite встроен как executor
---
## Кеширование и инкрементальные сборки
### Turborepo
Кеш основан на:
* входных файлах
* конфигурации
* environment variables
Если хэш совпадает — результат берётся из локального или удалённого кеша.
### Nx
Nx использует:
* computation hashing
* project graph analysis
* affected commands
Пример:
```
nx affected:build
```
Сборка затрагивает только изменённые проекты.
---
## Работа с зависимостями в Vite-пакетах
Vite в монорепозитории требует корректной работы с workspace-структурами.
### Проблема резолва
Без дополнительной настройки Vite может:
* дублировать зависимости
* неправильно резолвить пакеты
### Решение
* использование `pnpm workspaces` или Yarn workspaces
* настройка `optimizeDeps`
* алиасы на уровне tsconfig и vite config
---
## Алиасы и shared packages
В монорепо часто используется:
```
@repo/ui
@repo/utils
```
Vite конфиг:
```js
resolve: {
alias: {
"@repo/ui": "/packages/ui/src"
}
}
```
Nx дополнительно проверяет корректность импортов между границами проектов.
---
## Сценарии масштабирования
### Малое монорепо
* Turborepo + Vite
* минимум правил
* быстрый старт
### Среднее монорепо
* Turborepo или Nx
* несколько приложений
* shared UI библиотека
### Крупное монорепо
* Nx + Vite
* строгие границы
* code generation
* распределённые сборки
---
## Dev server orchestration
В монорепо часто запускается несколько Vite-инстансов:
* web
* admin
* storybook
Turborepo:
```
turbo run dev
```
Nx:
```
nx run-many -t serve
```
Nx может параллелить задачи с учётом зависимостей.
---
## Типичные проблемы интеграции
### 1. Дублирование React или Vue
Причина:
* неправильный hoisting зависимостей
Решение:
* единый lockfile
* настройка peerDependencies
---
### 2. Медленный HMR в монорепо
Причина:
* пересборка зависимых пакетов
Решение:
* исключение node_modules из watch
* оптимизация include/exclude в Vite
---
### 3. Конфликты сборки пакетов
Причина:
* общий output directory
Решение:
* изолированные dist папки
* настройка outputs в Turborepo/Nx
---
## Гибридная модель Turborepo + Nx
В некоторых архитектурах используется комбинация:
* Nx для графа проектов
* Turborepo для кеширования задач
* Vite для фронтенда
Однако такая модель усложняет поддержку и требует строгого разграничения ответственности.
---
## Инкрементальная разработка UI библиотек
Vite обеспечивает быстрый build библиотек:
* ESM-first сборка
* CSS modules
* tree-shaking
Nx или Turborepo обеспечивают:
* пересборку только изменённых пакетов
* публикацию версий
---
## Влияние архитектуры на скорость команды
Монорепо с Vite и системой оркестрации задач влияет на:
* время CI
* скорость локальной разработки
* масштабируемость кода
* стабильность зависимостей
Nx обычно выигрывает в крупных командах за счёт строгой структуры, Turborepo — в гибкости и скорости внедрения.
---