unul dintre lucrurile care a fost introdus în Angular 6 a fost capacitatea de a crea și de a construi biblioteci cu Angular CLI.

când am folosit prima dată această caracteristică, am fost încântat de cât de simplu a fost, deoarece, deși era posibil din punct de vedere tehnic să creezi biblioteci folosind versiuni anterioare ale Angular, a fost o experiență cu totul frustrantă și întristătoare.

în acest articol, vă voi prezenta elementele cheie ale dezvoltării bibliotecilor unghiulare:

  • cazuri de utilizare comună pentru bibliotecile unghiulare.
  • crearea unei biblioteci folosind CLI unghiular.
  • accelerarea dezvoltării bibliotecilor unghiulare cu link npm.
  • publicarea bibliotecii.

codul demo complet pentru biblioteca pe care o creăm poate fi găsit aici.

cazuri de utilizare pentru bibliotecile angulare

Din experiența mea, există 2 cazuri de utilizare comune pentru bibliotecile angulare:

  1. construirea unei biblioteci de componente reutilizabile pentru partajarea între aplicații.
  2. construirea funcționalității stratului de servicii partajate – de ex. un client pentru lucrul cu o sursă de date externă, cum ar fi un API.

deși există o mulțime de cazuri în care o bibliotecă unghiulară este potrivită pentru un proiect, merită să vă gândiți dacă cazul dvs. de utilizare este unul dintre acestea, deoarece introduce unele cheltuieli de întreținere. Amintiți-vă, puteți scrie întotdeauna funcționalitate ca parte a unui modul unghiular partajat în cadrul aplicației și extrageți-l într-o bibliotecă atunci când este necesar.

crearea unui proiect de bibliotecă unghiulară

vom crea o bibliotecă unghiulară, precum și o aplicație demo pentru a consuma această bibliotecă. Le putem crea cu următoarele comenzi:

ng new example-component-library --create-application=falsecd example-component-libraryng generate library example-component-libraryng generate application example-component-library-app

utilizarea steagului--create-application=false împiedică Angular să creeze o aplicație cu numele „exemplu-componentă-bibliotecă”, care este numele pe care dorim să-l dăm bibliotecii în sine și nu aplicației de testare, așa cum este explicat aici.

dacă ne uităm acum în interiorul spațiului de lucru pe care tocmai l-am creat, putem vedea că există un folderprojects care conține un sub folder pentru fiecare bibliotecă (exemplu-componentă-bibliotecă) și aplicația (exemplu-componentă-bibliotecă-aplicație) pe care tocmai am generat-o. Există, de asemenea, un al treilea dosar care conține un proiect de testare e2e, pe care îl putem ignora.

să construim acum biblioteca noastră și să vedem ce se întâmplă:

ng build --project=example-component-library

dacă ne uităm în folderul dist, vom vedea că biblioteca noastră a fost construită și că în interiorul folderului build avem un număr de foldere diferite care conțin aplicația în diferite formate de module diferite potrivite pentru diferiți consumatori, precum și un folder care conține definiții TypeScript.

  • pachete – formatul modulului UMD.
  • format esm5-modul care utilizează cea mai mare parte es5, dar, de asemenea, sintaxa de import/export de la es6.
  • esm2015-format de modul care utilizează es2015 / es6.
  • fesm5 – versiunea aplatizată a esm5.
  • fesm2015 – versiune aplatizată apeerDependencies esm2015.
  • lib – definiții TypeScript pentru bibliotecă.

acest format se numește Angular Package Format și este formatul utilizat ca ieșire a ng-packagr, instrumentul pe care Angular CLI îl folosește pentru a transpila bibliotecile.

structurarea proiectului dvs. de bibliotecă unghiulară

conținutul bibliotecii arată în prezent astfel:

structura folderului inițial

Mai întâi, ștergeți fișierele existenteexample-component-library module, componente și fișiere de servicii – nu avem nevoie de acestea.

în continuare vom adăuga o componentă, o țeavă și o directivă. Vom urma un model de adăugare a unei componente pe modul – Acest lucru va permite unei aplicații consumatoare să importe numai modulele bibliotecii de care este interesată și apoi ca toate celelalte module să fie agitate în timpul procesului de construire. Vă recomand să faceți acest lucru, deoarece va face cu adevărat diferența în ceea ce privește dimensiunea pachetelor de aplicații pe măsură ce biblioteca crește.

ng generate module components/foong generate component components/foong generate module pipes/barng generate pipe pipes/bar/barng generate module directives/bazng generate directive directives/baz/baz

