Всего 2 недели назад у Nx был массовый выпуск Nx 15.3 — если вы пропустили его, обязательно ознакомьтесь с нашей статьей, в которой представлены некоторые огромные улучшения, включая поддержку Vite, автономные пресеты Angular и React, а также визуализацию Task Graph!

Но за последние пару недель мы смогли реализовать довольно много замечательных функций, поэтому мы снова возвращаемся к этому, выпуская сегодня Nx 15.4, в том числе:

Предпочитаете видеоверсию?

Поддержка Vite 4.0

Nx 15.4 представляет последнюю основную версию Vite после выпуска Vite 4 в начале этого месяца.

Как упоминается в Статье о запуске Vite, мы инвестируем в экосистему Vite и теперь официально поддерживаем собственный плагин Vite. Nx 15.4 продолжает эти инвестиции благодаря своевременной поддержке Vite 4, и мы рады быть частью экосистемы Vite и приносить больше пользы нашим разработчикам благодаря поддержке Vite!

Проекты, уже использующие наш плагин @nrwl/vite, будут автоматически обновлены до Vite 4 при обновлении до последней версии Nx с помощью команды nx migrate, и мы также упростили конфигурацию, необходимую для поддержки Vite.

Мы также приложили некоторые усилия, чтобы упростить преобразование существующих проектов для использования Vite, в том числе:

Вы можете ознакомиться с более подробной информацией о нашем плагине Vite, в том числе о том, как добавить Vite и Vitest в существующее рабочее пространство Nx, посетив нашу документацию по адресу nx.dev/packages/vite.

Nx смотреть

Nx 15.4 включает новую функцию поддержки просмотра файлов с помощью Nx! Вот как это работает:

Синтаксис:

nx watch [projects modifier option] -- [command]

Пример:

nx watch --all -- nx build \$NX_PROJECT_NAME

Для опции модификатора проектов:

  • вы можете использовать --all для всех проектов в рабочей области
  • или вы можете отфильтровать конкретные проекты с параметром --projects=[comma separated list of project names], который также можно использовать в сочетании с параметром --includeDependentProjects.

Команда nx watch будет поддерживать переменные $NX_PROJECT_NAME и $NX_CHANGED_FILES. Эта функция открывает двери для приятных рабочих процессов разработчиков, где мы можем предоставить готовый механизм для Nx для запуска соответствующих задач при сохранении, и мы рады видеть, что наши пользователи получают эту функцию.

Лично я рад использовать следующую команду:

npx -c 'nx watch –all – npx nx affected --target=test --files=\$NX_FILE_CHANGES'

Чтобы связать nx watch с командой nx affected, чтобы иметь единую команду наблюдения для запуска всех моих затронутых тестов при сохранении, когда они затронуты!

Ознакомьтесь с нашей документацией для более подробной информации.

Поддержка Cypress без Webpack для нашего пресета React Standalone

Мы добавили предустановку React Standalone в версии 15.3 для поддержки рабочих пространств с одним приложением React с помощью Nx, а в версии 15.4 мы вернули эту предустановку в Cypress.

В Nx 15.4 отдельное приложение React будет создано с каталогом e2e, предварительно настроенным и оптимизированным для запуска Cypress с помощью команды npx nx e2e e2e, как только будет создано ваше исходное рабочее пространство.

Поддержка рендеринга на стороне сервера для федерации модулей как для приложений Angular, так и для приложений React.

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

Наши существующие генераторы host и remote Module Federation имеют добавленный флаг --ssr, который включает рендеринг на стороне сервера путем создания правильных серверных файлов.

Мы также добавили новый исполнитель, чтобы вы могли обслуживать хост-сервер локально, а также все удаленные серверы с помощью одной команды.

Узнайте больше об этой новой функции в нашей документации!

Запуск нескольких целей параллельно для нескольких проектов

Nx 15.4 включает обновления команды nx run-many, позволяющие добавлять несколько целей, разделенных пробелами, а также подстановочные знаки в опции projects, например:

npx nx run-many --target test build lint

^ это запустит все цели test, build и lint в вашей рабочей области, и теперь вы можете отфильтровать это, чтобы выбрать проекты с помощью подстановки:

npx nx run-many --target test build lint --projects "domain-products-*"

^ теперь будут выполняться все цели test, build и lint для всех проектов в вашей рабочей области, которые начинаются с «domain-products-».

Интерактивные подсказки для пользовательского пресета

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

В Nx пресеты — это специальные сценарии генерации кода, которые можно использовать для создания нового рабочего пространства Nx с помощью нашей команды create-nx-workspace.

Например, я случайно узнал, что Шай Резник из builder.io работает над надстройкой qwik для Nx, и поскольку опубликованная им надстройка qwik-nx включает в себя генератор Nx под названием «предустановка, Я могу запустить команду:

npx nx create-nx-workspace –preset=qwik-nx

Как мы видим, предустановленная опция соответствует имени опубликованного пакета npm.

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

Это должно открыть некоторые мощные функции для авторов плагинов и пакетов для параметризации их сценариев генерации кода с помощью Nx, и мы рады видеть, что такие люди, как Shai, builder.io и qwik, используют эту новую функцию!

Это все для этого выпуска.

Следите за нами в наших социальных сетях и на Youtube, чтобы не пропустить новые новости и выпуски, как только мы их объявим!

Вы можете найти полные журналы изменений для релиза на github.

Как обновить Nx

Обновление Nx выполняется с помощью следующей команды и обновляет зависимости и код вашего рабочего пространства Nx до последней версии:

npx nx migrate latest

После обновления ваших зависимостей запустите все необходимые миграции.

npx nx migrate --run-migrations

Узнать больше

Кроме того, если вам это понравилось, нажмите ❤️ и не забудьте подписаться на Zack и Nx в Twitter, чтобы узнать больше!