Kustomoidun kirjaston luominen Angularilla

Kustomoidun kirjaston luominen

Aloittaaksesi sinun on ensin luotava uusi projekti CLI:n avulla.

Meidän pitäisi olla kaikki kunnossa tässä vaiheessa. Tästä eteenpäin meidän on kuitenkin käytettävä komentoa, jonka CLI tarjoaa Angular 6:ssa tai uudemmissa versioissa, joka on ng generate. Tämä ng generate-kirjasto on suunniteltu luomaan oma jaettu kirjasto. Sitten antamalla kirjastolle nimen, se lisätään erilliseen projektiin, jota kutsutaan työtilaksi.

Kun teet ng new:n, saat työtilan, jossa on vain yksi projekti, joka on web-projektisi. Tämä ng generate lisää työtilaan toisen version, jotta voimme itse asiassa testata kirjastoamme Angular-sovelluksessa julkaisematta sitä npm:ään tai muuhun resurssiin. Nyt tämä muuttaa tsconfig-tiedostoa, ja se päivitetään, jotta Angular-projekti, erillinen projekti työtilassa, ymmärtää, miten päästä kirjastoon, jaettuun kirjastoon, jota aiomme rakentaa.

Sitten voit rakentaa kirjastosi ng build-komennolla ja antaa sille projektisi nimen, esimerkiksi näin:

Voit käyttää tätä ja testata sitä suoraan toisessa Angular-projektissa, joka on työtilassa. Se tekee tästä siis todella helppoa ilman, että sinun tarvitsee julkaista npm:ään jossain. Sen jälkeen haluaisimme julkaista npm:ään, kun olemme valmiita, olemme testanneet sen ja se näyttää hyvältä, koska haluamme pystyä vetämään sen npm:stä, olipa se sitten npm, joka on tuolla ulkona ja johon kuka tahansa pääsee käsiksi, tai jos se on sisäinen npm, joka sinulla on yrityksessäsi. Haluamme käyttää niitä eri sovelluksiimme, jotta voimme käyttää niitä uudelleen. Siellä on linkki, jos olet uusi osallistumaan npm:ään, joka on tuolla ulkona.

Meidän täytyy tehdä tämä, jotta voimme mennä dist-kansioon ja siellä on package.json-tiedosto mukana. Sitä tullaan käyttämään, jotta voidaan sitten julkaista ylös npm:ään. Meidän tarvitsee vain kirjoittaa seuraava komento:

Näemmekö siis, miten asiat ovat erilaiset meidän ratkaisussamme? Mennään ☺.

Aluksi huomaat, että meillä on kansio projects. Meillä on nyt myös päivitetty tsconfig, kuten näet seuraavasta kuvasta:

Se lisäsi polut sinne, minne viime kädessä tulemme rakentamaan dist-kansiomme, kun teemme buildin, ja siksi sinun täytyy buildata ensin, ennen kuin voit tehdä tämän, koska TypeScript itse asiassa katselee tätä pystyäksesi saamaan tämän kaiken toimimaan.

Nyt toinen iso asia, joka on tehty, on se, että angular.json-tiedostossamme on uusi projekti:

Meillä on siis toissijainen projekti tässä, joka on meidän braga-lib ja huomaatte polun tuossa projektin juurelle. Nyt kaikki muu rakentamiseen ja testaamiseen tarvittava on mukana. Nämä ovat siis tärkeimmät asiat, joita se muuttaa. Nyt voimme tehdä muutoksia kirjastoomme. Joten, jos tulemme sisään, näet normaalit tiedostot täällä ja src-kansion ja sitten mitä he lisäävät on lib, kuten näet:

Libissä tulee olemaan komponenttimme, moduulimme ja jopa palvelu, jos haluat sen. Jos avaat komponenttitiedoston, siinä lukee suurin piirtein vain ”braga-lib toimii!”.

Huomaa nyt selektori ”lib-braga-lib”. Voit muuttaa tätä, mutta nyt jätetään se ennalleen ja käytetään sitä Angular-projektissamme. Katsotaanpa tuota? Ai niin ☺