Angular: Публикация частной библиотеки Angular для совместного использования компонентов с помощью Verdaccio

Совместное использование компонентов с помощью частной библиотеки в Angular

Введение

Задумывались ли вы о совместном использовании компонентов во многих проектах? Но вы не хотите копировать и вставлять код в каждый проект, чтобы избежать дублирования кода. Если цель состоит в том, чтобы совместно использовать компоненты, утилиты и т.д. Я думаю, что эта статья поможет вам ответить на ваш вопрос. Потому что я хочу рассказать о verdaccio.

Verdaccio

Verdaccio - это простой, не требующий конфигурации локальный частный реестр NPM. Для начала работы не нужна целая база данных. Verdaccio поставляется из коробки с собственной крошечной базой данных и возможностью проксирования других реестров (например, npmjs.org), что также вводит кэширование загруженных модулей по пути.

Легкий Node.js реестр частных прокси | Verdaccio

График проекта

В этом уроке мы создадим проект, как на изображении ниже.

Мы устанавливаем verdaccio и публикуем нашу частную библиотеку для компонента share.
Затем устанавливаем частную библиотеку в другой проект.
И, наконец, пытаемся использовать компонент share из частной библиотеки в текущем проекте.

Установка Verdaccio

Прежде всего, нам необходимо установить verdaccio.

npm i -g verdaccio

После этого давайте запустим verdaccio и посмотрим на некоторые конфигурации.

verdaccio

Затем, в терминале будет показано следующее

Просто откройте http://localhost:4873/ , чтобы показать страницу по умолчанию verdaccio

Установка verdaccio в локальном окружении уже завершена. Далее мы настроим проект, который хотим опубликовать.

Публикация библиотеки

Я использую этот проект на ветке private library, которая берется из основной ветки.

GitHub - afifalfiano/angular-tutorial-blogs at private-library .

Затем я хочу сгенерировать разделяемый модуль в виде библиотеки.

ng g library shared-library

Затем создадим простой компонент для совместного использования. Убедитесь, что созданный компонент назначен модулю shared-library.

ng g c header --module=shared-library.module.ts

Затем обновите файл header.component.html.

<div class = "header">
  <p>{{title}}</p>
  <div class = "menu">
    <ng-container *ngFor = "let item of menuList">
      <a [href] = "item.link" rel = "noreferrer noopener">{{item.title}}</a>
    </ng-container>
  </div>
</div>

После этого обновите стиль header.component.html.

.header {
  margin: 0;
  background: lightblue;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  align-items: center;

  @media screen and (max-width: 475px) {
    flex-direction: column;
  }

  p {
    &:first-child {
      padding: 10px;
      margin: 0;
      font-weight: 600;
      font-size: 18px;
    }
  }

  .menu {
    display: flex;

    @media screen and (max-width: 475px) {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    a {
      text-decoration: none;
      color: #000;
      padding: 10px;
      transition: .9s;

      &:hover {
        transition: .9s;
        color: #fff;
        padding: 10px;
        background-color: rgb(0, 98, 245);
        border-radius: 5px;
      }
    }
  }
}

Также обновите файл typescript в файле header.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  @Input() title!: string;
  @Input() menuList: {link: string, title: string}[] = [];
}

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

Не забудьте обновить shared-library.module.ts

import { NgModule } from '@angular/core';
import { SharedLibraryComponent } from './shared-library.component';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [
    SharedLibraryComponent,
    HeaderComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent
  ]
})
export class SharedLibraryModule { }

Также обновите public-api.ts, чтобы он стал выглядеть так

/*
 * Public API Surface of shared
 */

export * from './lib/shared-library.service';
export * from './lib/shared-library.component';
export * from './lib/shared-library.module';
export * from './lib/header/header.component';

Я уже выложил ветку на github

GitHub - afifalfiano/angular-tutorial-blogs at private-library .

Далее мы зарегистрируем частную библиотеку в verdaccio.

Постройте проект

Выполните эту команду для сборки проекта

ng build shared-library

NPM Add User

После этого добавьте пользователя в реестр verdaccio

npm adduser --registry http://localhost:4873

Публикация библиотеки

После создания пользователя, давайте опубликуем частную библиотеку, выполнив эту команду, убедитесь, что при запуске npm publish вы должны находиться в папке dist/shared-library.

Вы можете выполнить эту команду, чтобы изменить каталог на dist/shared-library

cd dist/shared-library

Затем просто опубликуйте библиотеку

npm publish --registry http://localhost:4873

Для приватной библиотеки версии вы можете изменить версию в package.json, и не забудьте добавить журнал изменений markdown для документирования функции.

Частная библиотека уже опубликована. Далее мы хотим установить ее в angular другого проекта.

Установить частную библиотеку

Я использую этот проект с веткой using-private-library из основной ветки.

GitHub - afifalfiano/angular-tutorial-blogs at using-private-library

Если мы выполним эту команду, возможно, мы получим какую-то ошибку или успех, но не нашу частную библиотеку.

Эта ошибка связана с тем, что npm install ссылается на npmjs.

Итак, чтобы решить эту проблему, нам нужно зарегистрировать нашу частную библиотеку verdaccio. Создайте файл .npmrc и добавьте этот скрипт.

registry=http://localhost:4873

Таким образом, я снова устанавливаю свою частную библиотеку

npm install shared-library

Если вы все еще получаете ошибку в своем проекте, попробуйте следующее решение

Мы успешно установили частную библиотеку

В левой части отображается запрос verdaccio, а в правой - процесс установки частной библиотеки.

Чтобы убедиться, что частная библиотека была установлена. Просто проверьте файл package.json и наведите курсор на библиотеку angular-tutorial-blogs.

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

Затем откройте app.module.ts и импортируйте общую библиотеку модуля.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedLibraryModule } from 'shared-library';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

После этого попробуем вызвать многократно используемый компонент из разделяемой библиотеки. Откройте файл app.component.html и обновите его.

<app-header [title] = "'Hello'" [menuList] = "[{link: '/', title: 'Home'}, {link: '/product', title: 'Product'}]"></app-header>
<router-outlet></router-outlet>

Результат использования общего компонента выглядит следующим образом

Успех Использовать компонент из личной библиотеки

Мы только что закончили этот учебник по angular и verdaccio.

Ветка уже выложена в мой репозиторий на GitHub.

GitHub - afifalfiano/angular-tutorial-blogs at using-private-library

Заключение

Мы можем получить некоторые преимущества от этой библиотеки для публикации нашей частной библиотеки, например, некоторые компании имеют системы проектирования и нам нужно создать частную библиотеку, потому что система проектирования используется только внутренними компаниями.

Еще одно преимущество - мы можем избежать дублирования кода, если у нас есть несколько проектов с одинаковым пользовательским интерфейсом, темой или функцией.

Надеюсь, эта статья оказалась полезной для вас, и спасибо. Если у вас есть какие-либо замечания или предложения, просто ответьте на эту статью или напишите по адресу afifalfiano2@gmail.com.