При разработке линейки бизнес-продуктов организации обычно предпочитают экосистемный подход, при котором несколько продуктов или проектов могут совместно использовать и повторно использовать код — сервисы, компоненты пользовательского интерфейса и т. д. для достижения максимальной эффективности. Это значительно увеличивает экономию времени и денег организации.
В этой статье мы научимся создавать частный реестр npm для размещения пакетов npm. Пример пакета, который мы здесь используем, создан с использованием Angular. Однако упомянутый здесь процесс не зависит от фреймворка и может использоваться для размещения пакетов, созданных с использованием любой современной технологии.
Настройка фида Azure Artifacts
Прежде всего, нам нужно создать канал артефактов для размещения наших пакетов npm. Для этого мы будем использовать фид Azure Artifacts.
Перейдите на сайт dev.azure.com и выполните следующие действия.
- Создайте организацию, выберите подходящее и логичное название для организации
2. Создайте проект внутри организации. Назовем его SharedServices. Мы держим это в тайне. Более поздним членам может быть предоставлен доступ с помощью управления доступом пользователей.
3. В ссылке «Артефакты» нажмите «Создать ленту». В зависимости от назначения фида выберите подходящее название. Для этого примерного сценария давайте назовем его angularcomponents.
Не забудьте выбрать опцию «Включить пакеты из общедоступных источников». Поскольку этот канал будет служить источником как для общедоступных, так и для частных пакетов. Позже, когда мы подключимся к этому потоку из потребляющих приложений, этот параметр позволит нам установить внешние зависимости из общих общедоступных источников, таких как npmjs.com или nuget.org.
После этого наш приватный фид готов, в котором могут размещаться пакеты — npm, nugets и т. д. Однако рекомендуется поддерживать отдельные фиды для разных категорий пакетов.
Создание проекта библиотеки angular с приложением песочницы и работа на сайте документации
Теперь мы переключаем наше внимание на создание проекта библиотеки, в котором будут храниться наши многократно используемые компоненты и сервисы.
Мы не будем заморачиваться над созданием суперумного компонента, так как это не является нашей настоящей целью.
Давайте создадим проект angular с помощью команды ng create.
ng new angularcomponents
Добавьте новый проект библиотеки с помощью команды ng generate library внутри проекта angularcomponents. Каждый повторно используемый компонент должен быть создан как библиотечный проект.
ng generate library super-header
В этом случае мы создаем компонент суперзаголовка, который можно повторно использовать в приложениях;
Обратите внимание, что приведенная выше команда создала папку projects и поместила многократно используемый компонент super-header в эту папку projects.
Если вы хотите применить стандарт для уникальных идентификаторов ваших компонентов, вы можете сделать это, изменив файл tslint.json, чтобы линтер знал об этом. Давайте сделаем так, чтобы наши компоненты имели abcenterprise в качестве уникального имени идентификатора.
"component-selector": [ true, "element", "abcenterprise", "kebab-case" ]
При публикации пакета, если имя селектора элемента компонента не содержит abcenterprise, мы получим ошибку на этапе линтинга.
Теперь пришло время описать наш пакет, его зависимости, версию и т. д. Все это мы делаем в файле package.json проекта библиотеки.
{
"name": "@abcenterprise/super-header",
"version": "0.0.1",
"description": "This is a super header component",
"peerDependencies": {
"@angular/common": "^8.2.14",
"@angular/core": "^8.2.14"
}
}
Хорошей практикой является использование семантического управления версиями для указания основных/второстепенных/исправлений.
Одноранговые зависимости не устанавливаются вместе с пакетом, но это означает, что для работы пакета такие зависимости должны быть установлены. Потребителю необходимо установить такие одноранговые зависимости.
Наконец, обновите файл README.md, указав информацию о пакете, который вы хотите использовать в потоке артефактов Azure для создания документации о пакете.
Теперь пришло время анализировать, собирать, запускать модульные тесты и публиковать проект библиотеки. Но перед этим нам нужно подключиться к фиду артефактов Azure для размещения нашего пакета.
Подключение к каналу Azure Artifacts
На странице канала Azure Artifacts, которую мы создали ранее, нажмите кнопку Подключиться к каналу, а затем выберите npm из доступных вариантов.
Нам нужно добавить файл .npmrc в проект angularcomponents в тот же каталог, где находится package.json. Это будет содержать адрес реестра фида. Необходимую информацию, которую необходимо ввести в файл .npmrc, можно найти в разделе «Настройка проекта» веб-канала.
Нам также потребуется сгенерировать PAT — токен личного доступа, который будет использоваться для аутентификации. После успешной аутентификации можно установить соединение с этим каналом. Этот токен можно сгенерировать с помощью приведенной ниже команды.
vsts-npm-auth -config .npmrc
Если инструмент vsts-npm-auth еще не установлен на компьютере, нам необходимо установить его, следуя инструкциям в разделе Получить инструменты на странице.
Приведенная выше команда делает следующее.
- Создает токен PAT в организации DevOps npmplayground, которую мы создали ранее.
2. Обновляет файл .npmrc на уровне пользователя, добавляя сведения о сгенерированном токене.
Теперь мы готовы опубликовать наш пакет в ленте.
Публикация в ленту
Теперь давайте проверим проект библиотеки, чтобы убедиться, что установленные нами правила не нарушаются.
ng lint super-header
Мы должны увидеть ошибку в консоли, жалующуюся на то, что селектор должен иметь префикс «abcenterprise». Это связано с тем, что мы установили правило, согласно которому каждый компонент должен иметь имя с префиксом «abcenterprise».
@Component({ selector: "abcenterprise-super-header", template: ` <p>super-header works!</p> `, styles: [], })
Изменение имени селектора на «abcenterprise-super-header» должно исправить ошибку, и линтинг должен пройти.
Теперь мы можем построить проект библиотеки. Нам также нужно скопировать файл .npmrc в папку dist, так как этот файл понадобится для публикации в приватной ленте.
ng build super-header && copy .npmrc dist
Обязательно запустите указанную выше команду в CMD, а не в PowerShell, поскольку PowerShell будет жаловаться на то, что «&&» не является допустимым разделителем операторов.
Это создаст все необходимые пакеты, файлы определения типов и т. д. для публикации.
Всегда полезно написать достаточно модульных тестов для проекта библиотеки.
ng test super-header --watch=false --browser=ChromeHeadless
Приведенная выше команда выполняет модульные тесты один раз в консоли.
Теперь мы готовы отправить пакет в фид.
Из папки dist нам нужно скопировать файл .npmrc в папку super-header. Затем выполните команду npm publish из папки суперзаголовка, чтобы опубликовать пакет в ленте.
Последовательность команд показана ниже.
D:\JYOTI PRAKASH\angularcomponents>cd dist
D:\JYOTI PRAKASH\angularcomponents\dist>copy .npmrc super-header
1 file(s) copied.
D:\JYOTI PRAKASH\angularcomponents\dist>cd super-header
D:\JYOTI PRAKASH\angularcomponents\dist\super-header>npm publish
Если все пойдет хорошо, мы должны увидеть сообщение об успешном выполнении в консоли вместе с деталями пакета.
Мы также можем увидеть пакет в ленте angularcomponents.
Вот и все! Мы успешно опубликовали пакет npm в частном репозитории npm.
Подключение к ленте из потребляющего проекта
Давайте теперь попробуем подключиться к этому каналу из потребляющего проекта и использовать пакет npm из канала.
Первый шаг — добавить файл .npmrc, содержащий адрес канала, как мы делали в предыдущем разделе.
Следующим шагом будет запуск команды npm install с именем нашего пакета и, возможно, версией. Если версия не указана, из канала устанавливается последняя доступная версия пакета.
npm install @abcenterprise/super-header@0.0.1
Затем добавьте импорт в SuperHeaderModule в массиве импорта файла app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SuperHeaderModule } from '@abcenterprise/super-header';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SuperHeaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Теперь давайте запустим приложение и посмотрим, работает ли компонент, который мы создали и опубликовали в приватном репозитории.
Конечно, это так!
Я надеюсь, что эта статья поможет вам, когда вам понадобится создать частный репозиторий npm для вашей организации.
