az egyik dolog, hogy vezették be Angular 6 volt a képesség, hogy hozzon létre és építsenek könyvtárak az Angular CLI.

amikor először használtam ezt a funkciót, el voltam ragadtatva, hogy milyen egyszerű volt, mivel bár technikailag lehetséges volt könyvtárakat létrehozni az Angular korábbi verzióival, ez egy teljesen frusztráló és szomorú élmény volt.

ebben a cikkben bemutatom a szögletes könyvtárak fejlesztésének legfontosabb elemeit:

  • A szögletes könyvtárak általános használati esetei.
  • könyvtár létrehozása A szögletes CLI használatával.
  • A szögletes könyvtárak fejlesztésének felgyorsítása npm link segítségével.
  • A könyvtár közzététele.

az általunk létrehozott könyvtár teljes demókódja itt található.

használati esetek szögletes könyvtárakhoz

tapasztalatom szerint 2 gyakori használati eset van a szögletes könyvtárak számára:

  1. újrafelhasználható komponens könyvtár felépítése az alkalmazások közötti megosztáshoz.
  2. épület megosztott szolgáltatási réteg funkcionalitás-pl. egy külső adatforrással, például API-val dolgozó ügyfél.

bár sok olyan eset van, amikor egy Angular könyvtár jól illeszkedik egy projekthez, érdemes megfontolni, hogy a használati eset ilyen-e, mivel némi karbantartási költséget vezet be. Ne feledje, hogy mindig írhat funkcionalitást egy megosztott Angular modul részeként az alkalmazáson belül, és szükség esetén kibonthatja azt egy könyvtárba.

Angular library projekt létrehozása

létrehozunk egy Angular library-t, valamint egy demo alkalmazást a könyvtár felhasználásához. Ezeket a következő parancsokkal hozhatjuk létre:

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

a --create-application=false a zászló megakadályozza, hogy az Angular hozzon létre egy “example-component-library” nevű alkalmazást, amelyet magának a könyvtárnak akarunk adni, nem pedig a tesztalkalmazásnak, amint azt itt kifejtettük.

Ha most belenézünk az imént létrehozott munkaterületbe, láthatjuk, hogy van egy projects mappa, amely minden egyes könyvtár (példa-komponens-könyvtár) és az alkalmazás (példa-komponens-könyvtár-alkalmazás) almappáját tartalmazza, amelyet éppen létrehoztunk. Van egy harmadik mappa is, amely egy e2e tesztprojektet tartalmaz, amelyet figyelmen kívül hagyhatunk.

most építsük fel a könyvtárunkat, és nézzük meg, mi történik:

ng build --project=example-component-library

Ha megnézzük a dist mappát, látni fogjuk, hogy a könyvtárunk épült, és hogy a build mappán belül számos különböző mappa található, amelyek az alkalmazást különböző modulformátumokban tartalmazzák, amelyek különböző fogyasztók számára alkalmasak, valamint egy mappa, amely TypeScript definíciókat tartalmaz.

  • kötegek – UMD modul formátum.
  • esm5-modul formátum, amely többnyire es5, hanem az import / export szintaxis es6.
  • esm2015-modul formátum, amely es2015/es6.
  • fesm5 – az esm5 lapított változata.
  • fesm2015 – lapított változatapeerDependencies esm2015.
  • lib – TypeScript definíciók a könyvtárhoz.

ezt a formátumot Angular Package Format-nak hívják, és ez az a formátum, amelyet az NG-packagr kimeneteként használnak, az eszköz, amelyet az Angular CLI használ a könyvtárak transzpilálásához.

az Angular library projekt strukturálása

a könyvtár tartalma jelenleg így néz ki:

mappaszerkezet kezdeti

először törölje a meglévő example-component-library modul, összetevő és szolgáltatás fájlokat – ezekre nincs szükségünk.

ezután hozzáadunk egy komponenst, egy csövet és egy irányelvet. Egy modulonként egy komponens hozzáadásának mintáját követjük – ez lehetővé teszi egy fogyasztó alkalmazás számára, hogy csak a könyvtár azon moduljait importálja, amelyek érdeklik, majd az összes többi modul fa megrázása az építési folyamat során. Nagyon ajánlom ezt, mivel a könyvtár növekedésével valóban megváltozik az alkalmazáscsomagok mérete.

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

