Если у вас есть рабочее пространство Yarn, вы можете превратить его в монорепо Nx с помощью простой команды. Ниже приведен пример рабочего пространства Yarn с несколькими приложениями Expo, которое мы будем использовать для добавления Nx:
https://github.com/byCedric/eas-monorepo-example
В этом примере рабочего пространства есть 3 приложения Expo:
- managed: Expo managed app
- выброшенный: Expo bare app
- with-sentry: Expo managed app со встроенным
sentry-expo.
Когда вы запустите приложение, у каждого приложения будет просто текст в середине экрана:
В этом блоге мы покажем вам, как превратить вышеупомянутое рабочее пространство Yarn в Nx.
Почему Nx?
Прежде чем мы начнем, первый вопрос, который мы должны решить: зачем проходить через все трудности, чтобы превратить рабочее пространство Yarn в Nx? Если у вас есть рабочее пространство Yarn, вы уже можете обмениваться кодом между приложениями. Так зачем же тогда Nx?
Как и Yarn workspace, Nx — это инструмент monorepo. Однако, в отличие от Yarn workspace, Nx не только обеспечивает более быстрое время сборки и лучший опыт разработчика, но и предоставляет:
- Визуализации рабочего пространства
- Распределенное выполнение задач
- Легкое обновление
- Плагин редактора
Шаги
После проверки репо, перейдите в папку и запустите:
npx add-nx-to-monorepo
В терминале вы должны увидеть следующее:
> NX 🐳 Nx initialization
? Use Nx Cloud? (It's free and doesn't require registration.) Yes [Faster builds, run detail
s, Github integration. Learn more at https://nx.app]
> NX 🧑🔧 Analyzing the source code and creating configuration files
> NX 📦 Installing dependencies
Вы должны увидеть, что файл с именем nx.json создан в корне вашего рабочего пространства.
Обратите внимание в package.json: вы должны увидеть, что последняя версия nx добавлена в devDependencies, как показано ниже:
"devDependencies": {
"nx": "14.1.6"
}
Вот и все! Теперь вы официально добавили Nx в свое рабочее пространство.
Более быстрая сборка
В рабочем пространстве Yarn, если вы запустите yarn build, он выполнит команду сборки для каждого приложения и библиотеки. Для приведенного ниже примера это заняло 5,51 секунды:
$ yarn workspaces run build
> @acme/app-ejected
$ echo 'Nothing to build'
Nothing to build
> @acme/app-managed
$ echo 'Nothing to build'
Nothing to build
> @acme/app-with-dev-client
$ echo 'Nothing to build'
Nothing to build
> @acme/app-with-sentry
$ echo 'Nothing to build'
Nothing to build
> @acme/babel-preset-expo
$ echo 'Nothing to build'
Nothing to build
> @acme/eslint-config
$ echo 'Nothing to build'
Nothing to build
> @acme/ui
$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at build/commonjs
ℹ Compiling 1 files in src with babel
✔ Wrote files to build/commonjs
ℹ Building target module
ℹ Cleaning up previous build at build/module
ℹ Compiling 1 files in src with babel
✔ Wrote files to build/module
ℹ Building target typescript
ℹ Cleaning up previous build at build/typescript
ℹ Generating type definitions with tsc
✔ Wrote definition files to build/typescript
✨ Done in 5.51s.
Однако, переключив рабочее пространство в режим Nx, запустите команду сборки для всех приложений и библиотек:
yarn nx run-many --target=build --all
Обратите внимание, что второй запуск займет гораздо меньше времени. Например, для приведенного ниже примера это заняло всего 0,96 секунды:
То же самое относится и к линтингу. Если вы запустите yarn test, обратите внимание, что он запустит линтинг для каждого приложения и библиотеки (в этом репозитории он использует тестовый скрипт для запуска eslint). Для приведенного ниже примера это заняло 18,26 секунды.
yarn run v1.22.10
$ yarn workspaces run test
> @acme/app-ejected
$ eslint --ext js,ts,tsx .
> @acme/app-managed
$ eslint --ext js,ts,tsx .
> @acme/app-with-dev-client
$ eslint --ext js,ts,tsx .
> @acme/app-with-sentry
$ eslint --ext js,ts,tsx .
> @acme/babel-preset-expo
$ echo 'Nothing to test'
Nothing to test
> @acme/eslint-config
$ echo 'Nothing to test'
Nothing to test
> @acme/ui
$ eslint --ext ts,tsx ./src
✨ Done in 18.26s.
Чтобы запустить тестовую команду для всех приложений и библиотек:
yarn nx run-many --target=test --all
Обратите внимание, что для приведенного ниже примера это заняло всего 0,95 секунды:
Для этого репозитория он фактически сократил время сборки и работы lint на ~90%. Как Nx добился этого?
Обратите внимание, что в консоли терминала иногда появляется сообщение Nx считывает вывод из кэша вместо того, чтобы выполнить команду. Это происходит потому, что Nx использует кэширование вычислений. Если в приложении или библиотеке нет изменений, он будет извлекать вычисления из кэша. Короче говоря, он никогда не собирает, не тестирует и не линкует один и тот же код дважды.
Визуализации рабочего пространства и правила границ
Чтобы увидеть график проекта рабочего пространства, выполните команду:
yarn nx graph
Вы должны увидеть приведенный ниже график:
Возможность визуализации рабочего пространства может быть очень полезной. В частности, это удобно для трассировки и отладки, поскольку вы можете четко видеть, как приложения и библиотеки в этом рабочем пространстве связаны друг с другом.
Итак, это относительно небольшое рабочее пространство, содержащее всего 3 библиотеки и 4 приложения. По мере роста рабочего пространства становится все сложнее укрощать зависимости и импорт между библиотеками. Вы определенно не хотите, чтобы ваше монорепо превратилось в большой запутанный беспорядок. Кроме того, отслеживание круговых зависимостей в большом репозитории может быстро превратиться в головную боль, если вашим единственным инструментом является изучение кода.
В дополнение к использованию графа проекта Nx также поставляется с правилом lint @nrwl/nx/enforce-module-boundaries для раннего обнаружения круговых зависимостей и предотвращения импорта между библиотеками, которые не должны взаимодействовать друг с другом. Подробнее читайте в статье нашего блога «Укрощение организации кода с помощью границ модулей в Nx».
Распределенное выполнение задач
Nx также поставляется с командой affected: вместо того, чтобы выполнять команду для всех приложений и библиотек, она будет выполнять команду только для тех, на которые «повлияло» изменение.
Например, если вы не внесли никаких изменений в код и выполнили команду:
yarn nx affected --target=build
То сборка не будет запущена ни для одного проекта:
Если вместо этого вы изменили библиотеку ui в этой рабочей области, то приложения, которые зависят от этой библиотеки, будут затронуты (apps-ejected, app-managed, app-with-dev-client, app-with-sentry); библиотека babel-preset-expo и eslint-config не будут затронуты.
Если вы выполните команду yarn nx affected:graph, вы должны увидеть график зависимостей:
Теперь выполните команду yarn nx affected --target=build:
Заметьте в консоли, babel-preset-expo и eslint-config извлечены из кэша; библиотека ui и все приложения пересобраны.
Если вы изменили только управляемое приложение, другие приложения не будут затронуты. Граф зависимостей должен выглядеть так, как показано ниже, только с app-managed:
Теперь запустите команду снова:
Обратите внимание, что она собирает только app-managed.
Команда affected — это мощный инструмент, который еще больше сокращает время сборки, тестирования и линтинга.
Простое обновление
Еще одна мощная команда Nx — migrate.
Выполнив команду yarn nx migrate latest, вы автоматически обновите все фреймворки и инструменты до последних версий. Например, для рабочего пространства Expo, если вы хотите обновить версию Expo, вам может понадобиться обновить версии React Native, React и других библиотек. Вы можете зайти в свой package.json и попытаться изменить номер версии вручную, а можете предоставить Nx обновить версию за вас. Nx не только обновит номера версий, но и выполнит миграцию кода и конфигурации, если это необходимо.
Плагины редактора Nx
Nx также предлагает мощные плагины редактора для улучшения работы разработчика. Например. вы можете использовать Nx Console для VS Code. Тогда добавление другого приложения Expo в это рабочее пространство будет одним кликом:
Заключение
Это некоторые из возможностей, которые Nx может предложить по сравнению с Yarn Workspace.
Надеюсь, после прочтения этого блога я убедил вас перевести ваше рабочее пространство Yarn в Nx или, по крайней мере, захотеть попробовать Nx. Если нет, вы можете прочитать больше:
- Добавление Nx в рабочее пространство Lerna/Yarn/PNPM/NPM
- От Lerna/Yarn к Nx: Ускоренное время сборки и лучшая эргономика для разработчиков
Куда двигаться дальше?
- присоединяйтесь к сообществу Slack
- следите за Nx в Twitter
- узнайте больше о Nx на https://nx.dev
- подписывайтесь на канал Nx на Youtube