Nx 14.2 — Angular v14, обновление Storybook, облегченный Nx и многое другое!

Только что вышел очередной релиз, наполненный крутыми функциями и улучшениями: Nx 14.2. Читайте все об обновлении Angular v14, TypeScript и других сторонних пакетов, улучшенной миграции Angular CLI на Nx, дополнительном nx.json и улучшении скорости.

Angular v14

Angular v14 был выпущен на прошлой неделе. Читайте обо всех новостях здесь. Огромная благодарность и поздравления команде Angular за то, что они снова выпустили продукт в срок в соответствии с 6-месячным циклом выпуска основных релизов. Последние пару недель мы тесно сотрудничали с командой, тестируя ранние RC-версии, давая отзывы о предстоящих функциях и, прежде всего, убеждаясь, что новая версия отлично работает не только в Nx, но и в более широкой экосистеме, которую поддерживает Nx, такой как Jest, ESLint, Storybook, Cypress и другие.

Мы рады новым возможностям, появившимся в Angular v14, которые привнесли свежий воздух и долгожданные инновации в фреймворк (* кашель * автономные компоненты, * кашель * типизированные формы Angular).

Таким образом, если вы обновите Nx 14.2 (npx nx migrate latest), Nx обязательно запустит все скрипты миграции, связанные с Angular v14, чтобы обновить ваше рабочее пространство до последней версии Angular.

TypeScript 4.7 и Prettier 2.6

В этом выпуске мы также автоматически обновляем

• TypeScript до версии v4.7 (анонс)
• Prettier до версии 2.6 (анонс)

Storybook 6.5

Nx 14.2 автоматически обновляет Storybook до последней версии 6.5.

Поддержка Storybook была в Nx в течение длительного времени, и у нас был наш пользовательский исполнитель (билдер) для предварительной настройки Storybook таким образом, чтобы он лучше всего работал в рамках Angular monorepo setup. Мы рады, что поддержка Storybook для Angular значительно улучшилась за последние пару релизов и теперь мы можем напрямую использовать встроенные билдеры Storybook для Angular (@storybook/angular:start-storybook, @storybook/angular:build-storybook). В вашем project.json (или workspace.json / angular.json) вы должны увидеть, что исполнитель теперь установлен:

"storybook": {
  "executor": "@storybook/angular:start-storybook",
  ...
},

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

Storybook 6.5 также поставляется с поддержкой использования файлов конфигурации Storybook на основе TS, таких как main.ts , preview.ts и т. д. Мы добавили поддержку этого в наши генераторы конфигураций Storybook.

О других интересных возможностях Storybook читайте в анонсе релиза.

Простая миграция с Angular CLI на Nx

Nx подходит не только для больших моноресурсов, но и отлично работает в рабочих пространствах Angular для одного проекта! Почему стоит перейти на Nx? Для этого нужен целый пост в блоге (спойлер: скоро будет 😉), но в двух словах:

• все из Angular CLI по-прежнему работает
• вы получаете более быструю сборку, тестирование, линтинг и т.д. благодаря планированию задач и кэшированию Nx
• больше схем (в Nx мы называем их генераторами) со специфической поддержкой SCAM, настройки NgRX, федерации модулей и настройки микрофронтенда и многое другое в будущем (смотрим на вас, Standalone Components)
• улучшенная интеграция с инструментами сообщества, такими как Jest для модульного тестирования, ESLint, Cypress, Storybook,…
• улучшенный опыт разработчика благодаря расширению Nx Console VSCode.
• …

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

Все, что вам нужно сделать, это выполнить следующую команду на вашей существующей настройке Angular CLI.

ng add @nrwl/angular

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

Вот Нрвлиан Колум пишет об этом в Твиттере

Колам Ферри

@ferrycolum

Это так круто 🔥
Автоматически перенести @angular CLI Workspaces в @NxDevTools так же просто, как выполнить одну команду

ng add @nrwl/angular

Преимущества?
⚡️ Быстрая сборка (15 с -> 19 мс с кэшированием!)
😍 Быстрые тесты и линтинг
🎉 Больше схем
🚀 ВСЕ ПО-ПРЕЖНЕМУ РАБОТАЕТ

11:49 AM — 27 мая 2022 г.

Более легкий Nx

Когда вы устанавливаете новое рабочее пространство Nx, вы можете выбрать один из множества пресетов (шаблонов), которые предварительно конфигурируют ваше рабочее пространство наилучшим образом, уже настроив такие инструменты, как Prettier, Jest, ESLint и Cypress. Однако для некоторых людей это может показаться слишком сложным.

