Спасибо за попытку написать мою статью. Добро пожаловать!

До сих пор публикация пакета npm была мечтой для меня и многих разработчиков, таких как я.

Я хотел бы поделиться своими мыслями о том, как я написал библиотеку компонентов на Angular и опубликовал ее как модуль npm. Давайте подробно сформулируем.

Предпосылкой являются

  • NodeJS (v8.11.2) и NPM (v6.1.0)
  • Angular Cli (v6.0.8)
  • учетная запись npm
  1. Начнем с создания приложения angular. В командной строке перейдите к папке рабочей области и выполните команду ниже, чтобы создать шаблон для нашего приложения.
work-space > ng new angular-component-library

2. После установки всех зависимостей. Начнем создавать библиотеку, запустив

work-space > cd  angular-component-library
work-space/angular-component-library > ng generate library ratify --prefix=lib

Примечание: приведенная выше команда создает библиотеку ратификации в папке проекта, а компонент следует за префиксом - lib, то есть ‹lib-ratify›

3. Прежде чем мы начнем использовать нашу библиотеку, нам нужно понять, как использовать библиотеки в Angular. Мы можем использовать библиотеки двумя способами

  • Односторонний - через npm - установите библиотеку из модуля npm, например, установите библиотеку в node_modules через npm install library-name импортируйте ее в свое приложение по имени import { something } from 'library-name';
  • Другой способ. Поскольку мы создали библиотеку из нашего приложения angular, Angular cli автоматически включает сведения о библиотеке путем настройки в tsconfig.json и angular.json.

4. Мы выберем Другой способ, чтобы продолжить разработку нашего компонента. Я создал в библиотеке один рейтинговый компонент

<lib-ratify [grade]="grade" [maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></lib-ratify>

5. Вы можете найти использование и подпись компонента здесь в npm, а исходный код библиотеки вы можете найти здесь в github.

6. Пока у нас хорошо получается создавать библиотеки с помощью нашего приложения angular. Теперь давайте посмотрим, как мы можем протестировать, включив компонент из созданной библиотеки в наше приложение angular.

7. Для тестирования нам нужно собрать нашу библиотеку, выполнив следующую команду

work-space > angular-component-library > ng build ratify

Примечание: это сгенерирует вывод, как показано ниже.

Всегда сначала создавайте свою библиотеку, а затем запускайте приложение с помощью ng serve, поскольку приложение всегда ссылается на библиотеку в папке dist, поэтому сборка библиотеки является обязательной перед запуском нашего приложения. И во время разработки, если какие-либо последующие изменения были внесены в библиотеку. Пожалуйста, перестройте (ng build ratify), чтобы увидеть изменения в приложении, в котором мы используем.

8. Давайте включим библиотечный модуль в наш файл app.module.ts, как показано ниже.

9. К вашему сведению - я действительно разработал компонент рейтинга, но в вашем случае вы можете просто использовать ‹lib-ratify /› в app.component.html, чтобы увидеть результат. Если вам интересно увидеть какой-нибудь красочный компонент с взаимодействием, не стесняйтесь повторно использовать lib-ratify.

Примечание: приведенный выше код подготавливает атрибуты, необходимые для компонентов и обратного вызова, чтобы получить выбор рейтинга.

10. Давайте добавим несколько стандартных сценариев для сборки и упаковки модуля npm вместо использования простой команды сборки.

11. Удалите папку dist в корне приложения и запустите,

work-space > angular-component-library > npm run package

Перейдите в папку dist и выполните следующую команду

work-space > angular-component-library > dist > ratify > npm whoami
work-space > angular-component-library > dist > ratify > npm adduser
work-space > angular-component-library > dist > ratify > npm login

12. Приведенные выше команды помогают увидеть, вошли ли вы в систему как пользователь npm. В противном случае npm adduser зарегистрируется для вас через командную строку, а затем npm login выполнит вход.

13. Теперь опубликуйте свою библиотеку,

work-space > angular-component-library > dist > ratify > npm publish

Если вы столкнулись с ошибкой при публикации, проверьте, занято ли уже имя библиотеки, запустив npm search your-library-name, если да, измените имя библиотеки в angular- библиотека компонентов / проекты / ратификация / пакет.json

Приносим извинения за долгий путь, но надеюсь, что это дало вам представление о разработке библиотеки компонентов Angular.

Не стесняйтесь использовать библиотеку angular-ratify в своем приложении angular и дайте мне знать ваш отзыв. Не стесняйтесь проверить значок хлопков слева 👋👋👋

Спасибо 🙏🙏🙏

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .