Как изменить структуру директории dist после сборки NX для публикации библиотек Angular

На чтение 3 мин Опубликовано 09.10.2024

Содержание

Вопрос или проблема
Ответ или решение
1. Изменение project.json
2. Настройка ng-package.json
3. Сборка проекта
4. Проверка структуры каталогов
Заключение

Вопрос или проблема

Я работаю над приложением NX Angular с несколькими библиотеками, которые можно публиковать. В настоящее время, после выполнения команды nx build, структура директории dist выглядит следующим образом:

текущая:

dist
└── libs
    └── ui-kit
        └── components
            └── button

желаемая:

dist
└── ui-kit
    └── button

*project.json:

...
  "projectType": "library",
  "targets": {
    "build": {
      "executor": "@nx/angular:package",
      "outputs": [
        "{workspaceRoot}/dist/{projectRoot}"
      ],
      "options": {
        "project": "libs/ui-kit/ng-package.json"
      },
      "configurations": {
        "production": {
          "tsConfig": "libs/ui-kit/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "libs/ui-kit/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
...

изображение:

Есть ли способ изменить структуру выходной директории по умолчанию после сборки библиотек? В частности, я хочу избежать дополнительных уровней libs и components в папке dist.

Я проверил файлы nx.json и project.json, но не нашел четкого способа настроить путь в процессе сборки.

Буду очень признателен за любые советы или рекомендации по достижению этой цели. Спасибо!

Ответ или решение

Чтобы изменить структуру выходного каталога dist после сборки библиотек в NX Angular и достичь желаемого результата, вам нужно внести некоторые изменения в конфигурационные файлы проекта. Основная задача заключается в том, чтобы скорректировать настройки в project.json и, при необходимости, в ng-package.json. Вот подробная инструкция:

1. Изменение `project.json`

В вашем файле project.json вы можете изменить значение outputs в разделе build. Данное значение определяет, куда именно будет выполняться сборка библиотеки. Вам нужно указать путь без дополнительных уровней, чтобы сделать его более плоским.

"outputs": [
  "{workspaceRoot}/dist/ui-kit" // Измените данный путь на желаемый
]

Полный раздел targets теперь будет выглядеть так:

"targets": {
  "build": {
    "executor": "@nx/angular:package",
    "outputs": [
      "{workspaceRoot}/dist/ui-kit"
    ],
    "options": {
      "project": "libs/ui-kit/ng-package.json"
    },
    "configurations": {
      "production": {
        "tsConfig": "libs/ui-kit/tsconfig.lib.prod.json"
      },
      "development": {
        "tsConfig": "libs/ui-kit/tsconfig.lib.json"
      }
    },
    "defaultConfiguration": "production"
  }
}

2. Настройка `ng-package.json`

Если вы используете ng-packagr, также следует проверить файл ng-package.json, который управляет сборкой вашего пакета. Убедитесь, что вы указали правильный путь для выходных файлов и никаких дополнительных папок не будет добавлено при сборке. Пример:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit", // Указываем необходимую директорию
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

3. Сборка проекта

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

nx build ui-kit

4. Проверка структуры каталогов

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

dist
└── ui-kit
    └── button

Заключение

Эти изменения позволят вам получить желаемую структуру выходного каталога, избегая дополнительных уровней libs и components. Если у вас возникнут дополнительные вопросы или трудности, вы можете всегда обращаться за помощью к сообществу NX или просмотреть документацию по Angular и NX. Удачи в разработке!