Для этого в Nx всегда есть то, что мы называем «Nx Core». Подробнее об этом вы можете прочитать в нашем руководстве, но в основном это позволяет использовать Nx без плагинов, только для быстрого, мощного планирования задач и возможностей кэширования.

В версии 14 мы уже упростили Nx (у нас есть целый раздел в блоге релиза), а в версии 14.2 мы даже пошли дальше: мы сделали nx.json необязательным, предоставив некоторые разумные значения по умолчанию. Теперь, если вы хотите добавить мощный планировщик задач Nx в существующий репозиторий, вам достаточно добавить пакет nx в качестве зависимости, и все готово.

Когда вам понадобится подправить настройки по умолчанию, вы можете выполнить следующую команду, чтобы получить сгенерированный nx.json или создать его вручную:

npx nx init

Запустите Nx graph на любом монорепо!

Кстати, о легковесном Nx. С Nx v14.2.3 вы теперь можете просто запустить

npx nx graph

чтобы загрузить пакет Nx, заставить его проанализировать граф проекта вашего монорепо и визуализировать его в мощном пользовательском интерфейсе графа проекта. Попробуйте. Вот Виктор демонстрирует его на репозитории Next.js и Babel.js!

Виктор Савкин

@victorsavkin

Вы можете использовать супермощный визуализатор Nx Graph в любом монорепозитории, даже если он не использует Nx.

Запустите:
npx nx@latest graph

⬇️⬇️⬇️⬇️ @nextjs и @babeljs repos

@NxDevTools

14:46 PM — 09 Jun 2022

Nx только что стал быстрее, снова!

Часть нашей команды была с головой погружена в работу над Lerna в течение последнего месяца с тех пор, как мы взяли на себя управление Lerna. И помимо выпуска Lerna 5 с важными обновлениями пакетов, мы хотели решить самую большую проблему Lerna: медлительность. Мы опубликовали статью о том, как мы представляем себе эту стратегию 2 недели назад, и в рамках этой стратегии мы глубоко копались в ядре Nx и проводили соответствующее профилирование.

Результат: Сам Nx тоже стал быстрее 😃.

Вот результат запуска нашего бенчмарка с использованием последней версии Nx 14.2:

* average lage time is: 10203.6
* average turbo time is: 1532.3
* average lerna (powered by nx) time is: 272.2
* average nx time is: 194.8
* nx is 52.379876796714576x faster than lage
* nx is 7.866016427104722x faster than turbo
* nx is 1.3973305954825461x faster than lerna (powered by nx)

(как всегда, не стесняйтесь воспроизвести его здесь)

Выделенная поддержка линтинга для плагинов Nx

Только возможность настраивать процессы и поведение вашего инструментария monorepo под свои нужды делает работу с ним приятной и позволяет получить от него максимальную отдачу. Будь то настройка аспекта генерации кода в соответствии со стилистическим руководством и лучшими практиками вашей компании, автоматизация настройки новых проектов или даже добавление поддержки таких языков, как Go, .Net или Flutter. Плагины Nx обеспечивают такую поддержку и действительно помогают вам заставить Nx работать наилучшим образом для вашего текущего сценария.

Поддержка плагинов Nx существует уже давно. Просто взгляните на нашу страницу плагинов сообщества Nx. И мы продолжаем улучшать ее. Мы добавили поддержку пресетов плагинов Nx, а в последнее время и возможность локальных плагинов. В этом выпуске мы добавили поддержку линтинга для разработки Nx-плагинов.

Случалось ли вам когда-нибудь, что вы неправильно указали файл реализации в конфигурационном файле generators.json вашего плагина? Угадайте что, теперь процесс линтинга предупредит вас об этом:

Когда вы создаете новый плагин Nx, теперь у вас должна быть конфигурация @nrwl/nx/nx-plugin-checks в вашем файле .eslintrc.json.

{
  "files": ["./package.json", "./generators.json", "./executors.json"],
  "parser": "jsonc-eslint-parser",
  "rules": {
    "@nrwl/nx/nx-plugin-checks": "error"
  }
}

Если у вас есть существующий плагин, вы можете запустить следующий генератор, чтобы добавить новые правила lint:

npx nx g @nrwl/nx-plugin:plugin-lint-checks --projectName=awesomeplugin

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

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

npx nx migrate latest

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

npx nx migrate --run-migrations

Захватывающе?

Мы уже глубоко продвинулись в реализации нашей дорожной карты v15, и на горизонте нас ждет много интересного.

Подробнее

🧠 Nx Docs
👩💻 Nx GitHub
💬 Nrwl Community Slack
📹 Канал Nrwl Youtube
🥚 Бесплатный курс Egghead
🧐 Нужна помощь с Angular, React, Monorepos, Lerna или Nx? Поговорите с нами 😃

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