Skabelse af et brugerdefineret bibliotek med Angular

Skabelse af et brugerdefineret bibliotek

For at komme i gang skal du først oprette et nyt projekt ved hjælp af CLI.

Vi burde være klar på dette tidspunkt. Herfra skal vi dog bruge en kommando, som CLI’en tilbyder i Angular 6 eller højere, som er ng generate. Dette ng generate-bibliotek er designet til at oprette et brugerdefineret delt bibliotek. Ved at give dit bibliotek et navn vil det derefter blive tilføjet til et separat projekt, som kaldes et workspace.

Når du laver ng new, får du et workspace med ét projekt i det, som er dit webprojekt. Denne ng generate vil tilføje en anden version i arbejdsområdet, så vi rent faktisk kan afprøve vores bibliotek i Angular-appen uden at udgive til npm eller andre ressourcer. Dette ændrer tsconfig-filen, og den vil blive opdateret, så Angular-projektet, det separate projekt i arbejdsområdet, forstår, hvordan det kan få adgang til biblioteket, det delte bibliotek, som vi skal bygge.

Så kan du bygge dit bibliotek ved hjælp af kommandoen ng build og derefter give det navnet på dit projekt, som dette:

Du kan bruge dette og teste det direkte i det andet Angular-projekt, der er i dit arbejdsområde. Så det gør det virkelig nemt at gøre dette uden at skulle udgive i npm et eller andet sted. Derefter vil vi gerne udgive til npm, når vi er klar til at gå i gang, vi har testet det, og det ser godt ud, fordi vi ønsker at kunne trække fra npm, uanset om det er npm, der bare er derude, som alle kan få adgang til, eller om det er et internt npm, du måske har i din virksomhed. Vi vil gerne kunne trække fra dem til vores forskellige applikationer, så vi kan få genbrug. Der er et link, hvis du er ny til at bidrage til npm, der er derude.

Vi skal gøre dette for at gå ind i dist-mappen, og der vil være en package.json-fil inkluderet. Den vil blive brugt til derefter at udgive op til npm. Vi skal blot skrive følgende kommando:

Så skal vi se, hvordan tingene er anderledes i vores løsning? Lad os gå ☺.

Så først og fremmest vil du bemærke, at vi har en projektmappe. Vi har nu også en opdateret tsconfig, som du kan se på følgende billede:

Det tilføjede stierne til, hvor vi i sidste ende skal bygge vores dist-mappe, når vi laver et build, og det er derfor, at du skal bygge først, før du kan gøre dette, fordi TypeScript faktisk vil kigge på dette for at kunne få det hele til at virke.

Nu er den anden store ting, der er blevet gjort, at vores angular.json-fil har et nyt projekt i den:

Så, vi har et sekundært projekt lige her, som er vores braga-lib, og du vil bemærke stien der til roden af projektet. Nu er alt andet, der er nødvendigt for at bygge og teste, inkluderet. Så det er de vigtigste ting, som den ændrer. Det vi kan gøre herfra er at foretage ændringer i vores bibliotek. Så hvis vi kommer ind, vil du se normale filer herinde og en src-mappe, og så er det, de tilføjer, et lib, som du kan se:

Lib’et kommer til at indeholde vores komponent, vores modul og endda en service, hvis du ønsker det. Hvis du åbner komponentfilen, står der stort set bare “braga-lib virker!”.

Se nu selectoren “lib-braga-lib”. Du kan ændre dette, men lige nu lader vi det være som det er, og lad os bruge det på vores Angular-projekt. Lad os tage et kig på det? Oh yeah ☺