Создание монорепозитория Nx с полным стеком |

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

@nrwl/nx это инструмент, созданный на основе @angular/cli которые помогают нам создать рабочее пространство. со специальными папками для приложений и библиотек, а также некоторыми шаблонами, помогающими в сборке, анализе и тестировании, поощряя глобальное использование лучших практик и командных стандартов.

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

Nx можно установить следующими способами:

npm install -g @angular/cli @nrwl/schematics
yarn add global @angular/cli @nrwl/schematics

В пределах @nrwl/schematics у нас есть утилита для создания нашего рабочего пространства:

create-nx-workspace mymonoreponame

Это создаст рабочее пространство Nx с использованием Angular CLI с коллекцией схем Nx. Вы также можете добавить возможности Nx в существующий проект CLI, используя:

ng add @nrwl/schematics

В рабочей области у нас будут приложения, библиотеки, инструменты с файлами конфигурации для Angular, Nx, TSLint и Typescript:

/apps           <- our frontend and backend apps
/libs           <- shared libraries
/tools          <- schematic and misc tooling
angular.json    <- angular configuration for apps and libs
nx.json         <- nx metadata
package.json    <- main project info and scripts
tsconfig.json   <- global compilation config
tslint.json     <- global lint rules

По умолчанию Angular использует для тестирования Karma и Protractor, но Nx поддерживает использование Jest и Cypress. Если вы хотите включить Jest, вам нужно выполнить:

ng generate jest

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

Создание внешнего приложения

Добавление новых приложений в рабочее пространство Nx выполняется с помощью команды генерации Angular CLI с параметром app схема предоставлена ​​Nx:

ng generate app myfrontendappng generate app web --unitTestRunner=jest --e2eTestRunner=cypress

Это добавит необходимые папки и файлы, а также его конфигурацию, например:

/apps
  /web
    /src             <- Angular app
    browserslist     <- supported browsers criteria
    jest.config.js   <- Jest config
    tsconfig*.json   <- custom compilation rules
    tslint.json      <- custom lint rules
  /web-e2e
    /src             <- Angular e2e tests
    cypress.json     <- Cypress config
    tsconfig*.json   <- custom compilation rules

Создание серверного приложения

Нам нужно использовать node-app Схема здесь, и, при желании, мы можем выбрать внутреннюю структуру, например express или же nestjs.

ng generate node-app server
ng generate node-app server --framework=nestjs

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

/apps
  /server
    /src             <- NestJS/Express App
    jest.config.js   <- Jest config
    tsconfig*.json   <- custom compilation rules
    tslint.json      <- custom lint rules

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

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

Теперь пришло время поделиться некоторым кодом, использующим библиотеки. Давайте создадимshared один:

ng generate lib mylibraryname
ng generate lib shared --unitTestRunner=jest --publishable

это создаст согласованную структуру, но на этот раз с некоторыми новыми файлами:

/libs
  /shared
    /src
      /lib             <- library source
      index.ts         <- library entrypoint
    jest.config.js     <- test runner config
    ng-package.json    <- packaging configuration
    package.json       <- library npm metadata
    tsconfig*.json     <- custom compilation rules
    tslint.json        <- custom lint rules

в --publishable добавлены некоторые файлы пакета, необходимые для публикации встроенной библиотеки в реестре npm. Это полезно, если другой репозиторий или проект будет использовать эту библиотеку за пределами монорепозитория.

Это поколение библиотеки также настроит глобальный tsconfig.json пути с точкой входа в библиотеку. Обязательно настройте свой проект scope в nx.json файл или во время создания рабочего пространства:

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

Утилиты Nx

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

npm run dep-graph
yarn dep-graph

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

npm run affected:test --base=master
yarn affected:test --base=master

и, наконец, вы можете обновлять свой Nx, запуская следующий скрипт, когда выходит новая версия:

yarn add @nrwl/schematics@latest
yarn update

вы можете проверить все доступные скрипты внутри package.json файл.

Угловая консоль

Недавно Nrwl.io команда выпустила мощный инструмент, который дает визуальный обзор всего проекта и доступных для использования схем. С его помощью вы можете глубже проверить все параметры, которые у вас есть при создании приложений и библиотек, а также при создании компонентов, служб и т. д. Вы можете узнать больше на angularconsole.com.

Схемы NgRx

Используя его, я разработал собственный набор сценариев с доступными схемами, чтобы быстрее создавать свои хранилища, редукторы, действия и эффекты. Здесь я делюсь некоторыми из них со своим индивидуальным подходом к их структурированию.

Корневой магазин с действиями и эффектами

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

/app
  /store
    /actions
      session.actions.ts
    effects.ts
    index.ts
    reducers.ts
    state.ts

и я сделал это с тремя действиями на консоли, которые привели к следующим командам:

ng generate @ngrx/schematics:store app --statePath=store --no-flat --no-spec --root --module=app.module.ts --stateInterface=AppState

ng generate @ngrx/schematics:effect store/router --no-flat --no-spec --root --module=app.module.ts

ng generate @ngrx/schematics:action store/lang --group

вы можете проверить подробные коммиты и мои настройки (и многое другое) здесь.

Наслаждаться!

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