en af de ting, der blev introduceret i Angular 6, var evnen til at oprette og opbygge biblioteker med Angular cli.

da jeg først brugte denne funktion, var jeg glad for, hvor simpelt det var, da det var teknisk muligt at oprette biblioteker ved hjælp af tidligere versioner af Angular, det var en helt frustrerende og trist oplevelse.

i denne artikel vil jeg lede dig nøgleelementerne i udviklingen af Vinkelbiblioteker:

  • almindelige brugssager til Vinkelbiblioteker.
  • oprettelse af et bibliotek ved hjælp af vinkel CLI.
  • fremskynde udviklingen af kantede biblioteker med npm link.
  • udgivelse af dit bibliotek.

den fulde demokode til biblioteket, som vi opretter, kan findes her.

brug sager til Vinkelbiblioteker

fra min erfaring er der 2 almindelige brugssager til Vinkelbiblioteker:

  1. opbygning af et genanvendeligt komponentbibliotek til deling mellem applikationer.
  2. opbygning af delt service lag funktionalitet-f. eks. en klient til at arbejde med en ekstern datakilde, såsom en API.

selvom der er mange tilfælde, hvor et Vinkelbibliotek passer godt til et projekt, er det værd at overveje, om din brugssag er en af disse, da det introducerer nogle vedligeholdelsesomkostninger. Husk, at du altid kan skrive funktionalitet som en del af et delt Vinkelmodul i din applikation og udtrække det ud i et bibliotek, når det er nødvendigt.

oprettelse af et Vinkelbiblioteksprojekt

Vi opretter et Vinkelbibliotek samt en demo-applikation til at forbruge dette bibliotek. Vi kan oprette disse med følgende kommandoer:

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

brug af--create-application=false flag forhindrer Angular i at oprette et program med navnet ‘eksempel-komponent-bibliotek’, hvilket er det navn, vi vil give til selve biblioteket og ikke testapplikationen, som forklaret her.

Hvis vi nu ser inde i arbejdsområdet, som vi lige har oprettet, kan vi se, at der er en projects mappe, der indeholder en undermappe for hvert af biblioteket (eksempel-komponent-bibliotek) og applikationen (eksempel-komponent-bibliotek-app), som vi lige har genereret. Der er også en tredje mappe, der indeholder et e2e-testprojekt, som vi kan ignorere.

lad os nu bygge vores bibliotek og se hvad der sker:

ng build --project=example-component-library

Hvis vi ser i dist-mappen, vil vi se, at vores bibliotek er bygget, og at inde i build-mappen har vi en række forskellige mapper, der indeholder applikationen i forskellige forskellige modulformater, der er egnede til forskellige forbrugere, samt en mappe, der indeholder TypeScript-definitioner.

  • bundter – UMD modul format.
  • esm5-modul format, der bruger det meste es5, men også import/eksport syntaks fra es6.
  • esm2015-modulformat, der bruger es2015 / es6.
  • fesm5-flad udgave af esm5.
  • fesm2015-flad version afpeerDependencies esm2015.
  • lib – TypeScript definitioner for biblioteket.

dette format kaldes Angular Package Format, og det er det format, der bruges som output fra ng-packagr, det værktøj, som Angular cli bruger til at transpilere biblioteker.

strukturering af dit Vinkelbiblioteksprojekt

bibliotekets indhold ser i øjeblikket sådan ud:

mappestruktur Initial

slet først de eksisterendeexample-component-library modul, komponent og servicefiler – vi har ikke brug for disse.

næste vil vi tilføje en komponent, et rør og et direktiv. Modul – Dette gør det muligt for en forbrugende applikation kun at importere modulerne i biblioteket, som det er interesseret i, og derefter for alle andre moduler at blive rystet under byggeprocessen. Jeg kan varmt anbefale at gøre dette, da det virkelig vil gøre en forskel for størrelsen på dine applikationsbundter, når biblioteket vokser.

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

efter at have gjort dette skal vores bibliotek have følgende mappestruktur:

mappestruktur Final

selvfølgelig kan denne struktur justeres baseret på dig eller dit teams præference, men de vigtige ting at huske på er:

  • har en komponent pr.modul for at tillade til trærystning af ubrugte moduler/komponenter.

    undtagelsen herfra er komponenter, der altid bruges sammen, skal opbevares i samme modul – f.eks. Hvis du implementerede faner, ville en TabGroupComponent og TabItemComponent leve i det samme modul.

  • prøv at undgå eller begrænse brugen af tøndeimport i et Vinkelbibliotek

    I vinkel 6 der er problemer med tøndeimport i biblioteker og vinkel AOT-build. Disse problemer synes at være rettet i vinkel 7, men jeg løber stadig regelmæssigt i forvirrende problemer på grund af tøndeimport og støtter derfor denne anbefaling om kun at bruge 1 niveau af tøndeimport (eller bare undgå dem helt).

næste skal vi tilføje hver af de komponenter, vi oprettede til exports af dets modul:

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

Vi opdaterer nu public_api.ts for at eksportere alle filer i biblioteket, som vi ønsker at udsætte for en forbrugende applikation:

/* * 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';

nu skal vi bare genopbygge biblioteket, og det vil være klar til at forbruge biblioteket fra en applikation.

ng build --project=example-component-library

forbruger vores Vinkelbibliotek

under udvikling den bedste måde at forbruge vores bibliotek bruger npm link. Dette giver os mulighed for at symlink fra en mappe i vores forbrugende applikations node modules-mappe til den kompilerede applikation i bibliotekets dist-mappe.

cd dist/example-component-librarynpm link

Vi kan linke et Vinkelprojekt til dette bibliotek hvor som helst på vores lokale maskine. Fra projektets rodmappe:

npm link example-component-library

Hvis vi nu kører biblioteket med urets flag og samtidig kører ng serve i et andet terminalvindue.

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

Dette giver os mulighed for at udvikle en applikation og (et eller flere) linkede biblioteker samtidigt og se appen kompilere igen med hver ændring af bibliotekets kildekode.

i produktion

til produktion offentliggør vi vores bibliotek til npm og får det derefter installeret i applikationen ved hjælp af npm install.

først skal du oprette en npm-konto. Log nu ind fra kommandolinjen:

npm login

fra projektets rodmappe:

cd dist/example-component-librarynpm publish

vores pakke er nu offentliggjort på npm (offentligt), og vi kan installere den ved at tilføje den til vores applikations package.json afhængigheder og kører npm install:

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

Biblioteksafhængigheder

Hvis dit bibliotek har afhængigheder, skal disse angives som enten dependencies eller peerDependencies i package.json af dit bibliotek selv (og ikke package.json i roden af projektet). For eksempel, i tilfælde af vores enkle bibliotek, har vi bare følgende afhængigheder:

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

Angular er angivet som enpeerDependency i stedet for endependency for at undgå at den forbrugende applikation installerer flere, modstridende versioner af Angular. Denne artikel har nogle gode oplysninger om peerDependencies og hvornår de skal bruges.

konklusion

vi har set, hvordan vi kan oprette et Vinkelkomponentbibliotek, der kan forbruges af flere forskellige Vinkelapplikationer, samt hvordan vi kan arbejde med biblioteker under udvikling og offentliggøre dem til produktion. Nedenfor har jeg listet de ressourcer, jeg har fundet nyttige til at lære om Vinkelbiblioteker selv og til at skrive denne artikel.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.