Jedna z věcí, která byla zavedena v Úhlové 6 byla schopnost vytvářet a budovat knihovny s Úhlovou CLI.

Když jsem poprvé použil tento rys byl jsem potěšen, jak jednoduché to bylo, jako když to bylo technicky možné vytvořit knihovny pomocí starší verze Hranatý, to bylo celkem frustrující a skličující zážitek.

v tomto článku vás provedu klíčovými prvky vývoje úhlových knihoven:

  • běžné případy použití úhlových knihoven.
  • vytvoření knihovny pomocí úhlové CLI.
  • urychlení vývoje úhlových knihoven s odkazem npm.
  • publikování knihovny.

kompletní demo kód pro knihovnu, kterou vytvoříme, najdete zde.

případy Užití pro Úhlové knihovny

Z mých zkušeností, tam jsou 2 běžné případy použití Úhlové knihoven:

  1. Budování opakovaně použitelné komponenty knihovna pro sdílení mezi aplikacemi.
  2. budování funkčnosti vrstvy sdílených služeb-např. klient pro práci s externím zdrojem dat, jako je API.

i když existuje mnoho případů, kdy úhlová knihovna je vhodná pro projekt, stojí za zvážení, zda je váš případ použití jedním z nich, protože zavádí určitou režii údržby. Nezapomeňte, že funkce můžete vždy psát jako součást sdíleného modulu Angular v aplikaci a v případě potřeby je extrahovat do knihovny.

vytvoření projektu Úhlové knihovny

vytvoříme úhlovou knihovnu a demo aplikaci pro konzumaci této knihovny. Můžeme je vytvořit pomocí následujících příkazů:

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

Pomocí --create-application=false vlajky zabraňuje Úhlové od vytvoření aplikace s názvem ‚příklad-komponenta-knihovna‘, což je jméno, chceme dát do knihovny sám a ne testovací aplikace, jak je vysvětleno zde.

Pokud se podíváme uvnitř pracovní plochy, které jsme právě vytvořili, můžeme vidět, že tam je projects složka obsahující dílčí složku pro každý soubor knihovny (příklad-komponenta-knihovna) a aplikace (příklad-komponenta-knihovna-app), které jsme právě vytvořené. K dispozici je také třetí složka obsahující testovací projekt e2e, který můžeme ignorovat.

Umožňuje stavět naší knihovny a uvidíme, co se stane:

ng build --project=example-component-library

Pokud se podíváme v dist složce, my uvidíme, že naše knihovna byla postavena, a že uvnitř vytvořit složku máme řadu různých složek, které obsahují aplikace v různých modul formátů vhodných pro různé spotřebitele, stejně jako složku obsahující Strojopis definice.

  • svazky-formát modulu UMD.
  • esm5-formát modulu, který používá většinou es5, ale také syntaxi importu / exportu z es6.
  • esm2015-formát modulu, který používá es2015 / es6.
  • fesm5-zploštělá verze esm5.
  • fesm2015-zploštělá verzepeerDependencies esm2015.
  • lib-definice TypeScript pro knihovnu.

Tento formát se nazývá Angular Package Format a je to formát používaný jako výstup ng-packagru, nástroje, který Angular CLI používá k transpilaci knihoven.

Strukturování Úhlové knihovna projektu

obsah knihovna v současné době vypadat takto:

Strukturu Složek Počáteční

za Prvé, odstranit existující example-component-library module, komponenta a služba soubory – nebudeme potřebovat.

dále přidáme komponentu, trubku a směrnici. Budeme následovat vzor přidávání komponent na modulu – to umožní náročné aplikace importovat pouze moduly z knihovny, která je zajímá, a pak pro všechny další moduly, aby se strom otřesena během procesu sestavení. Vřele doporučuji dělat to, jak to bude opravdu dělat rozdíl velikosti balíčků aplikací, jak knihovna roste.

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

Poté, co to naše knihovna by měla mít následující strukturu složek:

Složku Struktury Konečných

samozřejmě, že tato struktura může být upravena na základě vy nebo váš tým preferencí, ale důležité věci, mít na paměti jsou:

  • Mít jednu složku na modul umožňující strom třese nevyužitých modulů/komponent.

    výjimkou jsou komponenty, které se vždy používají společně, by měly být uchovávány ve stejném modulu – např. Pokud jste implementovali karty, TabGroupComponent a TabItemComponent by žili ve stejném modulu.

  • Zkuste, aby se zabránilo nebo omezit použití barel dovoz do Úhlové knihovna

    V Úhlové 6 tam jsou problémy s barel dovoz v knihovnách a Úhlové AOT stavět. Tyto otázky se zdají být opraveno v Úhlové 7, ale pořád jezdí pravidelně do matoucí problémy, kvůli barel dovozu, a tak se toto doporučení podpořit, použití pouze 1 úroveň barel dovoz (nebo jen se jim vyhnout úplně).

dále musíme přidat každý komponent jsme vytvořili, aby exports jeho modulu:

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

nyní Budeme aktualizovat public_api.ts exportovat všechny soubory v knihovně, které chceme vystavit na náročné aplikace:

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

nyní vše, co musíme udělat, je obnovit knihovnu a bude připravena konzumovat knihovnu z aplikace.

ng build --project=example-component-library

konzumace naší Úhlové knihovny

během vývoje nejlepší způsob, jak spotřebovat naši knihovnu, je použití npm link. To nám umožní symlink z adresáře ve složce node modules naší náročné aplikace do kompilované aplikace ve složce dist knihovny.

cd dist/example-component-librarynpm link

můžeme propojit úhlový projekt s touto knihovnou odkudkoli na našem lokálním počítači. Z projektu kořenové složky:

npm link example-component-library

Když jsme nyní spusťte knihovna se dívat na vlajky, a zároveň spustit ng serve v dalším okně terminálu.

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

To nám umožní vyvíjet aplikace a (jednoho nebo více) propojených knihoven současně, a vidět aplikaci překompilovat s každou úpravou do knihovny zdrojový kód.

Výroba

Pro výrobu, jsme se publikovat naše knihovna npm, a pak ji nainstalovat do aplikace pomocí npm install.

nejprve budete muset vytvořit účet npm. Nyní přihlásit z příkazového řádku:

npm login

Z projektu kořenové složky:

cd dist/example-component-librarynpm publish

Náš balíček je nyní zveřejněn na npm (veřejně), a můžeme jej nainstalovat přidáním do naší aplikace package.json závislostí a běží npm install:

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

Knihovna závislostí

Pokud vaše knihovna má závislosti, pak by měly být uvedeny buď jako dependencies nebo peerDependenciespackage.json vaše knihovna sama (a ne package.json v kořenovém adresáři projektu). Například v případě naší jednoduché knihovny máme pouze následující závislosti:

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

Úhlová je určena jako peerDependency, nikoli dependency aby se vyhnuli náročné aplikace instalace více, konfliktní verze Úhlové. Tento článek obsahuje některé dobré informace o peerDependencies a kdy je použít.

Závěr

Jsme viděli, jak můžeme vytvořit Úhlovou knihovna součástí, které mohou být spotřebovány více různých Úhlové aplikací, stejně jako, jak můžeme pracovat s knihovnami ve vývoji a zveřejní je pro výrobu. Níže jsem uvedl zdroje, které jsem považoval za užitečné pro učení se o úhlových knihovnách sám, a pro psaní tohoto článku.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.