ezt követően a könyvtárunknak a következő mappastruktúrával kell rendelkeznie:

mappastruktúra végleges

természetesen ez a struktúra módosítható az Ön vagy a csapat preferenciája alapján, de a fontos dolgokat szem előtt kell tartani:

  • modulonként egy komponenssel kell rendelkeznie, amely lehetővé teszi a a fel nem használt modulok/alkatrészek fa rázása.

    kivétel ez alól az, hogy a mindig együtt használt komponenseket ugyanabban a modulban kell tartani – pl. A tabs implementálása esetén a TabGroupComponent és a TabItemComponent ugyanabban a modulban élne.

  • próbálja meg elkerülni vagy korlátozni a hordóbehozatalt egy Angular library-n belül

    az Angular 6-ban problémák vannak a hordóbehozatallal a könyvtárakban és az Angular AOT buildben. Úgy tűnik, hogy ezek a kérdések az Angular 7-ben vannak rögzítve, de a hordóbehozatal miatt még mindig rendszeresen zavaros kérdésekbe ütközök, ezért támogatom ezt az ajánlást, hogy csak 1 hordóbehozatal szintjét használjuk (vagy csak teljesen elkerüljük őket).

ezután hozzá kell adnunk az általunk létrehozott összetevőket a modulexports moduljához:

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

most frissítjük a public_api.ts minden olyan fájl exportálásához a könyvtárban, amelyet ki akarunk tenni egy fogyasztó alkalmazásnak:

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

most már csak annyit kell tennünk, hogy újraépítjük a könyvtárat, és készen áll arra, hogy felhasználja a könyvtárat egy alkalmazásból.

ng build --project=example-component-library

Angular könyvtárunk fogyasztása

a fejlesztés során a könyvtárunk fogyasztásának legjobb módja az npm link használata. Ez lehetővé teszi számunkra, hogy a fogyasztó alkalmazás node modules mappájában található könyvtárból a könyvtár dist mappájában lévő lefordított alkalmazásra hivatkozzunk.

cd dist/example-component-librarynpm link

egy Angular projektet bárhonnan összekapcsolhatunk ezzel a könyvtárral a helyi gépünkön. A projekt gyökérmappájából:

npm link example-component-library

Ha most futtatjuk a könyvtárat a watch jelzővel, ugyanakkor futtassuk a ng serve egy másik terminálablakban.

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

Ez lehetővé teszi számunkra, hogy egyszerre fejlesszünk ki egy alkalmazást és (egy vagy több) összekapcsolt könyvtárat, és megnézzük az alkalmazás újrafordítását a könyvtár forráskódjának minden módosításával.

A gyártás során

a gyártáshoz közzétesszük könyvtárunkat az npm-ben, majd telepítjük az alkalmazásba anpm install használatával.

először létre kell hoznia egy NPM-fiókot. Most jelentkezzen be a parancssorból:

npm login

a projekt gyökérmappájából:

cd dist/example-component-librarynpm publish

a csomagunk most megjelent az npm-en (nyilvánosan), és telepíthetjük az alkalmazásunk package.json függőségek hozzáadásával és futtatásávalnpm install:

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

könyvtári függőségek

Ha a könyvtárnak vannak függőségei, akkor ezeket meg kell adni dependencies vagy peerDependencies a package.json magát a könyvtárat (és nem a package.json a projekt gyökerében). Például az egyszerű könyvtárunk esetében csak a következő függőségek vannak:

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

Angular van megadva, mint egy peerDependencyhelyett dependency annak elkerülése érdekében, hogy a fogyasztó alkalmazás telepíteni több, egymásnak ellentmondó változatai Angular. Ez a cikk néhány jó információt tartalmaz a peerDependencies és mikor kell használni őket.

következtetés

láttuk, hogyan tudunk létrehozni egy Angular component könyvtárat, amelyet több különböző Angular alkalmazás is felhasználhat, valamint hogyan tudunk dolgozni a könyvtárakkal a fejlesztés során, és közzétenni őket termelés céljából. Az alábbiakban felsoroltam azokat a forrásokat, amelyeket hasznosnak találtam a szögletes könyvtárak megismeréséhez és a cikk megírásához.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.