В Angular 6 появилась возможность создавать и собирать библиотеки с помощью Angular CLI.
Когда я впервые использовал эту функцию, я был восхищен ее простотой, поскольку, хотя было технически возможно создавать библиотеки с использованием более ранних версий Angular, это было в целом разочаровывающим и печальным опытом.
В этой статье я расскажу вам об основных элементах разработки библиотек Angular, в том числе:
- Распространенные варианты использования библиотек Angular.
- Создание библиотеки с помощью Angular CLI.
- Ускорение разработки библиотек Angular с помощью ссылки npm.
- Публикация вашей библиотеки.
Полный демонстрационный код созданной нами библиотеки можно найти здесь.
Примеры использования библиотек Angular
По моему опыту, есть 2 распространенных варианта использования библиотек Angular:
- Создание многоразовой библиотеки компонентов для совместного использования между приложениями.
- Создание функциональности общего уровня обслуживания - например. клиент для работы с внешним источником данных, например API.
Хотя существует множество случаев, когда библиотека Angular хорошо подходит для проекта, стоит подумать, относится ли ваш вариант использования к одному из них, поскольку он приводит к некоторым накладным расходам на обслуживание. Помните, что вы всегда можете написать функциональность как часть общего модуля Angular в своем приложении и при необходимости извлечь ее в библиотеку.
Создание проекта библиотеки Angular
Мы создадим библиотеку Angular, а также демонстрационное приложение для использования этой библиотеки. Мы можем создать их с помощью следующих команд:
ng new example-component-library - create-application=false cd example-component-library ng generate library example-component-library ng generate application example-component-library-app
Использование флага --create-application=false не позволяет Angular создать приложение с именем example-component-library, которое является именем, которое мы хотим дать самой библиотеке, а не тестируемому приложению, как объясняется здесь.
Если теперь мы заглянем внутрь только что созданного рабочего пространства, то увидим папку projects, содержащую подпапку как для библиотеки (example-component-library), так и для приложения (example-component-library-app), которое мы только что сгенерировали. Также есть третья папка, содержащая тестовый проект e2e, который мы можем игнорировать.
Давайте теперь создадим нашу библиотеку и посмотрим, что произойдет:
ng build --project=example-component-library
Если мы заглянем в папку dist, мы увидим, что наша библиотека была собрана и что внутри папки сборки у нас есть несколько разных папок, содержащих приложение в различных форматах модулей, подходящих для разных потребителей, а также папка, содержащая Определения TypeScript.
- bundles - формат модуля UMD.
- esm5 - формат модуля, который использует в основном es5, но также синтаксис импорта / экспорта из es6.
- esm2015 - формат модуля, который использует es2015 / es6.
- fesm5 - сплющенная версия esm5.
- fesm2015 - сплющенная версия esm2015.
- lib - определения TypeScript для библиотеки.
Этот формат называется Angular Package Format, и это формат, используемый в качестве вывода ng-packagr, инструмента, который Angular CLI использует для транспиляции библиотек.
Структурирование проекта библиотеки Angular
В настоящее время содержимое библиотеки выглядит так:
Сначала удалите существующий модуль `example-component-library`, компоненты и служебные файлы - они нам не нужны.
Затем мы добавим компонент, канал и директиву. Мы будем следовать схеме добавления одного компонента на модуль - это позволит приложению-потребителю импортировать только те модули библиотеки, которые его интересуют, а затем для всех остальных модулей будет раскачиваться дерево в процессе сборки. Я настоятельно рекомендую сделать это, так как это действительно повлияет на размер пакетов вашего приложения по мере роста библиотеки.
ng generate module components/foo ng generate component components/foo ng generate module pipes/bar ng generate pipe pipes/bar/bar ng generate module directives/baz ng generate directive directives/baz/baz
После этого наша библиотека должна иметь следующую структуру папок:
Конечно, эту структуру можно изменить в зависимости от ваших предпочтений или предпочтений вашей команды, но следует помнить о следующих важных вещах:
- Имейте по одному компоненту на модуль, чтобы можно было встряхнуть дерево неиспользуемых модулей / компонентов. Исключением являются компоненты, которые всегда используются вместе, должны храниться в одном модуле, например. Если бы вы реализовывали вкладки, TabGroupComponent и TabItemComponent жили бы в одном модуле.
- Старайтесь избегать или ограничивать использование импорта бочек в библиотеке Angular. В Angular 6 есть проблемы с импортом ствола в библиотеки и сборка Angular AOT. Эти проблемы кажутся исправленными в Angular 7, но я все еще регулярно сталкиваюсь с запутанными проблемами из-за импорта барреля, поэтому поддерживаю эту рекомендацию использовать только 1 уровень импорта барреля (или просто избегать их полностью).
Затем мы должны добавить каждый из созданных нами компонентов в exports его модуля:
Теперь мы обновляем public_api.ts, чтобы экспортировать любые файлы в библиотеке, которые мы хотим предоставить потребляющему приложению:
Теперь все, что нам нужно сделать, это перестроить библиотеку, и она будет готова использовать библиотеку из приложения.
ng build — project=example-component-library
Использование нашей библиотеки Angular
В разработке
Во время разработки лучший способ использовать нашу библиотеку - использовать npm link. Это позволит нам создать символическую ссылку из каталога в папке модулей узла нашего потребляющего приложения на скомпилированное приложение в папке dist библиотеки.
cd dist/example-component-library npm link
Мы можем связать проект Angular с этой библиотекой из любого места на нашем локальном компьютере. Из корневой папки проекта:
npm link example-component-library
Если теперь мы запустим библиотеку с флагом наблюдения, и в то же время запустим `ng serve` в другом окне терминала.
ng build — project=example-component-library ng serve
Это позволит нам разрабатывать приложение и (одну или несколько) связанных библиотек одновременно и видеть, как приложение перекомпилируется при каждой модификации исходного кода библиотеки.
В разработке
Для производства мы опубликуем нашу библиотеку в npm, а затем установим ее в приложение с помощью npm install.
Во-первых, вам нужно будет создать учетную запись npm. Теперь войдите в систему из командной строки:
npm login
Из корневой папки проекта:
cd dist/example-component-library npm publish
Теперь наш пакет опубликован на npm (публично), и мы можем установить его, добавив его в package.json зависимости нашего приложения и запустив npm install:
Библиотечные зависимости
Если в вашей библиотеке есть зависимости, то они должны быть указаны как dependencies или peerDependencies в package.json самой вашей библиотеки (а не как package.json в корне проекта). Например, в случае с нашей простой библиотекой у нас есть как раз следующие зависимости:
Angular указывается как одноранговая, а не как зависимость, чтобы приложение-потребитель не устанавливало несколько конфликтующих версий Angular. Эта статья содержит полезную информацию о зависимостях пиров и о том, когда их использовать.
Вывод
Мы увидели, как создать библиотеку компонентов Angular, которую можно использовать в нескольких различных приложениях Angular, а также как мы можем работать с библиотеками в процессе разработки и публиковать их для производства. Ниже я перечислил ресурсы, которые я нашел полезными для самостоятельного изучения библиотек Angular и для написания этой статьи.
Если вы нашли эту статью полезной / приятной для чтения, пожалуйста, похлопайте по ней!
Изначально опубликовано на willtaylor.blog
Подробнее о библиотеках Angular…
