Vytvoření vlastní knihovny s Angularem
Vytvoření vlastní knihovny
Chcete-li začít, musíte nejprve vytvořit nový projekt pomocí CLI.
V tuto chvíli bychom měli mít vše hotovo. Odtud však musíme použít příkaz, který poskytuje CLI v Angularu 6 nebo vyšším, což je ng generate. Tato knihovna ng generate je určena k vytvoření vlastní sdílené knihovny. Když pak knihovnu pojmenujete, přidá se do samostatného projektu, kterému se říká pracovní prostor.
Při provedení ng new získáte pracovní prostor s jedním projektem, kterým je váš webový projekt. Toto ng generate přidá do pracovního prostoru druhou verzi, abychom mohli naši knihovnu skutečně otestovat v aplikaci Angular bez publikování do npm nebo jiného zdroje. Nyní se upraví soubor tsconfig, který bude aktualizován tak, aby projekt Angular, ten samostatný v pracovním prostoru, pochopil, jak se dostat ke knihovně, sdílené knihovně, kterou budeme vytvářet.
Poté můžete knihovnu sestavit pomocí příkazu ng build a pak jí dát název vašeho projektu, například takto:
Můžete ji použít a otestovat přímo v druhém projektu Angular, který je ve vašem pracovním prostoru. Takže je to opravdu snadné, aniž byste museli někde publikovat do npm. Poté bychom chtěli publikovat do npm, jakmile jsme připraveni, otestovali jsme to a vypadá to dobře, protože chceme mít možnost tahat z npm, ať už je to npm, které je prostě venku a ke kterému se může dostat kdokoli, nebo je to interní npm, které můžete mít ve vaší společnosti. Chceme z nich čerpat do našich různých aplikací, abychom je mohli opakovaně používat. Existuje odkaz, pokud jste nováčci v přispívání do npm, které je tam venku.
Potřebujeme to udělat, abychom šli do složky dist a tam byl obsažen soubor package.json. Ten bude použit k následné publikaci do npm. Stačí napsat následující příkaz:
Takže, měli bychom vidět, jak je to v našem řešení jinak? Pojďme ☺.
Takže nejprve si všimněte, že máme složku projekty. Nyní máme také aktualizovaný tsconfig, jak můžete vidět na následujícím obrázku:
Přidal cesty k místu, kde nakonec budeme vytvářet naši složku dist, jakmile provedeme sestavení, a to je důvod, proč musíte nejprve sestavit, než to budete moci udělat, protože TypeScript se na to bude skutečně dívat, aby to všechno mohlo fungovat.
Další velká věc, která byla provedena, je, že náš soubor angular.json má v sobě nový projekt:
Takže, máme zde sekundární projekt, což je naše braga-lib a všimněte si, že je tam cesta ke kořenu projektu. Nyní je zde obsaženo vše ostatní, co je potřeba k sestavení a testování. To jsou tedy hlavní věci, které upravuje. Nyní odtud můžeme provést změny v naší knihovně. Takže pokud vstoupíme dovnitř, uvidíte zde normální soubory a složku src a pak to, co přidají, je lib, jak vidíte:
V lib bude naše komponenta, náš modul a dokonce i služba, pokud ji chcete. Pokud otevřete soubor komponenty, je v něm v podstatě jen napsáno „braga-lib funguje!“
Nyní si všimněte selektoru „lib-braga-lib“. Ten můžete změnit, ale nyní jej ponechme tak, jak je, a použijme jej v našem projektu Angular. Podíváme se na to? Ach ano ☺
.