Дополнительные улучшения сборки, Angular 12, распределенное выполнение задач и многое другое в Nx 12.3!

Nx 12.3 включает в себя множество новых функций, в том числе инкрементные улучшения сборки, Angular 12, распределенное выполнение задач и многое другое!

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

Если вы не знакомы с ним, узнайте о Nx на страницах nx.dev/angular и nx.dev/react.

Дополнительные улучшения сборки

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

В качестве примера рассмотрим приложение, зависящее от собираемой библиотеки. Следующая конфигурация рабочей области ниже отображает app1 и lib1 с lib1, который необходимо построить до создания app1. Раньше опция --with-deps всегда требовалась для построения зависимостей app1. Без указания этого параметра приложение не будет построено, потому что не были построены его зависимости. Поскольку это требование должно выполняться всегда, цель build для app1 должна декларировать зависимость от цели сборки проектов, от которых зависит app1. Теперь эти зависимости можно определить в файле workspace.json в целевой конфигурации проекта.

{
  "projects": {
    "app1": {
      "targets": {
        "build": {
+          "dependsOn": {
+            "target": "build",
+            "projects": "dependencies"
+          }
        }
      }
    },
    "lib1": {
      "targets": {
        "build": {
+          "dependsOn": {
+            "target": "build",
+            "projects": "dependencies",
+          }
        }
      }
    }
  }
}

Теперь запуск nx build app1 также запланирует и построит nx build lib1 без передачи --with-deps.

Другой пример - обслуживание приложения, которое требует предварительной сборки. Теперь вы также можете указать, что цель зависит от другой цели, определенной для того же проекта.

"app1": {
  "targets": {
    "build": {},
    "serve": {
+      "dependsOn": {
+        "target": "build",
+        "projects": "self"
+      }
    }
  }
}

Теперь обслуживание app1 сначала создаст app1 вместе с любыми дополнительными целевыми зависимостями. Целевые зависимости дают вам больше контроля и настройки зависимостей проекта. Теперь для инкрементных сборок вам не нужно специально передавать --with-deps; сборка всегда является инкрементальной в зависимости от ее целевых зависимостей.

Поддержка обновления до Angular версии 12

• Angular версия 12 была выпущена совсем недавно и включает новые функции, которые взволновали многих пользователей, такие как:
• Поддержка TypeScript 4.2.
• Полная поддержка Webpack 5. В Angular 11 Webpack 5 был дополнительной функцией.
• Поддержка NgRx версии 12.
• Прекращение поддержки Protractor как решения E2E. К счастью, Nx предоставляет стороннюю поддержку для тестирования Cypress E2E.
• Angular ESLint обновлен до версии 12.
• Обновлен Angular Storybook для использования нового синтаксиса Storybook версии 6.
• Удаление целевого объекта lint с помощью TSLint в пользу пакетов, поддерживаемых сообществом. К счастью, Nx также предоставляет стороннюю поддержку Angular ESLint. 

Nx также помогает пользователям автоматически переходить с TSLint на ESLint. Смотрите видео ниже для пошагового руководства.

Миграция приложений Angular с TSLint на ESLint

В качестве дополнительного примечания, пользователи Storybook 5 должны обновиться до Storybook 6.2+ перед обновлением до Angular 12. Это необходимо, потому что Storybook 6.2+ необходим для поддержки Webpack 5+. Более подробную информацию о том, как вы можете выполнить обновление, см. в нашем руководстве по переходу с 5 на 6.

Другие основные моменты

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

• Gatsby указан как предустановка при создании новых рабочих пространств Nx.
• Добавлена ​​поддержка style-jsx для Gatsby.
• Next.js обновлен до версии 10.2.
• Приложения Next.js теперь поддерживают инкрементные сборки.
• Добавлен служебный метод getJestProjects () в пакет @ nrwl / jest для корневого jest.config.js.
• Добавлена строгая опция при генерации приложений React. ESLint теперь имеет рекомендованное расширение, включенное для новых рабочих пространств.

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

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

nx migrate latest

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

nx migrate --run-migrations

Распределенное выполнение задач для Nx Cloud

При работе с большими кодовыми базами выполнение задач только в зависимости от того, что затрагивается в вашей среде непрерывной интеграции (CI), позволяет сэкономить время. Даже когда вам действительно нужно запускать эти наборы задач, лучше запускать их параллельно, чтобы ускорить процесс CI. Традиционно вы настраивали родительское задание для разделения ваших задач, таких как линтинг и тестирование, на «сегменты» и использовали дочерние задания для запуска каждого сегмента задач, каждая из которых имеет свои собственные сведения о задаче. Это превращается в очень сложную и постоянную работу по распределению и сбору результатов этих задач по сети машин. Мы неоднократно решали эту проблему и работаем над новой захватывающей функцией для Nx Cloud, которая называется «Распределенное выполнение задач» (DTE). DTE - это новый способ распределения работы многих задач по множеству машин.

Посмотрите, как Виктор Савкин демонстрирует эту новую функцию с помощью репозитория Nx GitHub.

DTE сейчас находится в частной бета-версии, скоро станет общедоступной и будет бесплатной для проектов с открытым исходным кодом.