en av de saker som introducerades i Angular 6 var möjligheten att skapa och bygga bibliotek med Angular CLI.

När jag först använde den här funktionen var jag glad över hur enkelt det var, eftersom det var tekniskt möjligt att skapa bibliotek med tidigare versioner av Angular, det var en helt frustrerande och sorglig upplevelse.

i den här artikeln kommer jag att gå igenom de viktigaste elementen för att utveckla Vinkelbibliotek:

  • vanliga användningsfall för Vinkelbibliotek.
  • skapa ett bibliotek med vinkel CLI.
  • påskynda utvecklingen av Vinkelbibliotek med npm-länk.
  • publicera ditt bibliotek.

den fullständiga demokoden för biblioteket som vi skapar finns här.

använd fall för Vinkelbibliotek

Från min erfarenhet finns det 2 vanliga användningsfall för Vinkelbibliotek:

  1. bygga ett återanvändbart komponentbibliotek för delning mellan applikationer.
  2. bygga funktionalitet för delat servicelager-t.ex. en klient för att arbeta med en extern datakälla som ett API.

även om det finns många fall där ett Vinkelbibliotek passar bra för ett projekt, är det värt att överväga om ditt användningsfall är ett av dessa, eftersom det introducerar lite underhållskostnader. Kom ihåg att du alltid kan skriva funktionalitet som en del av en delad Vinkelmodul i din applikation och extrahera den till ett bibliotek vid behov.

skapa ett Angular library-projekt

Vi skapar ett Angular library, liksom en demoapplikation för att konsumera detta bibliotek. Vi kan skapa dessa med följande kommandon:

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

använda flaggan--create-application=false förhindrar Angular från att skapa ett program med namnet ”example-component-library”, vilket är namnet vi vill ge till själva biblioteket och inte testapplikationen, som förklaras här.

om vi nu tittar inuti arbetsytan som vi just skapade kan vi se att det finns en projects mapp som innehåller en undermapp för varje bibliotek (exempel-komponent-bibliotek) och applikationen (exempel-komponent-bibliotek-app) som vi just genererade. Det finns också en tredje mapp som innehåller ett E2E-testprojekt, som vi kan ignorera.

Låt oss nu bygga vårt bibliotek och se vad som händer:

ng build --project=example-component-library

om vi tittar i dist-mappen ser vi att vårt bibliotek har byggts och att inuti byggmappen har vi ett antal olika mappar som innehåller applikationen i olika modulformat som är lämpliga för olika konsumenter, samt en mapp som innehåller TypeScript-definitioner.

  • buntar-UMD-modulformat.
  • esm5-modulformat som använder mestadels es5, men också import/export syntax från es6.
  • esm2015-modulformat som använder es2015 / es6.
  • fesm5-tillplattad version av esm5.
  • fesm2015-tillplattad version avpeerDependencies esm2015.
  • lib – TypeScript definitioner för biblioteket.

detta format kallas Angular Package Format, och det är det format som används som utdata från ng-packagr, verktyget som Angular CLI använder för att transpilera bibliotek.

strukturera ditt Vinkelbiblioteksprojekt

innehållet i biblioteket ser för närvarande ut så här:

mappstruktur Initial

ta först bort det befintliga example-component-library modul -, komponent-och servicefiler-vi behöver inte dessa.

nästa lägger vi till en komponent, ett rör och ett direktiv. Vi kommer att följa ett mönster för att lägga till en komponent per modul – detta gör det möjligt för en krävande applikation att importera endast modulerna i biblioteket som den är intresserad av, och sedan för att alla andra moduler ska skakas under byggprocessen. Jag rekommenderar starkt att göra detta, eftersom det verkligen kommer att göra skillnad för storleken på dina applikationsbuntar när biblioteket växer.

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 att ha gjort detta bör vårt bibliotek ha följande mappstruktur:

mappstruktur Final

naturligtvis kan denna struktur justeras baserat på dig eller ditt lags önskemål, men de viktiga sakerna att tänka på är:

  • har en komponent per modul för att möjliggöra träd skakning av oanvända moduler/komponenter.

    undantaget från detta är komponenter som alltid används tillsammans bör hållas i samma modul – t.ex. Om du implementerade flikar skulle en TabGroupComponent och TabItemComponent leva i samma modul.

  • försök att undvika eller begränsa med Fat import inom en vinkel bibliotek

    i vinkel 6 Det finns problem med Fat import i bibliotek och vinkel AOT bygga. Dessa problem verkar vara fixade i Angular 7, men jag stöter fortfarande regelbundet på förvirrande problem på grund av fat import och så stöder denna rekommendation att endast använda 1 nivå av fat import (eller bara undvika dem helt).

nästa måste vi lägga till var och en av komponenterna vi skapade tillexports I dess modul:

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

Vi uppdaterar nu public_api.ts för att exportera alla filer i biblioteket som vi vill exponera för en konsumerande 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 behöver vi bara bygga om biblioteket, och det kommer att vara klart att konsumera biblioteket från en applikation.

ng build --project=example-component-library

konsumerar vårt Vinkelbibliotek

under utveckling använder det bästa sättet att konsumera vårt bibliotek npm-länk. Detta gör det möjligt för oss att symboliska länk från en katalog i vår konsumerar programmets nod moduler mapp till den kompilerade programmet i bibliotekets dist mapp.

cd dist/example-component-librarynpm link

Vi kan länka ett Vinkelprojekt till det här biblioteket var som helst på vår lokala maskin. Från projektrotmappen:

npm link example-component-library

om vi nu kör biblioteket med klockflaggan och samtidigt kör ng serve I ett annat terminalfönster.

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

detta gör att vi kan utveckla en applikation och (ett eller flera) länkade bibliotek samtidigt och se appen kompileras om med varje ändring av bibliotekets källkod.

i produktion

för produktion kommer vi att publicera vårt bibliotek till npm och sedan ha det installerat i applikationen med npm install.

först måste du skapa ett npm-konto. Logga nu in från kommandoraden:

npm login

från projektrotmappen:

cd dist/example-component-librarynpm publish

vårt paket publiceras nu på npm (offentligt), och vi kan installera det genom att lägga till det i vår applikations package.json beroenden och kör npm install:

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

biblioteksberoenden

Om ditt bibliotek har beroenden ska dessa anges som antingen dependencies eller peerDependencies I package.json I själva biblioteket (och inte package.json I roten till projektet). Till exempel, när det gäller vårt enkla bibliotek, har vi bara följande beroenden:

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

Angular anges som enpeerDependency snarare än endependency för att undvika att den konsumerande ansökan installera flera, motstridiga versioner av Angular. Den här artikeln har lite bra information om peerDependencies och när du ska använda dem.

slutsats

Vi har sett hur vi kan skapa ett Angular-komponentbibliotek som kan konsumeras av flera olika Angular-applikationer, samt hur vi kan arbeta med bibliotek i utveckling och publicera dem för produktion. Nedan har jag listat de resurser som jag har funnit användbara för att lära mig om Angular libraries själv och för att skriva den här artikeln.

Lämna ett svar

Din e-postadress kommer inte publiceras.