Создание монорепозитория Nx с приложениями React
Создайте рабочую область Nx, добавьте приложения React и разберитесь в графе проекта.
«Создание монорепозитория Nx с приложениями React» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Зачем нужен Nx?
Nx — интеллектуальная система сборки для монорепозиториев. Она запускает задачи с учётом изменений (собирает и тестирует только изменившееся), кэширует результаты (не запускает повторно неизменившиеся задачи) и предоставляет генераторы для создания каркаса приложений и библиотек.
Создание нового рабочего пространства Nx
Создайте каркас нового рабочего пространства Nx, предварительно настроенного для React.
# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=nextСтруктура рабочего пространства
Nx организует код в apps/ (приложения, готовые к развёртыванию) и libs/ (общие библиотеки). У каждого проекта есть собственный project.json с целями задач.
myorg/
apps/
web/ # React SPA
admin/ # Admin React SPA
api/ # NestJS backend
libs/
ui/ # shared UI components
data-access/ # data fetching hooks
utils/ # shared utilities
nx.json # workspace config
package.json # single package.jsonДобавление приложения React
Используйте генератор React для Nx, чтобы добавить новое приложение со всей необходимой конфигурацией.
# Add a new React app:
npx nx generate @nx/react:app customer-portal
# Add a Next.js app:
npx nx generate @nx/next:app marketingЗапуск задач
Запускайте сборку, тестирование, проверку стиля и приложение для отдельных проектов или для всех проектов.
# Serve a specific app:
npx nx serve web
# Build all apps:
npx nx run-many --target=build --all
# Test a specific library:
npx nx test uiГраф проекта
nx graph открывает интерактивную визуализацию всех приложений и библиотек, а также их зависимостей — вы увидите, какие проекты зависят от каких библиотек.
npx nx graphКэширование в Nx
Nx кэширует результаты задач локально. Повторный запуск неизменившейся задачи мгновенно использует кэш. Nx Cloud расширяет кэширование удалённым кэшем, общим для участников команды и системы непрерывной интеграции.
# First run: builds and caches
npx nx build web # ~30s
# Second run (no changes): cache hit
npx nx build web # <1s — served from cacheКонвейеры задач
Определяйте зависимости задач в nx.json. При запуске build автоматически сначала выполняется build для всех вышестоящих зависимостей.
// nx.json
{
"targetDefaults": {
"build": {
"dependsOn": ["^build"], // run dependency builds first
"cache": true
},
"test": {
"cache": true
}
}
}Теги для контроля
Добавляйте к проектам теги (например, scope:ui, type:app) и используйте правила ESLint, чтобы запретить приложениям импортировать внутренний код других приложений.
// project.json
{
"tags": ["scope:web", "type:app"]
}
// .eslintrc.json
{
"rules": {
"@nx/enforce-module-boundaries": ["error", {
"depConstraints": [
{ "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
]
}]
}
}Псевдонимы путей TypeScript
Nx автоматически настраивает tsconfig.base.json с псевдонимами путей, поэтому вы можете импортировать общие библиотеки как @myorg/ui, а не использовать длинные относительные пути.
// tsconfig.base.json (auto-generated)
{
"compilerOptions": {
"paths": {
"@myorg/ui": ["libs/ui/src/index.ts"],
"@myorg/utils": ["libs/utils/src/index.ts"]
}
}
}
// Usage in apps:
import { Button } from '@myorg/ui';Быстрая проверка
Что делает команда nx affected --target=build в монорепозитории Nx?
Итоги
Создайте рабочее пространство Nx с помощью create-nx-workspace. Используйте nx generate для приложений и библиотек, nx serve/build/test для задач, а nx affected в CI, чтобы обрабатывать только изменённые проекты. Кэширование гарантирует мгновенный возврат результатов неизменившихся задач.
Изучай React с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 88
- Уроки
- 324
Часто задаваемые вопросы
Урок «Создание монорепозитория Nx с приложениями React» бесплатный?
Да — полный текст урока «Создание монорепозитория Nx с приложениями React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание монорепозитория Nx с приложениями React»?
Создайте рабочую область Nx, добавьте приложения React и разберитесь в графе проекта. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Создание монорепозитория Nx с приложениями React»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание монорепозитория Nx с приложениями React
- Общие библиотеки и внутренние пакеты
- Команды Nx Affected и кэширование
- Генераторы кода и автоматизация рабочей области