Начало работы с Nx для управления монорепозиторием

Управление несколькими связанными проектами может быстро стать сложной задачей. По мере роста вашей кодовой базы вам нужны инструменты, которые помогают поддерживать согласованность, эффективно делиться кодом и оптимизировать время сборки. Nx — это мощное решение, разработанное специально для решения этих задач.

Это руководство покажет вам, как настроить и использовать Nx для эффективного управления монорепозиторием. Вы изучите основные концепции, создадите базовое рабочее пространство и поймете, как интеллектуальные возможности Nx могут кардинально улучшить ваш рабочий процесс разработки.

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

Монорепозиторий — это стратегия контроля версий, при которой несколько проектов хранятся в одном репозитории. В отличие от отдельных репозиториев для каждого проекта (полирепо), монорепозиторий содержит все связанные проекты в одном месте.

Преимущества монорепозиториев

• Совместное использование кода — повторное использование кода между проектами без сложного управления пакетами
• Атомарные изменения — обновление нескольких проектов в одном коммите
• Согласованный инструментарий — применение одинаковых стандартов разработки во всех проектах
• Упрощенные зависимости — управление связями проектов в одном месте
• Координированные релизы — синхронизация обновлений между взаимозависимыми проектами

Однако монорепозитории вносят такие сложности, как управление зависимостями сборки и масштабирование по мере роста кодовой базы. Именно здесь на помощь приходит Nx.

Что такое Nx?

Nx — это расширяемая система сборки, разработанная специально для управления монорепозиториями. Первоначально разработанный для Angular-приложений, Nx теперь поддерживает множество фронтенд и бэкенд фреймворков, включая React, Vue, Node.js и другие.

Ключевые возможности Nx

• Умное кэширование — избегает пересборки неизмененного кода
• Граф зависимостей — визуализирует связи между проектами
• Команды affected — собирает и тестирует только то, что затронуто вашими изменениями
• Генераторы кода — создает согласованные структуры проектов
• Расширяемые плагины — поддерживает различные фреймворки и инструменты

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

Давайте создадим базовое Nx рабочее пространство с React-приложением и общей библиотекой.

Предварительные требования

• Node.js (версия 14 или выше)
• npm или yarn

Создание Nx рабочего пространства

# Установка Nx CLI глобально (опционально)
npm install -g nx

# Создание нового рабочего пространства
npx create-nx-workspace@latest my-workspace

Во время настройки вам будет предложено выбрать:

1. Какой стек использовать (выберите “React”)
2. Имя приложения (например, “web-app”)
3. Формат стилей (CSS, SCSS и т.д.)
4. Настройку Nx Cloud (опционально, но рекомендуется для командных проектов)

Это создает рабочее пространство со следующей структурой:

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

Понимание структуры рабочего пространства

• apps/ — содержит ваши приложения (фронтенд, бэкенд, мобильные)
• libs/ — хранит общие библиотеки кода, используемые в приложениях
• nx.json — настраивает поведение Nx и плагины
• package.json — управляет зависимостями для всего рабочего пространства

Добавление проектов в ваше рабочее пространство

Теперь давайте добавим общую UI-библиотеку и посмотрим, как Nx управляет зависимостями.

Создание общей библиотеки

nx g @nx/react:lib ui-components

Это создает библиотеку в libs/ui-components/, которая может быть импортирована любым приложением в вашем рабочем пространстве.

Создание компонента в библиотеке

nx g @nx/react:component button --project=ui-components --export

Это генерирует компонент Button в вашей UI-библиотеке и экспортирует его для использования в других проектах.

Использование библиотеки в вашем приложении

Отредактируйте ваше приложение для использования нового компонента:

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Выполнение задач с Nx

Nx предоставляет единый способ выполнения задач в ваших проектах.

Основные команды

# Запуск сервера разработки
nx serve web-app

# Сборка приложения
nx build web-app

# Запуск тестов
nx test web-app

# Линтинг кода
nx lint web-app

Выполнение задач для всех проектов

nx run-many --target=build --all

Использование интеллектуальных возможностей Nx

Мощь Nx становится очевидной по мере роста вашего рабочего пространства. Давайте изучим его наиболее ценные возможности.

Визуализация зависимостей проектов

nx graph

Это открывает интерактивную визуализацию зависимостей ваших проектов, помогая понять архитектуру вашего монорепозитория.

Понимание затронутых проектов

Когда вы вносите изменения, Nx может определить, какие проекты затронуты:

nx affected:graph

Это показывает только проекты, затронутые вашими недавними изменениями.

Сборка только того, что изменилось

nx affected --target=build

Это собирает только проекты, затронутые вашими изменениями, экономя значительное время в CI/CD пайплайнах.

Кэширование для скорости

Nx автоматически кэширует результаты задач. Если вы запускаете ту же задачу с теми же входными данными, Nx использует кэшированный результат вместо повторного выполнения:

# Первый запуск (выполняет задачу)
nx build web-app

# Второй запуск (использует кэш)
nx build web-app

Конфигурация Nx рабочего пространства

Файл nx.json управляет поведением Nx. Вот базовая конфигурация:

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Ключевые настройки:

• npmScope — префикс для импорта библиотек
• affected.defaultBase — git-ветка для сравнения
• cacheableOperations — задачи, которые должны кэшироваться
• dependsOn — зависимости задач (например, сборка библиотек перед приложениями)

Пример из реальной жизни: Full-Stack приложение

Давайте создадим более полный пример с React фронтендом и Node.js бэкендом:

# Создание React приложения
nx g @nx/react:app client

# Создание Node.js API
nx g @nx/node:app api

# Создание общей библиотеки типов
nx g @nx/js:lib shared-types

Это дает вам рабочее пространство с:

1. React клиентским приложением
2. Node.js API сервером
3. Общей библиотекой для общих типов

Вы можете запускать оба приложения одновременно:

nx run-many --target=serve --projects=api,client --parallel

Заключение

Nx делает управление монорепозиторием простым и эффективным. Обрабатывая сложность зависимостей проектов и оптимизации сборки, он позволяет вам сосредоточиться на написании кода, а не на управлении структурой репозитория. Начните с простой настройки, как показано в этом руководстве, и расширяйте по мере роста вашего проекта.

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