От автора: уже более 3 лет я работаю с Angular. Я использовал так много сторонних библиотек в разных проектах Angular. Можем ли мы создать нашу собственную библиотеку в рамках Angular?
Ответ — библиотеки Angular. Бинго… Да, мы можем создать свою собственную библиотеку. В Angular 6 была добавлена возможность создавать библиотеки с помощью Angular CLI. Когда я разбирался с библиотеками Angular, у меня в голове возникли три мысли:
Что такое библиотеки Angular?
Для чего использовать библиотеки Angular?
Как мы можем их использовать?
Давайте сначала рассмотрим «Что такое библиотеки Angular?»
Библиотека Angular — это проект Angular, который отличается от приложения тем, что не может работать самостоятельно. Библиотека должна быть импортирована и использована в приложении. В Angular 6 была добавлена возможность создавать библиотеки с помощью Angular CLI.
Если вы разработали функционал, который подходит для повторного использования, вы можете создавать свои библиотеки. Эти библиотеки могут использоваться локально в вашей рабочей области, или вы можете опубликовать их в виде пакетов npm, чтобы поделиться с другими проектами или другими разработчиками Angular.
Давайте рассмотрим следующую мысль: «Почему мы должны их использовать?»
Это улучшит возможность повторного использования кода. Мы можем импортировать библиотеки в нескольких приложениях.
Это позволит избежать различных плохих практик или архитектурных ошибок, которые могут затруднить разделение и повторное использование кода в будущем.
Мы можем отделить код, который менее подвержен изменениям (т. е. основные службы). Это предотвратит загрязнение разработчиками основных функций приложения.
Теперь пришло время последнего вопроса: «Как мы можем их использовать?»
В этой статье мы расскажем о шагах по созданию библиотеки и о том, как использовать ее в нескольких приложениях.
Шаги по созданию библиотек Angular
1. Создайте библиотеку с помощью следующих команд консоли:
|
1 2 3 |
ng new my-workspace — create-application=false cd my-workspace ng generate library common-utility-lib |
2. Будет сгенерирован код для библиотеки. Вы можете добавить свои Компоненты, Службы, Пайпы и т. д. в папку src:
3. Angular.json будет обновлен с помощью projectType = «library».
4. Чтобы сделать код библиотеки повторно используемым, вы должны определить для него публичный API. Этот «пользовательский уровень» определяет, что доступно потребителям вашей библиотеки.
public_api.ts предназначен именно для этого. Все, что экспортируется из этого файла, является общедоступным и готово для повторного использования в различных приложениях Angular.
5. Ваша библиотека готова к использованию. Создайте свою библиотеку с помощью команды ng-build.
6. В демонстрационных целях мы создали метод обслуживания и используем его в нескольких приложениях.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CommonUtilityLibService { constructor() { } getDayName(dateStr, locale = 'en-us') { const date = new Date(dateStr; return date.toLocaleDateString(locale, { weekday: 'long' }); } } |
Как использовать созданную библиотеку
1. Использование в нескольких локальных проектах.
Я создал два тестовых проекта, используя модель monorepo.
test-library-first-app (команда: ng generate application test-library-first-app)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component, OnInit } from '@angular/core'; import {CommonUtilityLibService} from 'common-utility-lib'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private libraryService: CommonUtilityLibService) { } ngOnInit() { // give day name in English const dayName = this.libraryService.getDayName('02/05/2020'); console.log(dayName); } } |
test-library-second-app (команда: ng generate application test-library-second-app).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { Component, OnInit } from '@angular/core'; import {CommonUtilityLibService} from 'common-utility-lib'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private libraryService: CommonUtilityLibService ) { } ngOnInit() { // give day name in French const dayName = this.libraryService.getDayName('02/05/2020','fr-Fr'); console.log(dayName); } } |
2. Публикация библиотеки в npm
Используйте Angular CLI и менеджер пакетов npm, чтобы собрать и опубликовать свою библиотеку как пакет npm. Если вы никогда ранее не публиковали пакет в npm, вы должны создать учетную запись пользователя (npm adduser).
|
1 2 3 4 5 6 7 |
ng build common-utility-lib –prod cd dist/common-utility-lib npm adduser (run this command if you don’t have an account on npm) npm publish |
Для справки я опубликовал созданную здесь библиотеку. Вы можете установить и получить доступ к опубликованной библиотеке с помощью следующей команды:
|
1 |
npm install common-utility-lib |
Наслаждайтесь кодированием, если вы узнали что-то новое, пожалуйста, поделитесь ссылкой, чтобы больше людей могли увидеть это.
Автор: Ajay Srivastava
Источник: //medium.com
Редакция: Команда webformyself.
