Всего 2 недели назад у Nx был массовый выпуск Nx 15.3 — если вы пропустили его, обязательно ознакомьтесь с нашей статьей, в которой представлены некоторые огромные улучшения, включая поддержку Vite, автономные пресеты Angular и React, а также визуализацию Task Graph!
Но за последние пару недель мы смогли реализовать довольно много замечательных функций, поэтому мы снова возвращаемся к этому, выпуская сегодня Nx 15.4, в том числе:
- Поддержка Vite 4.0
- Nx Watch
- Поддержка Cypress без Webpack для нашего пресета React Standalone
- Поддержка рендеринга на стороне сервера для федерации модулей как для приложений Angular, так и для приложений React
- Параллельное выполнение нескольких целей для нескольких проектов
- Интерактивные подсказки для пользовательского пресета
Предпочитаете видеоверсию?
Поддержка 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.config.ts
- улучшенный DX с подробными сообщениями во время конвертации
- улучшенная документация по конвертации с использованием нашего генератора
- добавление в наши документы руководства по конвертации вручную
Вы можете ознакомиться с более подробной информацией о нашем плагине 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
Узнать больше
- 🧠 Документы Nx
- 👩💻 Nx GitHub
- 💬 Сообщество Nrwl Slack
- 📹 Канал Nrwl Youtube
- 🧐 Нужна помощь с Angular, React, Monorepos, Lerna или Nx? Поговорите с нами 😃
Кроме того, если вам это понравилось, нажмите ❤️ и не забудьте подписаться на Zack и Nx в Twitter, чтобы узнать больше!