En av tingene som ble introdusert I Angular 6 var evnen til å lage og bygge biblioteker med Angular CLI.Da jeg først brukte denne funksjonen, var jeg glad for hvor enkelt det var, for mens det var teknisk mulig å lage biblioteker ved hjelp av tidligere versjoner Av Angular, var det en helt frustrerende og trist opplevelse.

I denne artikkelen vil jeg gå deg de viktigste elementene i å utvikle Kantete biblioteker:

  • Vanlige brukssaker For Kantete biblioteker.
  • Opprette et bibliotek ved Hjelp Av Vinkel CLI.
  • Påskynde utviklingen Av Kantete biblioteker med npm link.
  • Publisere biblioteket ditt.

den fulle demokoden for biblioteket som vi lager finner du her.

Use cases For Angular libraries

Fra min erfaring er det 2 vanlige brukssaker for Angular libraries:

  1. Bygg et gjenbrukbart komponentbibliotek for deling mellom applikasjoner.
  2. Bygge delt tjeneste lag funksjonalitet-f.eks. en klient for å arbeide med en ekstern datakilde som EN API.

Mens det er mange tilfeller der Et Vinkelbibliotek passer godt til et prosjekt, er det verdt å vurdere om brukssaken din er en av disse, da det introduserer noe vedlikehold overhead. Husk at du alltid kan skrive funksjonalitet som en del av en delt Vinkelmodul i applikasjonen din og trekke den ut i et bibliotek når det er nødvendig.

Opprette Et Vinkelbibliotekprosjekt

vi vil lage Et Vinkelbibliotek, samt et demo-program for å konsumere dette biblioteket. Vi kan lage 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

ved hjelp av--create-application=false flagg hindrer Angular fra å lage et program med navnet ‘eksempel-komponent-bibliotek’, som er navnet vi ønsker å gi til selve biblioteket og ikke testprogrammet, som forklart her.

Hvis vi nå ser på innsiden av arbeidsområdet som vi nettopp opprettet, kan vi se at det er en projects mappe som inneholder en undermappe for hver av biblioteket (eksempel-komponent-bibliotek) og programmet (eksempel-komponent-bibliotek-app) som vi nettopp genererte. Det er også en tredje mappe som inneholder et e2e testprosjekt, som vi kan ignorere.

Lar nå bygge biblioteket vårt og se hva som skjer:

ng build --project=example-component-library

hvis vi ser i dist-mappen, ser Vi at biblioteket vårt er bygget og at innsiden av build-mappen har vi en rekke forskjellige mapper som inneholder applikasjonen i forskjellige modulformater som passer for forskjellige forbrukere, samt en mappe som inneholder TypeScript-definisjoner.

  • pakker – UMD-modulformat.
  • esm5-modul format som bruker det meste es5, men også import / eksport syntaks fra es6.
  • esm2015-modulformat som bruker es2015 / es6.
  • fesm5-flatt versjon av esm5.
  • fesm2015-flat versjon av peerDependencies esm2015.
  • lib-TypeScript definisjoner for biblioteket.

Dette formatet kalles Angular Package Format, og det er formatet som brukes som utgang av ng-packagr, verktøyet Som Angular CLI bruker til å transpilere biblioteker.

Strukturere Ditt Angular library project

innholdet i biblioteket ser for øyeblikket slik ut:

Mappestruktur Initial

først sletter du eksisterendeexample-component-library modul, komponent og servicefiler – vi trenger ikke disse.

Neste vil vi legge til en komponent, et rør og et direktiv. Vi vil følge et mønster for å legge til en komponent per modul – dette vil tillate et forbrukerprogram å importere bare modulene i biblioteket som det er interessert i, og deretter for alle andre moduler som skal ristes i løpet av byggeprosessen. Jeg anbefaler å gjøre dette, som det vil virkelig gjøre en forskjell til størrelsen på programmet bunter som 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

etter å ha gjort dette, bør biblioteket vårt ha følgende mappestruktur:

Mappestruktur Endelig

selvfølgelig kan denne strukturen justeres basert på deg eller lagets preferanser, men de viktige tingene å huske på er:

  • Har en komponent per modul for å tillate tre risting av ubrukte moduler/komponenter.

    unntaket til dette er komponenter som alltid brukes sammen bør holdes i samme modul-f.eks. Hvis du implementerte faner, ville En TabGroupComponent og TabItemComponent leve i samme modul.

  • Prøv å unngå eller begrense bruk av fatimport i Et Vinkelbibliotek

    I Vinkel 6 er det problemer med fatimport i biblioteker og Angular AOT-bygningen. Disse problemene ser ut til å være løst i Vinkel 7, men jeg løper fortsatt regelmessig inn i forvirrende problemer på grunn av tønneimport og støtter denne anbefalingen om å bruke bare 1 nivå av tønneimport (eller bare unngå dem helt).

neste må vi legge til hver av komponentene vi opprettet til exports av modulen:

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

vi oppdaterer nå public_api.ts for å eksportere filer i biblioteket som vi ønsker å eksponere for et forbrukerprogram:

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

nå er alt vi trenger å gjøre er å gjenoppbygge biblioteket, og det vil være klar til å konsumere biblioteket fra et program.

ng build --project=example-component-library

Forbruker Vårt Vinkelbibliotek

under utvikling bruker den beste måten å konsumere vårt bibliotek på npm link. Dette vil tillate oss å symlink fra en katalog i vår forbruker programmets node moduler mappe til kompilert program i bibliotekets dist mappe.

cd dist/example-component-librarynpm link

vi kan koble Et Vinkelprosjekt til dette biblioteket fra hvor som helst på vår lokale maskin. Fra prosjektrotmappen:

npm link example-component-library

hvis vi nå kjører biblioteket med klokkeflagget, og samtidig kjører ng serve i et annet terminalvindu.

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

Dette vil tillate oss å utvikle et program og (ett eller flere) koblede biblioteker samtidig, og se app rekompilere med hver modifikasjon til bibliotekets kildekode.

I Produksjon

for produksjon vil vi publisere biblioteket vårt til npm, og deretter få det installert i programmet ved hjelp av npm install.

først må du opprette en npm-konto. Nå logg inn fra kommandolinjen:

npm login

fra prosjektrotmappen:

cd dist/example-component-librarynpm publish

vår pakke er nå publisert på npm (offentlig), og vi kan installere Den ved å legge den til i programmets package.json avhengigheter og kjører npm install:

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

bibliotekavhengigheter

hvis biblioteket ditt har avhengigheter, bør disse angis som entendependencies ellerpeerDependencies ipackage.json biblioteket selv (og ikkepackage.json i roten av prosjektet). For eksempel, når det gjelder vårt enkle bibliotek, har vi bare følgende avhengigheter:

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

Angular er spesifisert som enpeerDependency i stedet for en dependency for å unngå at det tidkrevende programmet installerer flere, motstridende versjoner Av Angular. Denne artikkelen har god informasjon om peerDependencies og når du skal bruke dem.

Konklusjon

Vi har sett hvordan vi kan lage Et Vinkelkomponentbibliotek som kan konsumeres av flere Forskjellige Vinkelapplikasjoner, samt hvordan vi kan jobbe med biblioteker i utvikling og publisere dem for produksjon. Nedenfor har jeg listet opp ressursene jeg har funnet nyttig for å lære Om Vinkelbiblioteker selv, og for å skrive denne artikkelen.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.