după ce facem acest lucru, biblioteca noastră ar trebui să aibă următoarea structură de foldere:

structura de foldere finală

desigur, această structură poate fi ajustată în funcție de preferințele dvs. sau ale echipei dvs., dar lucrurile importante de reținut sunt:

  • copac agitare a modulelor neutilizate/componente.

    excepția de la acest lucru este Componente care sunt întotdeauna utilizate împreună ar trebui să fie păstrate în același modul – de exemplu. Dacă implementați File, un TabGroupComponent și TabItemComponent ar trăi în același modul.

  • încercați să evitați sau să limitați utilizarea importurilor de butoaie într-o bibliotecă unghiulară

    în Angular 6 există probleme cu importurile de butoaie în biblioteci și construirea unghiulară AOT. Aceste probleme par a fi fixate în Angular 7, dar încă mă confrunt în mod regulat cu probleme confuze din cauza importurilor de baril și susțin astfel această recomandare de a folosi doar nivelul 1 al importurilor de baril (sau doar de a le evita în întregime).

în continuare trebuie să adăugăm fiecare dintre componentele pe care le-am creat la exports modulului său:

import { CommonModule } from '@angular/common';import { FooComponent } from './foo.component';import { NgModule } from '@angular/core';@NgModule({ declarations: , imports: , exports: })export class FooModule { }

actualizăm acum public_api.ts pentru a exporta orice fișiere din bibliotecă pe care dorim să le expunem unei aplicații consumatoare:

/* * Public API Surface of example-component-library */export * from './lib/components/foo/foo.module';export * from './lib/components/foo/foo.component';export * from './lib/pipes/bar/bar.module';export * from './lib/pipes/bar/bar.pipe';export * from './lib/directives/baz/baz.module';export * from './lib/directives/baz/baz.directive';

acum tot ce trebuie să facem este să reconstruim biblioteca și va fi gata să consume biblioteca dintr-o aplicație.

ng build --project=example-component-library

consumarea bibliotecii noastre unghiulare

în timpul dezvoltării cel mai bun mod de a consuma biblioteca noastră este utilizarea link-ului npm. Acest lucru ne va permite să facem legătura simbolică dintr-un director din folderul modulelor nodului aplicației noastre consumatoare către aplicația compilată din folderul dist al Bibliotecii.

cd dist/example-component-librarynpm link

putem conecta un proiect unghiular la această bibliotecă de oriunde de pe mașina noastră locală. Din folderul rădăcină al proiectului:

npm link example-component-library

dacă rulăm acum biblioteca cu steagul de ceas și, în același timp, rulămng serve într-o altă fereastră terminal.

ng build --project=example-component-libraryng serve

Acest lucru ne va permite să dezvoltăm simultan o aplicație și (una sau mai multe) biblioteci conectate și să vedem aplicația recompilați cu fiecare modificare a codului sursă al Bibliotecii.

în producție

pentru producție, vom publica biblioteca noastră la npm și apoi o vom instala în aplicație folosindnpm install.

În primul rând, va trebui să creați un cont npm. Acum conectați-vă din linia de comandă:

npm login

din folderul rădăcină al proiectului:

cd dist/example-component-librarynpm publish

pachetul nostru este acum publicat pe NPM (public) și îl putem instala adăugându-l la aplicația noastră package.json dependențe și rulează npm install:

"dependencies": { ... "example-component-library": "~0.0.1"}

dependențe de bibliotecă

dacă biblioteca dvs. are dependențe, atunci acestea ar trebui specificate fie cadependencies saupeerDependencies înpackage.json biblioteca în sine (și nupackage.json în rădăcina proiectului). De exemplu, în cazul bibliotecii noastre simple, avem doar următoarele dependențe:

"peerDependencies": { "@angular/common": "^7.1.0", "@angular/core": "^7.1.0"}

Angular este specificat capeerDependency mai degrabă decât undependency pentru a evita ca aplicația consumatoare să instaleze mai multe versiuni conflictuale ale Angular. Acest articol are câteva informații bune despre peerDependencies și când să le folosiți.

concluzie

am văzut cum putem crea o bibliotecă de componente unghiulare care poate fi consumată de mai multe aplicații unghiulare diferite, precum și cum putem lucra cu bibliotecile în dezvoltare și le putem publica pentru producție. Mai jos am enumerat resursele pe care le-am găsit utile pentru a învăța despre bibliotecile angulare și pentru a scrie acest articol.

Lasă un răspuns

Adresa ta de email nu va fi publicată.