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

RedDeveloper
05.03.2023 09:46
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

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

Verdaccio CLI
Verdaccio CLI

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

Страница Verdacio
Страница Verdacio

Установка 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
Dist Shared Library
Dist Shared Library

NPM Add User

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

npm adduser --registry http://localhost:4873
После этого добавьте пользователя в реестр verdaccio

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

После создания пользователя, давайте опубликуем частную библиотеку, выполнив эту команду, убедитесь, что при запуске 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
Установка реестра Verdaccio

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

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

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

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

Package.json
Package.json

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

Затем откройте 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

Заключение

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

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

Надеюсь, эта статья оказалась полезной для вас, и спасибо. Если у вас есть какие-либо замечания или предложения, просто ответьте на эту статью или напишите по адресу [email protected].

Ссылки

  • Публикация частной библиотеки Angular с помощью Verdaccio
  • Легкий Node.js реестр частных прокси | Verdaccio
  • 05 - Публикация библиотеки Angular в локальный npm - Geekstrick

#Angular #Verdaccio #SharedLibary #PrivatePackage #TutorialAngular

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.