Кастомная библиотека для angular

Jun 17, 2019

sinopia

npm i -g sinopia

sinopia - это npm репозиторий, который можно использовать локально. Обычно, когда вы делаете npm i, пакет скачается через интернет. Когда sinopia запущена, то на команду npm i ... при отсутствии локального пакета (зерег-го в sinopia) пройдет стандартный install, иначе возьмется ваш собственный репо.

sinopia --version

Окружение

  • Angular 8.0
  • nodejs 12.4.0

Кастомная Библиотека

Установим новое приложение:

ng new appLib

В папке проекта выполним команду (добавим проект библиотеки):

ng g library mLib --prefix=ml

Тем самым мы создадим projects/m-lib директорию (другие характеристики можно посмотреть в angular.json), которая имеет свой собственный package.json файл. Там же имеется файл public-api.ts - этот файл говорит нам, что экспортирует библиотека.

В папке проекта сделаем (соберем проект библиотеки):

ng build mLib --watch

Тем самым мы сделаем build версию нашей библиотеки в папке dist, флаг watch позволит следить за изменениями в нашей библиотеке.

Далее, если вы добавите кастомный компонент в ваше приложение (основное - на уровне выше из папки projects)

<ml-mLib></ml-mLib>

, то вы получите ошибку, так как предварительно нужно перезапустить приложение npm run start и подключить компонент MLibComponent, обратите внимание на имя m-lib:

Отметьте, чтобы в будущем классы из библиотеки были доступны, опубликуйте их экспорт в public-api.ts.

import {MLibComponent} from 'm-lib';

// MLibModule

@NgModule({
    declarations: [
        AppComponent,
        MLibComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Сборка и публикация

Для сборки и публикации:

{
  "name": "test-app",
  "version": "0.0.1",
  "scripts": {
    "lib:build": "ng build m-lib",
    "lib:watch": "ng build m-lib --watch",
    "lib:publish": "npm run lib:build && cd dist/m-lib && npm pack npm publish",
  }
}

Установим в любом проекте:

npm install m-lib

Необходимые шаги для использования в стороннем проекте (локально)

Ставим библиотеку локально при помощи архива

Перейдем по пути .appLib\dist\m-lib и выполним команду

npm pack

Будет создан m-lib-0.0.1.tgz, который содержит модуль библиотеки. Версия и другие опции библиотеки настраиваются в файле package.json нашей библиотеки.

Мы можем установить пакет непосредственно основываясь на пути нашей библиотеки, например:

npm i D:\test_to_angular_6\appLib\dist\m-lib\m-lib-0.0.1.tgz

И подключить библиотечный компонент в блоке declarations. p.s. у меня не строслось, так как по всей вероятность разный версии ng.

Регистрируем локально через sinopia

В командной строке (http://localhost:4873/):

sinopia

В папке проекта посмотрим на config, где опция registry отсутствует:

npm config list

Установим registry

npm set registry http://localhost:4873/

В опции registry появится локальный реестр от sinopia (registry). Добавим user в sinopia:

npm adduser

Опубликуем библиотеку:

npm publish m-lib-1.1.2.tgz

Далее устанавливаем обычным образом наш пакет:

npm install m-lib@1.2.2 --save
Добавить комментарий