Egyéni könyvtár létrehozása Angularral

Egyéni könyvtár létrehozása

Az induláshoz először is létre kell hoznunk egy új projektet a CLI segítségével.

Ezzel a ponttal már készen kell lennünk. Innen viszont egy olyan parancsot kell használnunk, amit a CLI biztosít az Angular 6-ban vagy magasabb verzióban, ez pedig az ng generate. Ez az ng generate könyvtár egy saját megosztott könyvtár létrehozására szolgál. Ezután, ha nevet adunk a könyvtárunknak, akkor az egy külön projektbe kerül, amit munkaterületnek hívunk.

Az ng new végrehajtása után kapunk egy munkaterületet, amiben egy projekt van, ez pedig a webes projektünk. Ez az ng generate hozzáad egy második verziót a munkaterülethez, hogy ténylegesen tesztelhessük a könyvtárunkat az Angular alkalmazásban anélkül, hogy közzétennénk az npm-ben vagy bármilyen más erőforrásban. Most ez módosítja a tsconfig fájlt, és ez frissülni fog, hogy az Angular projekt, a különálló projekt a munkaterületben, megértse, hogyan juthat el a könyvtárhoz, a megosztott könyvtárhoz, amit építeni fogunk.

Ezután az ng build paranccsal megépíthetjük a könyvtárunkat, majd megadhatjuk a projektünk nevét, például így:

Ezt használhatjuk és közvetlenül a másik Angular projektben, ami a munkaterületünkön belül van, tesztelhetjük. Tehát nagyon egyszerűvé teszi ezt anélkül, hogy valahol az npm-be kellene publikálnod. Ezután szeretnénk közzétenni az npm-be, ha készen állunk, kipróbáltuk, és jól néz ki, mert azt akarjuk, hogy az npm-ből húzzuk be, akár az npm-et, ami csak kint van, hogy bárki elérheti, akár egy belső npm-et, ami a cégednél van. Ezekből akarunk húzni a különböző alkalmazásainkba, hogy újra felhasználhassuk őket. Van egy link, ha új vagy az npm-hez való hozzájárulásban, ami kint van.

Azt kell tennünk, hogy bemegyünk a dist mappába, és ott lesz benne egy package.json fájl. Ezt fogjuk használni, hogy aztán publikáljuk fel az npm-re. Csak a következő parancsot kell megírnunk:

Szóval, látnunk kéne, hogy a mi megoldásunkban mi a különbség? Menjünk ☺.

Szóval először is, észre fogod venni, hogy van egy projects mappánk. Most már van egy frissített tsconfigunk is, ahogy a következő képen láthatod:

Ez hozzáadta az elérési utakat, ahová végül a dist mappánkat fogjuk építeni, ha egyszer buildet csinálunk, és ezért kell először buildelni, mielőtt ezt megteheted, mert a TypeScript valójában ezt fogja nézni, hogy képes legyen az egészet működésre bírni.

A másik nagy dolog, ami megtörtént, hogy az angular.json fájlunkban van egy új projekt:

Szóval, van egy másodlagos projektünk itt, ami a braga-lib, és észre fogod venni az útvonalat ott a projekt gyökeréhez. Most már minden más, ami a buildeléshez és a teszteléshez szükséges, benne van. Tehát ezek a fő dolgok, amiket módosít. Most, amit innen tehetünk, az az, hogy változtatásokat eszközölünk a könyvtárunkon. Tehát, ha belépünk, akkor itt normál fájlokat fogsz látni, és egy src mappát, majd amit hozzáadnak, az egy lib, ahogy láthatod:

A lib fogja tartalmazni a komponensünket, a modulunkat és még egy szolgáltatást is, ha akarod. Ha megnyitjuk a komponens fájlt, akkor nagyjából csak annyit mond, hogy “braga-lib működik!”.

Most figyeljük meg a “lib-braga-lib” szelektort. Ezt meg lehet változtatni, de most hagyjuk úgy, ahogy van, és használjuk az Angular projektünkben. Vessünk rá egy pillantást? Oh yeah ☺