ПРИМЕЧАНИЕ: статья относится к более ранним версиям Angular. После версии 6 мы можем создать библиотеку в Angular, используя команду ng generate library ‹library-name›. Подробнее об этом см. здесь: https://next.angular.io/guide/creating-libraries
Когда у вас есть небольшое приложение с тремя или более компонентами, и они не связаны между собой, когда дело доходит до обмена данными посредством взаимодействия компонентов. Для таких компонентов мы видели использование сервисов. Сервисы очень помогают, когда нам приходится использовать одни и те же данные в нескольких компонентах. Затем эти данные используются внутри компонента с помощью внедрения зависимостей.
Это когда у нас есть компоненты внутри одного модуля, который содержит службу. Однако, если мы хотим использовать данные из службы в нескольких модулях, лучше разместить эти данные где-нибудь внутри службы, откуда вы можете фактически импортировать их в любой модуль и компонент, который вы хотите.
Теперь речь идет об одном приложении. Что делать, если вы хотите, чтобы максимальное количество приложений использовали одни и те же данные, и вы определенно не хотите копировать и вставлять код для каждого из ваших приложений. Кроме того, вы не хотите, чтобы какие-либо приложения взаимодействовали друг с другом, а просто делитесь некоторыми данными из внешнего источника со всеми приложениями.
Именно тогда на сцену выходят библиотеки и пакеты. В этом сообщении блога мы увидим, как создать библиотеку Angular и каковы требования для ее создания. Изучая больше библиотек Angular, я наткнулся на замечательный доклад Создавайте и публикуйте библиотеки Angular как профессионал от Juri Strumpflohner, в котором он объясняет необходимость библиотеки с этим изображением.
В нем объясняется, как наши приложения состоят из различных файлов javascript и других внешних библиотек и инструментов и как они собираются вместе.
Для начала давайте рассмотрим моменты, которые следует учитывать при создании библиотеки.
Библиотека должна быть:
- Распространено
- Независимая платформа
- В комплекте
- Поддержка предварительной компиляции
- Работайте с TypeScript, выполняя проверку типов, автозаполнение и т. Д.
Все эти требования вместе составляют идеальную библиотеку Angular, и было разработано решение под названием Angular Package format для поддержки сборки библиотек Angular. Этот формат является рекомендуемым способом создания библиотек Angular и распространения пакетов. Библиотеки, созданные с использованием этого формата, будут правильно обрабатываться приложениями Angular, пакетами узлов, npm.
Это набор рекомендаций, которые команда Angular использует для распространения пакетов, и если мы будем следовать этим рекомендациям при разработке библиотеки Angular, мы будем в безопасности, потому что тогда наша библиотека поддерживается множеством инструментов, которые используются в экосистеме ng. а затем пакеты легко интегрируются с этими инструментами. Он также будет иметь оптимизированный размер пакета и время сборки, которые являются одними из очень важных факторов.
Шаги по созданию библиотеки Angular
- Поскольку библиотека должна быть объединена в едином пакете, первым делом необходимо встроить все внешние шаблоны.
- Следующим шагом будет его компиляция с помощью компилятора ngc, который является своего рода оболочкой для tsc. Ngc будет создавать файлы javascript из файлов машинописного текста, а также создавать файлы d.ts для предварительной компиляции путем создания метаданных для этой библиотеки.
- Создавайте разные форматы ESM2015, UMD.
нг-пакагр
Мы можем разрабатывать библиотеки, используя ng-packagr, проект на nom и Github. Затем эти библиотеки можно поместить в формат пакета Angular. Библиотеки создают для нас все пакеты. Он используется различными загрузчиками модулей, сам встраивает шаблоны, создает определения типов (файлы .d.ts)
Чтобы установить ng-packagr с помощью npm, чтобы затем его можно было использовать глобально из командной строки,
$ npm установить -g ng-packagr
После его установки вы сможете увидеть его версию в файле package.json как зависимость.
Итак, задача состоит в том, чтобы создать файлы кода, которые имеют логику для нашего приложения (файлы .ts), файл .d.ts, который содержит точку входа в файл, и файлы метаданных, то есть package.json.
Внутри файла package.json нам нужно передать свойство ngPackage, которое будет содержать конфигурацию.
Мы передаем для него входной файл и место назначения, где он должен быть создан.
С этими тремя файлами мы можем продолжить, и мы помещаем эти три файла с помощью ng-packagr и получаем следующие файлы в качестве вывода.
- *.d.ts
- package.json
- Связки
- ESM2015
- ESM5
Прежде чем продолжить, важно помнить следующее:
Если вы импортируете что-либо из библиотеки с помощью оператора импорта ES6, это должно обязательно присутствовать в файле ввода библиотеки.
Теперь давайте, наконец, создадим одну библиотеку с помощью ng-packagr.
Нам нужно глобально установить Angular CLI на нашем компьютере. Когда у нас есть это, мы переходим к созданию нового проекта с помощью CLI, используя:
$ ng новый ‹project-name›
CLI спрашивает, хотите ли вы добавить маршрутизацию в свое приложение и какую таблицу стилей хотите использовать. На данный момент нам не нужна маршрутизация, поскольку мы сосредоточимся на создании библиотеки и можем выбрать любую таблицу стилей.
После создания нашего проекта мы переходим к созданию новой папки с папкой src внутри нее.
Наш код Angular находится внутри папки src. Создайте файл компонента со встроенным шаблоном.
Затем создайте файл модуля.
После того, как мы создали модуль и класс компонента, следующим шагом будет создание файла public_api.ts, который будет интерфейсом для библиотеки.
Внутри этого файла мы экспортируем и модуль, и данные компонента. Затем создайте файл конфигурации package.json.
Внутри файла package.json
Мы помещаем такие свойства, как имя, версия, peerDependencies и т. Д.
Теперь, чтобы подготовить файлы внутри папки lib к тому, чтобы они стали библиотекой, нам нужно выполнить несколько шагов.
- Установите ng-packagr и tsickle с помощью npm
$ npm установить ng-packagr tsickle - -save-dev
- Ссылка на файл package.json в папке lib внутри основного package.json
«Build-lib»: «ng-packagr -p lib-folder / package.json».
Теперь, чтобы использовать ng-packagr, нам нужно определить раздел внутри lib-folder / package.json и создать объект ngPackage.
Здесь мы даем имя входного файла и папку назначения.
К этому моменту все необходимые файлы для библиотеки Angular создаются вручную.
Давайте теперь запустим npm run build-lib в консоли и посмотрим, какие файлы он создает для нас:
Если вы теперь перейдете в папку назначения, чтобы проверить, что было создано для вас в вашей библиотеке, вы увидите следующее:
Все файлы пакета, файлы esm2015, fesm2015 созданы и готовы к использованию в приложении Angular.
Теперь установите библиотеку внутри вашего приложения с помощью npm.
$ npm install ‹library-name› / ‹destination-folder-name›
Вы сможете увидеть установленную и созданную вами библиотеку внутри файла package.json.
И теперь вы сможете использовать эту библиотеку в своем приложении. Внутри appmodule импортируйте его, как и любую другую библиотеку, и используйте компонент из вашей библиотеки.
Зайдите в браузер, чтобы увидеть, дает ли компонент из библиотеки результат в вашем приложении Angular.
Ну вот! Вы создали свою первую простую библиотеку Angular, используя ng-packagr.