yksi Angular 6: ssa käyttöön otetuista asioista oli kyky luoda ja rakentaa kirjastoja Angular CLI: n avulla.

käyttäessäni ensimmäistä kertaa tätä ominaisuutta olin iloinen siitä, kuinka yksinkertainen se oli, sillä vaikka oli teknisesti mahdollista luoda kirjastoja käyttäen Angularyn aikaisempia versioita, se oli täysin turhauttava ja surullinen kokemus.

tässä artikkelissa opastan sinua Kulmakirjastojen kehittämisen avainasioissa:

• Kulmakirjastojen Yleiskäyttötapaukset.
• kirjaston luominen käyttäen Angular CLI: tä.
• nopeuttaa Kulmakirjastojen kehittämistä npm-linkillä.
• julkaisemassa kirjastoasi.

luomamme kirjaston demokoodi löytyy kokonaisuudessaan täältä.

kulmakirjastojen käyttötapauksia

kokemukseni mukaan Kulmakirjastoille on 2 yleistä käyttötapausta:

1. rakentaa uudelleenkäytettävä komponenttikirjasto sovellusten välistä jakamista varten.
2. rakennuksen jaetun palvelukerroksen toiminnallisuus – esim. asiakas ulkoisen tietolähteen, kuten API: n, kanssa työskentelyyn.

vaikka on paljon tapauksia, joissa Kulmakirjasto sopii hyvin projektiin, kannattaa harkita, onko käyttötapauksesi yksi näistä, sillä se tuo joitakin kunnossapitokustannuksia. Muista, että voit aina kirjoittaa toiminnallisuuden osana jaettua Kulmamoduulia sovelluksessasi ja purkaa sen tarvittaessa kirjastoon.

Angular-kirjastoprojektin luominen

luomme Angular-kirjaston sekä demosovelluksen tämän kirjaston kuluttamiseksi. Voimme luoda näitä seuraavilla komennoilla:

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

käyttämällä --create-application=false lippu estää Angularya luomasta sovellusta, jonka nimi on ”example-component-library”, jonka haluamme antaa itse kirjastolle eikä testisovellukselle, kuten tässä selitetään.

Jos katsomme nyt juuri luomamme työtilan sisälle, voimme nähdä, että on olemassa projects kansio, joka sisältää alikansion jokaiselle kirjastolle (esimerkki-komponentti-kirjasto) ja juuri luomallemme sovellukselle (esimerkki-komponentti-kirjasto-sovellus). On myös kolmas kansio, joka sisältää E2E-testiprojektin, jonka voimme sivuuttaa.

nyt rakennetaan kirjastomme ja katsotaan mitä tapahtuu:

ng build --project=example-component-library

Jos katsomme dist-kansioon, näemme, että kirjastomme on rakennettu ja että build-kansion sisällä on useita eri kansioita, jotka sisältävät sovelluksen eri kuluttajille sopivissa moduulimuodoissa, sekä kansio, joka sisältää Konekirjoitusmäärityksiä.

• niput – UMD-moduulimuoto.
• esm5 – moduuliformaatti, joka käyttää enimmäkseen es5: tä, mutta myös ES6: n import / export-syntaksia.
• esm2015 – moduuliformaatti, joka käyttää es2015 / es6.
• fesm5 – litistetty versio esm5: stä.
• fesm2015 – litistetty versiopeerDependencies esm2015.
• lib – Kirjasintyyppiset määritelmät kirjastolle.

tätä muotoa kutsutaan Angular Package-formaatiksi, ja se on ng-packagr-työkaluna käytetty formaatti, jota Angular CLI käyttää kirjastojen transpilointiin.

jäsentämällä Kulmakirjastoprojektisi

kirjaston sisältö näyttää tällä hetkellä tältä:

poista ensin olemassa olevat example-component-library moduuli -, komponentti-ja palvelutiedostot-emme tarvitse näitä.

seuraavaksi lisätään komponentti, putki ja direktiivi. Seuraamme kaavaa lisäämällä yksi komponentti moduulia kohti – tämä mahdollistaa kuluttavan sovelluksen tuoda vain sen kirjaston moduulit, josta se on kiinnostunut, ja sitten kaikki muut moduulit ravistellaan rakennusprosessin aikana. Suosittelen lämpimästi tekemään tämän, sillä se todella muuttaa koko sovelluksen niput kirjaston kasvaessa.

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

