0Pricing
Angular Academy · Урок

Сборка с помощью ng-packagr

Создавайте выходные данные в формате пакетов Angular

«Сборка с помощью ng-packagr» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Библиотекам нужна специальная сборка

Нельзя публиковать необработанные TypeScript и шаблоны: потребители ожидают скомпилированный стандартизированный результат. Библиотеки Angular собираются в Angular Package Format (APF) с помощью ng-packagr — инструмента, который CLI использует внутри.

Angular Package Format

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

Сборка библиотеки

Запустите ng build, указав проект библиотеки. CLI вызывает ng-packagr и записывает упакованный результат в dist/.

ng build ui-kit
# outputs dist/ui-kit in Angular Package Format

Что создаёт ng-packagr

Папка dist содержит скомпилированные пакеты FESM (объединённые модули ES), файлы типов .d.ts и созданный package.json с корректными полями входа module и types.

dist/ui-kit/
  fesm2022/ui-kit.mjs   # flattened ES module
  index.d.ts            # type declarations
  package.json          # generated, points to the above

Конфигурация ng-package.json

У каждой библиотеки есть файл ng-package.json, сообщающий ng-packagr место назначения результата и файл входа. CLI читает его во время сборки.

// projects/ui-kit/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": { "entryFile": "src/public-api.ts" }
}

Производственная сборка

Собирайте проект в производственной конфигурации, чтобы включить полную оптимизацию. Результат предназначен для публикации, поэтому всегда упаковывайте оптимизированную версию.

ng build ui-kit --configuration production

Частичная компиляция

Библиотеки компилируются в частичном режиме Ivy, а не полностью. Благодаря этому они совместимы с разными версиями Angular, а приложение-потребитель завершает компиляцию (связывание) во время собственной сборки.

Зависимости равноправного уровня в результате

ng-packagr оставляет Angular и другие зависимости равноправного уровня внешними, а не включает их в пакет. Созданный package.json перечисляет их в peerDependencies, поэтому потребитель предоставляет одну общую копию.

Ресурсы и стили

В пакет можно включать стили и статические ресурсы. Объявите их в ng-package.json, чтобы ng-packagr скопировал и обработал их в составе результата в dist для потребителей.

"assets": ["./styles/theme.css"]

Проверка сборки

После сборки проверьте dist/ui-kit: убедитесь, что там есть пакет FESM, файлы .d.ts и package.json, поля exports/module которого указывают на собранные файлы. Именно это получит npm.

Режим наблюдения для разработки

Пересобирайте проект автоматически при редактировании, добавив --watch. Вместе с демонстрационным приложением это обеспечивает быстрый цикл обратной связи при разработке библиотеки.

ng build ui-kit --watch

Быстрая проверка

В какой формат собираются библиотеки Angular?

Итоги

Собирайте библиотеки с помощью ng build <lib>. Эта команда запускает ng-packagr и создаёт Angular Package Format (пакеты FESM, .d.ts, созданный package.json) в dist/. Настраивайте результат через ng-package.json, выполняйте производственную сборку, используйте частичную компиляцию для совместимости между версиями и оставляйте зависимости равноправного уровня внешними.

Часто задаваемые вопросы

Урок «Сборка с помощью ng-packagr» бесплатный?

Да — полный текст урока «Сборка с помощью ng-packagr» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сборка с помощью ng-packagr»?

Создавайте выходные данные в формате пакетов Angular Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Сборка с помощью ng-packagr»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание библиотеки с помощью ng generate
  2. Публичный API и точки входа
  3. Сборка с помощью ng-packagr
  4. Публикация в npm
← Назад к Angular Academy