Что нового в Nx 13.10?

Прошло некоторое время с момента нашего последнего сообщения в блоге о выпуске Nx 13.5. С тех пор произошло много событий. Так что вот!

Уборка и очистка «ядра»

Мы продолжаем оптимизировать ядро Nx. В этом раунде мы начали выполнять некоторые работы по уборке и очистке, которые позволят нам двигаться быстрее в будущем и легче добавлять новые функции. В частности, теперь у нас есть единый пакет nx, который содержит все ядро и функциональность, связанную с CLI, которые ранее были в @nrwl/cli и @nrwl/tao. Это также приводит к уменьшению количества пакетов, которые необходимо установить в любое рабочее пространство Nx. На самом деле, если вы запустите add-nx-to-monorepo — нашу простую команду миграции для перехода Lerna на Nx или добавления Nx в рабочее пространство Yarn/NPM — вы увидите единственный пакет nx и не будете иметь никаких пакетов @nrwl/* вообще.

Демон Nx включен по умолчанию

Одной из основных функций Nx является расчет графа проекта. Он является основой для большинства других возможностей Nx, таких как затронутые команды, кэширование вычислений, вычисление и топологическая сортировка распараллеливаемых задач во время DTE. Это тяжелая операция ввода-вывода. Каждый раз, когда вы изменяете файл, граф проекта должен быть рассчитан заново, что включает чтение исходных файлов, анализ импорта из исходных файлов других пакетов и внешних библиотек.

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

Подробнее читайте в документации: https://nx.dev/guides/nx-daemon.

Опция Nx Cloud opt-in теперь по умолчанию указывает на «Да»

Когда вы создаете новое рабочее пространство Nx с помощью create-nx-workspace, вопрос о выборе Nx Cloud теперь по умолчанию будет указывать на «Да».

Недавно мы изменили Nx Cloud, предоставив 500 бесплатных сэкономленных часов в месяц. По нашим данным, это делает Nx Cloud практически бесплатным для большинства рабочих мест и, таким образом, не вызывает сомнений в целесообразности отказа от участия. Подробнее читайте в анонсе в блоге.

Создавайте и запускайте Nx Plugins локально в своем рабочем пространстве Nx

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

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

Эта иллюстрация должна дать вам приблизительное представление. Очевидно, что некоторые плагины могут быть построены поверх других, используя общую функциональность. Примером может служить плагин @nrwl/js, который не только может использоваться как отдельный плагин, но и является основой для многих других, предоставляя основные функции JavaScript/TypeScript.

Вы можете просто использовать ядро Nx без каких-либо плагинов для начала работы и позже решить добавить дополнительные плагины, такие как @nrwl/react или @nrwl/js и т.д. в зависимости от вашего конкретного случая использования.

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

И мы продолжаем совершенствоваться. Начиная с версии Nx 13.10 вы можете использовать плагины Nx для автоматизации локального рабочего пространства. Установите @nrwl/nx-plugin в ваше рабочее пространство Nx и создайте новый плагин:

npx nx generate @nrwl/nx-plugin:plugin --name=workspace-extensions
Вход в полноэкранный режим Выйти из полноэкранного режима

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

{
  "root": "apps/demo",
  "sourceRoot": "apps/demo/src",
  "projectType": "application",
  "targets": {
    "mybuild": {
      "executor": "@myorg/workspace-extensions:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/someoutput"
      }
    }
  }  
}
Войти в полноэкранный режим Выход из полноэкранного режима

Обратите внимание на определение executor цели mybuild. Никогда еще не было так просто создавать пользовательские исполнители рабочего пространства.

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

npx nx g @myorg/workspace-extensions:<generator-name>
Войти в полноэкранный режим Выйти из полноэкранного режима

где @myorg — это имя вашего рабочего пространства Nx, которое вы определили, а workspace-extensions — имя библиотеки плагина, которую мы выбрали. Вы можете выбрать то, что вам больше подходит. Эта новая настройка открывает широкий спектр новых возможностей, включая определение генераторов рабочего пространства по умолчанию.

Подпишитесь на наш канал Youtube, чтобы узнать о предстоящих уроках и руководствах по этой теме.

Визуализация графика проекта

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

И это только небольшая часть того, что появится в Nx v14, так что следите за новостями!

Новая опция линтера «notDependOnLibsWithTags»

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

Присваивая теги своим проектам, вы можете настроить, какие связи между библиотеками и приложениями разрешены, а какие запрещены.

{
  // ... more ESLint config here

  "@nrwl/nx/enforce-module-boundaries": [
    "error",
    {
      // update depConstraints based on your tags
      "depConstraints": [
        {
          "sourceTag": "type:app",
          "onlyDependOnLibsWithTags": ["type:feature", "type:util"]
        },
        {
          "sourceTag": "type:feature",
          "onlyDependOnLibsWithTags": ["type:feature", "type:util"]
        },
        {
          "sourceTag": "type:util",
          "onlyDependOnLibsWithTags": ["type:util"]
        }
      ]
    }
  ]

  // ... more ESLint config here
}
Вход в полноэкранный режим Выход из полноэкранного режима

Подробнее об этом читайте в этой статье: https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4.

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

{
  // ... more ESLint config here

  "@nrwl/nx/enforce-module-boundaries": [
    "error",
    {
      // update depConstraints based on your tags
      "depConstraints": [
        {
          "sourceTag": "type:util",
          "notDependOnLibsWithTags": ["type:feature"]
        }
      ]
    }
  ]

  // ... more ESLint config here
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Подробнее в твиттере Мирослава:

Miro ???? #StopWar ??
@meeroslav

В вашем репозитории @NxDevTools много тегов проектов? Вы страдаете от длинных определений `onlyDependOnLibsWithTags`, в то время как на самом деле вы хотите запретить только один из двух тегов?

Возможно, вы будете рады узнать, что теперь есть свойство `notDependOnLibsWithTags`, которое делает именно это.

09:49 AM — 21 Mar 2022

Автоматические исправления правил Lint для самоциклических зависимостей и неправильного импорта через границы библиотек

Случайно или позволив вашей IDE автоматически добавить импорт. Часто случается, что используемый путь проходит через отображение пути TS библиотеки через точку входа index.ts. Это приводит к круговой зависимости, когда также tslib-c-another.ts экспортируется через index.ts. Правило линтинга границ модулей Nx правильно выделяет это, как видно на этом скриншоте.

Корректировка этих круговых самоссылки проста, но может быть громоздкой для поиска правильного импорта и отнимать много времени, если у вас сотни либ, которые могут быть затронуты этим. В последней версии Nx мы добавили реализацию исправления для этих правил lint, так что теперь вы можете удобно добавить --fix для автоматической корректировки импорта:

npx nx lint tslib-c --fix
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Аналогично, если у вас есть относительный или абсолютный импорт через границы библиотеки, а не через область видимости NPM, вы получите ошибку линтинга.

Такие импорты также будут скорректированы путем применения --fix к вашей команде linting:

Поддержка React 18

В Nx 13.10 появилась поддержка последнего релиза React v18, чтобы пользователи могли воспользоваться последними возможностями React. Ознакомьтесь с нашей последней статьей в блоге «React CLI, который вы всегда хотели, но не знали о нем», чтобы узнать больше о том, как использовать Nx для разработки React.

React Native получает поддержку Storybook

Мы значительно улучшили поддержку React Native в рабочих пространствах Nx. Ознакомьтесь с нашими последними статьями в блоге

  • Обмен кодом между React Web & React Native Mobile с помощью Nx
  • Представляем поддержку Expo в Nx

Мы рады сообщить, что в дополнение к ранее упомянутым улучшениям, интеграция React Native в Nx теперь также поддерживает Storybook. Просто используйте

npx nx generate @nrwl/react-native:storybook-configuration
Войти в полноэкранный режим Выйти из полноэкранного режима

или воспользуйтесь Nx Console, чтобы получить дополнительную помощь в генерации настроек Storybook.

Возможность показать все подсказки при создании нового рабочего пространства Nx

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

Если вам интересно, вы можете добавить --allPrompts, чтобы получить все возможные вопросы ? .

npx create-nx-workspace@next myorg --allPrompts
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Обеспечьте наилучшие возможности работы с TypeScript с помощью @nrwl/js

Возможно, вы заметили наш новый пакет @nrwl/js, который мы выпустили пару месяцев назад.

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

Улучшения консоли Nx

Вот некоторые из основных моментов в последнем выпуске Nx Console.

Цели Nx в командном меню VSCode

Теперь вы можете открыть командное меню VSCode (Cmd + Shift + P или Win + Shift + P) и ввести «Nx: Run Target», чтобы вызвать меню Run Target, которое позволяет выбрать цель для запуска, а также проект для выполнения цели.

Вид «Запустить цель» теперь синхронизируется с командами рабочего пространства

Если изначально панель «Generate and Run Target» представляла собой статический список обычных целей Nx, то теперь это динамически генерируемый список, основанный на фактических командах рабочего пространства. Таким образом, автоматически появляются и ваши пользовательские цели.

Подсказки для пользователей Angular CLI

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

Узнайте больше в этом коротком видео-инструктаже:

Наша документация становится все более потрясающей

Помимо предоставления потрясающих функций, мы продолжаем совершенствовать нашу документацию. Они необходимы для открытия новых функций и лучшего понимания существующих. За последние недели мы улучшили поддержку навигации, позволяя вам перейти к конкретному пакету с помощью https://nx.dev/packages/<package-name>, например, https://nx.dev/packages/react, где перечислены исполнители и генераторы, поставляемые с этим пакетом Nx, а также улучшили API-документацию отдельных опций исполнителя, включая живую игровую площадку встроенного редактора для экспериментов с различными настройками конфигурации.

Посмотрите твит Бенджамина Кабанеса с несколькими короткими видео:

Бенджамин Кабанес
@bencabanes

✨После большой работы мы выпустили новую документацию API для @NxDevTools с новыми возможностями! ✨

? Представляем игровую площадку опций для исполнителей Nx!

Теперь вы можете играть со значениями свойств каждого исполнителя и проверять их прямо из документации!
nx.dev/packages/js/ex…

21:19 PM — 31 Mar 2022

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

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

npx nx migrate latest
Войти в полноэкранный режим Выйти из полноэкранного режима

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

npx nx migrate --run-migrations
Войти в полноэкранный режим Выход из полноэкранного режима

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

Тогда ждите выхода Nx v14 ?.

  • Ознакомьтесь с журналом изменений релиза

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

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

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

#nx

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *