jedną z rzeczy, które zostały wprowadzone w Angular 6, była możliwość tworzenia i budowania bibliotek za pomocą Angular CLI.

Kiedy po raz pierwszy użyłem tej funkcji, byłem zachwycony, jak proste to było, ponieważ chociaż technicznie możliwe było tworzenie bibliotek przy użyciu wcześniejszych wersji Angular, było to całkowicie frustrujące i smutne doświadczenie.

w tym artykule przedstawię kluczowe elementy tworzenia bibliotek Angular:

  • typowe przypadki użycia bibliotek Angular.
  • Tworzenie biblioteki przy użyciu Angular CLI.
  • przyspieszenie rozwoju bibliotek kątowych z linkiem npm.
  • publikowanie swojej biblioteki.

Pełny kod demonstracyjny dla tworzonej przez nas biblioteki można znaleźć tutaj.

przypadki użycia bibliotek Angular

z mojego doświadczenia wynika, że istnieją dwa typowe przypadki użycia bibliotek Angular:

  1. budowanie biblioteki komponentów wielokrotnego użytku do udostępniania między aplikacjami.
  2. budowanie funkcjonalności warstwy usług wspólnych-np. klient do pracy z zewnętrznym źródłem danych, takim jak API.

chociaż istnieje wiele przypadków, w których Biblioteka Angular dobrze pasuje do projektu, warto zastanowić się, czy twój przypadek użycia jest jednym z nich, ponieważ wprowadza pewne koszty konserwacji. Pamiętaj, że zawsze możesz napisać funkcjonalność jako część współdzielonego modułu kątowego w aplikacji i w razie potrzeby rozpakować ją do biblioteki.

Tworzenie projektu biblioteki Angular

stworzymy bibliotekę Angular, a także aplikację demonstracyjną do korzystania z tej biblioteki. Możemy je utworzyć za pomocą następujących poleceń:

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

użycie znacznika--create-application=false zapobiega tworzeniu aplikacji o nazwie 'example-component-library’, która jest nazwą, którą chcemy nadać samej bibliotece, a nie aplikacji testowej, jak wyjaśniono tutaj.

Jeśli teraz zajrzymy do wnętrza obszaru roboczego, który właśnie stworzyliśmy, możemy zobaczyć, że istnieje projects folder zawierający podfolder dla każdej z bibliotek (example-component-library) i aplikacji (example-component-library-app), które właśnie wygenerowaliśmy. Istnieje również trzeci folder zawierający projekt testowy e2e, który możemy zignorować.

zbudujmy teraz naszą bibliotekę i zobaczmy, co się stanie:

ng build --project=example-component-library

Jeśli zajrzymy do folderu dist, zobaczymy, że nasza biblioteka została zbudowana i że wewnątrz folderu build mamy kilka różnych folderów zawierających aplikację w różnych formatach modułów odpowiednich dla różnych konsumentów, a także folder zawierający definicje maszynopisu.

  • Pakiety – format modułu UMD.
  • esm5-format modułu wykorzystujący głównie es5, ale także składnię importu / eksportu z es6.
  • esm2015 – format modułu wykorzystujący es2015 / es6.
  • fesm5 – spłaszczona wersja esm5.
  • fesm2015 – spłaszczona wersjapeerDependencies esm2015.
  • lib – definicje maszynopisu dla biblioteki.

ten format nazywa się Angular Package Format i jest to format używany jako wyjście ng-packagr, narzędzia, którego Angular CLI używa do transpilowania bibliotek.

strukturyzacja projektu biblioteki Angular

obecnie zawartość biblioteki wygląda następująco:

struktura folderów początkowy

najpierw usuń istniejąceexample-component-library pliki modułów, komponentów i usług – nie potrzebujemy ich.

następnie dodamy komponent, potok i dyrektywę. Zastosujemy się do schematu dodawania jednego komponentu na moduł-pozwoli to aplikacji na zaimportowanie tylko tych modułów biblioteki, którymi jest zainteresowana, a następnie na wytrząsanie drzewem wszystkich pozostałych modułów podczas procesu budowania. Gorąco polecam zrobienie tego, ponieważ będzie to naprawdę miało wpływ na rozmiar pakietów aplikacji w miarę wzrostu biblioteki.

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

Po wykonaniu tej czynności nasza biblioteka powinna mieć następującą strukturę folderów:

struktura folderów końcowa

oczywiście tę strukturę można dostosować w zależności od preferencji użytkownika lub zespołu, ale ważne rzeczy, o których należy pamiętać, to:

  • mieć jeden komponent na moduł, aby umożliwić Tree potrząsanie nieużywanych modułów/komponentów.

    wyjątkiem od tego są komponenty, które są zawsze używane razem powinny być przechowywane w tym samym module – np. Jeśli implementujesz karty, komponent TabGroupComponent i TabItemComponent będą żyły w tym samym module.

  • staraj się unikać lub ograniczać import beczek w Bibliotece kątowej

    w Angular 6 występują problemy z importem beczek w bibliotekach i kompilacji kątowej AOT. Problemy te wydają się być naprawione w Angular 7, ale nadal regularnie napotykam mylące problemy z powodu importu beczek i dlatego popieram to zalecenie stosowania tylko 1 poziomu importu beczek (lub po prostu unikania ich całkowicie).

następnie musimy dodać każdy z komponentów, które stworzyliśmy doexports jego modułu:

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

teraz aktualizujemy public_api.ts, aby wyeksportować wszystkie pliki w bibliotece, które chcemy wystawić na działanie używającej aplikacji:

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

teraz wszystko, co musimy zrobić, to przebudować bibliotekę i będzie ona gotowa do użycia biblioteki z aplikacji.

ng build --project=example-component-library

Korzystanie z naszej biblioteki Angular

w trakcie rozwoju najlepszym sposobem korzystania z naszej biblioteki jest użycie linku npm. Pozwoli nam to na distlinkowanie z katalogu w folderze node modules naszej aplikacji do skompilowanej aplikacji w folderze dist biblioteki.

cd dist/example-component-librarynpm link

możemy połączyć projekt Angular z tą biblioteką z dowolnego miejsca na naszej lokalnej maszynie. Z katalogu głównego projektu:

npm link example-component-library

Jeśli teraz uruchomimy bibliotekę z flagą watch i jednocześnie uruchomimy ng serve w innym oknie terminala.

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

To pozwoli nam na stworzenie aplikacji i (jednej lub więcej) połączonych bibliotek jednocześnie, i zobacz, jak aplikacja przekompiluje się z każdą modyfikacją kodu źródłowego biblioteki.

w produkcji

dla produkcji opublikujemy naszą bibliotekę do npm, a następnie zainstalujemy ją w aplikacji za pomocąnpm install.

najpierw musisz utworzyć konto npm. Teraz Zaloguj się z wiersza poleceń:

npm login

z folderu głównego projektu:

cd dist/example-component-librarynpm publish

Nasz pakiet jest teraz opublikowany na npm (publicznie) i możemy go zainstalować, dodając go do naszej aplikacji package.json zależności i uruchamiając package.jsonnpm install :

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

zależności Biblioteki

Jeśli Twoja biblioteka ma zależności, powinny one być określone jakodependencies lubpeerDependencies wpackage.json samej biblioteki (a niepackage.json w katalogu głównym projektu). Na przykład, w przypadku naszej prostej biblioteki, mamy tylko następujące zależności:

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

Angular jest określony jakopeerDependency zamiastdependency, aby uniknąć instalowania przez zużywającą się aplikację wielu, kolidujących ze sobą wersji Angular. Ten artykuł zawiera kilka dobrych informacji na temat peerDependencies I kiedy ich używać.

podsumowanie

widzieliśmy, jak możemy stworzyć bibliotekę komponentów Angular, która może być używana przez wiele różnych aplikacji Angular, a także jak możemy pracować z bibliotekami w rozwoju i publikować je do produkcji. Poniżej wymieniłem zasoby, które uznałem za przydatne do samodzielnej nauki o bibliotekach Angular i do pisania tego artykułu.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.