Начиная с Angular 6, теперь мы можем использовать Angular CLI для создания собственных библиотек. Хороший вариант использования библиотек - это когда у вас есть какой-либо код, который должен использоваться разными проектами / приложениями. Таким кодом могут быть компоненты, службы, каналы, директивы или даже полный модуль, например, для поддержки аутентификации.

Давайте посмотрим, как создать простую библиотеку с помощью Angular CLI. Как всегда, все начинается с простой команды:

ng generate library my-lib

Приведенная выше команда создаст структуру папок projects / my-lib в корне вашего текущего проекта. Для нас даже создается образец структуры библиотеки:

На этом этапе вы можете написать свой код в projects / my-lib / src / my-lib, как если бы вы это делали в любом обычном приложении Angular. Например, если вы создаете компонент, вам нужно обязательно объявить его в своем my-lib.module.ts.

Конечно, CLI здесь, чтобы помочь, так что вы можете просто запускать команды с параметром - project, а наш любимый инструмент командной строки позаботится обо всем:

Еще одна важная вещь, которую следует знать, - это то, что общедоступный API вашей библиотеки определен в projects / my-lib / src / public_api.ts. Вы должны обновить этот файл, чтобы экспортировать общедоступные определения вашего API:

/*
 * Public API Surface of my-lib
 */
export * from './lib/my-lib.service';
export * from './lib/my-lib.component';
export * from './lib/my-lib.module';

Как собрать свою библиотеку?

Как всегда, простая команда CLI сделает свое дело - и результат сборки будет создан в dist / my-lib:

ng build my-lib

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

ng build my-lib --prod

И если вы хотите, чтобы интерфейс командной строки Angular следил за обновлениями и непрерывно создавал вашу библиотеку, вы можете сделать это, начиная с версии интерфейса командной строки Angular 6.2 + с параметром - смотреть:

ng build my-lib --watch

Примечание. Функция watch требует, чтобы была включена опция компилятора Angular enableResourceInlining. Это можно сделать, добавив ниже в свой tsconfig.lib.json

"angularCompilerOptions": {
    "enableResourceInlining": true,
    ...
}

Как пользоваться моей библиотекой?

В своем проекте вы можете просто импортировать и использовать свою библиотеку, как если бы вы использовали любую другую установленную библиотеку NPM:

import { something } from ‘my-lib’

Как опубликовать свою библиотеку?

Если вы хотите сделать свою библиотеку общедоступной в репозитории NPM, вы можете выполнить следующие команды:

ng build my-lib --prod
cd dist/my-lib
npm publish

Если вы никогда раньше не публиковали пакет в npm, вам нужно будет сначала создать учетную запись пользователя и запустить npm login. Вы можете узнать больше о публикации на npm здесь: https://docs.npmjs.com/getting-started/publishing-npm-packages

Когда ваша библиотека станет общедоступной, любой сможет установить ее с помощью npm install. Всякий раз, когда вы хотите опубликовать новую версию, просто обновите номер версии в projects / my-lib / package.json и выполните три вышеуказанные команды, чтобы опубликовать обновление. Это действительно так просто!

Меня зовут Ален Шотар. Я эксперт Google Developer по Angular, а также консультант-основатель и тренер в Angular Training, где я помогаю командам веб-разработчиков учиться и свободно владеть Angular. Нужна помощь с Angular? Давай найдем время поговорить.

Если вам понравилась эта статья, пожалуйста, похлопайте по ней или поделитесь ею. Мы всегда ценим вашу помощь.