Что такое монорепозиторий с Nx?angular-83

Основная концепция

Монорепозиторий (monorepo) — это подход к организации кода, при котором несколько проектов хранятся в одном репозитории. Nx — это мощный набор инструментов для работы с монорепозиториями в экосистеме Angular и не только.

Ключевые особенности Nx монорепозитория

1. Структура монорепозитория

Типичная структура:

my-org/
├── apps/
│   ├── frontend/      # Angular приложение
│   └── backend/       # Node.js API
├── libs/
│   ├── ui/            # Общие UI компоненты
│   └── api-interfaces # Общие типы
├── tools/
└── nx.json            # Конфигурация Nx

2. Преимущества подхода

  • Общие зависимости: Одна node_modules для всех проектов
  • Кросс-проектные ссылки: Простое использование кода между проектами
  • Единая сборка: Согласованные инструменты и процессы
  • Глобальная консистентность: Единые линтеры, тесты и стандарты кода

Основные возможности Nx

1. Генерация кода

nx generate @nrwl/angular:app my-app      # Новое Angular приложение
nx generate @nrwl/angular:lib shared-ui  # Библиотека компонентов

2. Зависимости между проектами

Автоматическое определение зависимостей через project.json:

{
  "targets": {
    "build": {
      "dependsOn": ["^build"],  # Сначала собирает зависимости
      "inputs": ["{projectRoot}/**/*.ts"]
    }
  }
}

3. Инкрементальная сборка

Nx запоминает, что уже было собрано:

nx affected:build --base=main --head=HEAD

4. Визуализация зависимостей

nx graph

(Отображает граф зависимостей между проектами)

Работа с Angular в Nx

1. Создание Angular приложения

npx create-nx-workspace@latest my-workspace
cd my-workspace
nx add @nrwl/angular
nx g @nrwl/angular:app my-angular-app

2. Shared библиотеки

// В библиотеке:
@Component({ selector: 'lib-button', ... })
export class ButtonComponent {}

// В приложении:
import { ButtonComponent } from '@my-org/shared/ui';

3. Модульная структура

Каждая библиотека может быть:

  • Feature (фича-модуль)
  • UI (компоненты)
  • Data-access (сервисы, хранилища)

Оптимизации Nx

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

Nx кэширует:

  • Результаты сборки
  • Результаты тестов
  • Результаты линтинга

2. Распределенные вычисления

nx affected --target=build --parallel --maxParallel=3

3. Интеграция с CI/CD

Пример конфигурации:

- run: nx affected:build --base=last-successful-commit --head=HEAD
- run: nx affected:test --base=last-successful-commit --head=HEAD
- run: nx affected:lint --base=last-successful-commit --head=HEAD

Сценарии использования

1. Микрофронтенды

apps/
├── app-shell/       # Хост-приложение
├── feature-checkout # Микрофронтенд
└── feature-profile  # Микрофронтенд

2. Fullstack разработка

apps/
├── web-client  # Angular
└── api-server  # Node/NestJS
libs/
└── shared-interfaces # Общие типы

3. Дизайн-система

libs/
├── ui/button
├── ui/input
└── ui/tables

Миграция существующего проекта

1. Инициализация Nx

npx nx@latest init

2. Перенос проектов

  • Разместить в папке apps/
  • Настроить project.json для каждого

3. Выделение общих библиотек

  • Перенести общий код в libs/
  • Обновить импорты

Резюмируем

  • Nx монорепозиторий — это единое хранилище для множества проектов
  • Обеспечивает удобное управление зависимостями между проектами
  • Предоставляет мощные инструменты для генерации, сборки и тестирования
  • Особенно полезен для больших Angular-приложений и команд
  • Позволяет реализовать микрофронтенды и fullstack-разработку
  • Значительно улучшает производительность разработки за счет кэширования

Вопросы

Собеседования