tämän jälkeen kirjastossamme tulisi olla seuraava kansiorakenne:

tätä rakennetta voi tietysti säätää sinun tai tiimisi mieltymysten mukaan, mutta tärkeitä asioita pitää mielessä ovat:

• on yksi komponentti moduulia kohti, jotta käyttämättömien moduulien/komponenttien puun ravistelu.

  poikkeuksena on osat, joita käytetään aina yhdessä, tulisi pitää samassa moduulissa – esim. Jos toteutat välilehtiä, TabGroupComponent ja TabItemComponent eläisivät samassa moduulissa.

• yritä välttää tai rajoittaa käyttämällä tynnyrintuontia Kulmakirjastossa

  Kulmakirjastossa 6 on ongelmia tynnyrintuonnin kanssa kirjastoissa ja Kulmikkaassa AOT-rakenteessa. Nämä asiat näyttävät olevan kiinteä Kulmikas 7, mutta olen edelleen säännöllisesti törmätä hämmentäviä kysymyksiä takia tynnyri tuonnin ja niin tukea tätä suositusta käyttää vain 1 taso tynnyri tuonti (tai vain välttää niitä kokonaan).

seuraavaksi on lisättävä jokainen luomamme komponentti exports sen moduulin:

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

nyt päivitämme public_api.ts viedäksemme kirjastoon kaikki tiedostot, jotka haluamme altistaa kuluttavalle sovellukselle:

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

nyt tarvitsee vain rakentaa kirjasto uudelleen, ja se on valmis kuluttamaan kirjaston sovelluksesta.

ng build --project=example-component-library

Kulmakirjastomme kuluttaminen

kehityksen aikana paras tapa kuluttaa kirjastoamme on käyttää npm-linkkiä. Tämä mahdollistaa sen, että voimme symlinkata vievää sovellustamme node modules-kansiossa olevasta hakemistosta kirjaston dist-kansiossa olevaan koottuun sovellukseen.

cd dist/example-component-librarynpm link

voimme linkittää Kulmaprojektin tähän kirjastoon mistä tahansa paikalliskoneestamme. Projektin pääkansiosta:

npm link example-component-library

Jos nyt ajetaan kirjasto kellon lipulla ja samalla ajetaan ng serve toisessa pääteikkunassa.

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

näin voimme kehittää sovelluksen ja (yhden tai useamman) linkitetyn kirjaston samanaikaisesti ja nähdä sovelluksen kääntyvän uudelleen jokaisen kirjaston lähdekoodiin tehdyn muutoksen kanssa.

tuotannossa

tuotantoa varten julkaisemme kirjastomme npm: lle ja asennamme sen sitten sovellukseen käyttäen npm install.

ensin sinun on luotava npm-tili. Nyt Kirjaudu komentoriviltä:

npm login

projektin pääkansiosta:

cd dist/example-component-librarynpm publish

pakettimme on nyt julkaistu npm: ssä (julkisesti), ja voimme asentaa sen lisäämällä sen sovelluksemme package.json riippuvuudet ja käynnissä npm install:

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

kirjastosi riippuvuudet

Jos kirjastossasi on riippuvuuksia, ne tulee määritellä joko dependencies tai peerDependenciespackage.json kirjastosta itsestään (eikä package.json projektin juuressa). Esimerkiksi yksinkertaisen kirjastomme tapauksessa meillä on vain seuraavat riippuvuudet:

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

Kulmikas on määritelty peerDependency eikä dependency, jotta kuluttava sovellus ei asentaisi kulmasta useita, keskenään ristiriitaisia versioita. Tässä artikkelissa on hyviä tietoja peerDependencies ja milloin niitä tulee käyttää.

johtopäätös

olemme nähneet, miten voimme luoda Kulmakomponenttikirjaston, jota voidaan kuluttaa useilla eri Kulmasovelluksilla, sekä miten voimme työskennellä kehitteillä olevien kirjastojen kanssa ja julkaista ne tuotantoon. Alla Olen listannut resursseja olen löytänyt hyödyllistä oppia Kulmikas kirjastot itse, ja kirjoittaa tämän artikkelin.