Kuidas arendada, tarbida ja avaldada nurgaraamatukogu NPM-i jaoks ... kuid mõnikord pole see seda väärt!

Nurk on tõesti populaarne ja võimas JavaScripti raamistik, millele saab veebirakendused luua miljonite igapäevaste kasutajate teenindamiseks. See on Google'i avatud lähtekoodiga raamistik ja igaüks saab teha koostööd. Samamoodi on NPM-i jaoks pistikprogrammina saadaval nurga alt tuhandeid pakette. Selles artiklis me teeme selle ka .

Alustame seda artiklit õpetusena nurgakomponentide raamatukogu väljatöötamiseks, tarbime selle nurga CLI projekti raames ja avaldame selle siis NPM-is. See on samm-sammuline juhend.

Seejärel teisendame selle sama nurgaraamatukogu nurgatoruks ja uurime üksikasjalikumalt, millal "kasutada torusid üle moodulite" ja kuidas torud saavad rakenduse koormust vähendada. Kas soovite sihtida ainult seda osa? Liikuge artiklis kolmveerand viis allapoole.

Torud on kolmanda osapoole raamatukogudega võrreldes palju kergemad, kuna JavaScripti maksumus on ebatõhusa käitlemise korral kliendi poolel liiga kõrge. Addy Osmani selgitab seda oma viimases artiklis.

See artikkel on suunatud kahele peamisele domeenile: nurkkomponent ja nurktorud (ja millal neid kasutada tasub).

Nurgakomponentide raamatukogu

Loome väikese komponendi raamatukogu, mis vormindab suure hulga inimesele loetavasse vormingusse. Näiteks: praegused mõõdikud näitavad, et Twitteril on “55138719 jälgijat” ja meie raamatukogu vormindab selle kui “55,1 miljonit jälgijat”. Kas pole see intuitiivsem ja kasutajasõbralikum? Veel mõned näited:

  • 37574 -> 37,5K
  • 1222130 -> 1,2 M
  • 12414770 -> 12,4 M
  • 19121364128 -> 19,1B

Projekti seadistamine

Kasutame nurga CLI-d oma arengu alusena, kuna see on mugavam kui Githubi nurga repoteeoni kloonimine. Lisaks saame kasu moodulite, komponentide ja torude tellingutest ja auto genereerimisest. * Hiljem kasutame seda sama projekti oma komponendi ja torude arendamiseks ning kasutame seda ka meie raamatukogu testimiseks liivakastina.

Alustame CLI globaalse installimisega ja seejärel projekti käivitamisega.

npm install @ nurk / cli -g
uus uus numbrite vormindaja

Nüüd, kui meil on projekti põhistruktuur, saame liikuda projekti kausta “ng-number-formatter” ja teenindada projekti.

ng serve // ​​Navigeerimine `localhost: 4200`

Raamatukogu moodulite / komponentide algatamine

Nüüd, kui meie kõige lihtsam nurgarakendus töötab ja töötab, lisame oma kohandatud moodulid ja komponendid numbrite vormistamiseks inimloetavas vormingus.

genereerib moodulimoodulid / ng-arvude vormindaja
ng genereerib komponentide mooduleid / ng-arvu vormindajat

See automaatne genereerimine loob kohustuslikud failid nurgamoodulite arendamiseks. Meie puhul on need sõltumatud moodulid mõeldud üksteisest eraldamiseks, et saaksime neid eksportida eraldiseisvate nurgaraamatukogudena. Hea tava on ka moodulite eraldamine üksteisest nagu mikroteenuste kontseptsioon.

Nurga all olevaid mooduleid võib pidada konfiguratsioonifailideks, mis aitavad meie komponentidel olla nurkprojekti osaks. Need moodulid põhinevad komponentidel, mis tegelikult muudab meie rakenduse produktiivseks ja käivitab selle.

Numbrivormingu moodul

See moodulifail on eneseväljendusvõimeline ja selles näeme meie raamatukogu deklaratsioone ja eksporti.

@NgModule ({
    import: [
        CommonModule
    ],
    deklaratsioonid: [
        NgNumberFormatterComponent
    ],
    eksport: [
        NgNumberFormatterComponent
    ]
})

Numbrivormingu mall

Nüüd avage rakenduse / modules / ng-number-vormindaja kaustas fail ng-number-formatter.component.html ja lisage vajalik HTML-märgend. Kujunduse huvides võime manipuleerida faili ng-number-formatter.component.css sisuga, kuid praegu jätame selle tähelepanuta ja laseme asjadel võimalikult lihtsaks jääda.

 {{ngNumber}} 

Siin määratletakse muutuja ngNumber seotud komponendis ng-number-formatter.component.ts. Kuna saame numbri stringi vormingus mõnelt vanemalt komponendilt (meie puhul see oleks app.component.ts - näitame, kuidas need komponendid on lingitud), vormindame selle numbri inimloetavas vormingus meie ng-number-formatter.component.ts. Siis kuvame selle HTML-malli kaudu, millele lisasime just Span-sildi.

Numbrivormingu komponent

Avage rakendus ng-number-formatter.component.ts samas rakenduse / moodulite / ng-number-vormingu kaustas. Näete, et komponendi jaoks on juba olemas põhikood. Äsja muudetud mall on meie komponendis juba lingitud.

@Komponent ({
    valija: 'ng-number-formatter',
    sisendid: ['ngNumber'],
    templateUrl: './ng-number-formatter.component.html',
    styleUrls: ['./ng-number-formatter.component.css']
})

Siin valija: 'ng-number-formatter' on kohandatud märgend, mida meie raamatukogu tarbijana peame viitama oma komponendile. Siis sisendid: ['ngNumber'] on kahe kontekstiga.

Meie „ng-number-formatter-komponendis” (helistaja) käsitletakse seda muutujana, mis võtab vastu sissetuleva numbri stringi. Teisest küljest käsitletakse rakenduses app.component.ts (helistaja) seda meie valijale atribuutina, kes saadab selle väärtuse.

Seejärel ühendavad malli link mallUrl: '.ng-number-formatter.component.html' ja styleUrls: '.ng-number-formatter.component.css'.

Värskendage faili numbrite teisendamiseks vajaliku loogikaga. Järgmine meie mall ei pea olema eraldi failis. Seega saame selle eemaldada ja manustada otse oma komponendisse mallina: ' {{ngNumber}} '. Järgnev ülevaade näitab meie komponendi täielikku sisu. Võrrelge tehtud muudatusi ja jätkame järgmiste sammudega.

Nurgakomponentide raamatukogu tarbimine

Mis tahes nurgaraamatukogu tarbimiseks peate esmalt saama viite moodulis ja seejärel kasutama mallil selle valija ng-number-vormingut (nagu on märgitud meie komponendi valija vahekaardil).

Kolmanda osapoole raamatukogu tarbimisel projektis ja liivakastina kasutamisel on ainult üks erinevus.

1. Kuna meie teeki pole veel avaldatud ja see pole NPM-i kataloogis loetletud, vajame moodulisse viitamiseks kogu tee.

importige {NgNumberFormatterModule} kaustast './modules/ng-number-formatter/ng-number-formatter.module';

2. Ja kui meie raamatukogu avaldatakse ja NPM-kataloogis loetletakse, on see palju lihtsama viitelingiga. Nagu nii:

importige {NgNumberFormatterModule} rakendusest 'ng-number-formatter';

Ja siin on meie uhiuue raamatukogu tarbimiseks kohandatud silt:

 
// Vormingus olev number on palju mugavam "1,2M"

Pakendamine ja avaldamine NPM-is

Nüüd, kui oleme oma iseseisva mooduli Liivakasti projekti raames välja töötanud ja testinud, on meil hea minna. Esiteks on hea külg see, et see moodul on oma olemuselt nii lihtne ja minimaalne, et sellel pole muid sõltuvusi. Teiseks on hea, et meie moodul on täiesti isoleeritud ja ühendatud meie liivakasti komponendiga, mis teeb selle eraldi pakkimiseks ja avaldamiseks valmis.

Järgmine samm on muuta see maailmale avatuks, et teised saaksid seda oma nurgarakendustes numbrite vormindamiseks alla laadida ja kasutada.

Meie numbrivormingu mooduli pakkimise ja avaldamisega alustamiseks vajame pakendit, mis muudaks selle mooduli raamatukoguks, mida saab tuvastada NPM-pakendina. Selleks valime “ng-packagegr”, mis teisendab teie raamatukogud nurgapaketi vormingusse. See on NPM-pakett, mis on ehitatud ümbrisena üle „Roll-Up”, mis on moodulite kogum, mis kompileerib koodi teekidesse ja rakendustesse.

Jätkame nüüd oma arendusprotsessiga, paigaldades oma paketi meie liivakasti projekti konteksti. Salvestame selle de-sõltuvusena, kuna peame mooduli moodustama ainult NPMjs.com-ile tuvastatava teegina.

npm installida ng-packagegr --save-dev

Järgmine samm on meie projekti kataloogi kahe faili käsitsi lisamine, nimelt ng-package.json ja public_api.ts.

ng-pack.json on konfigureerima ng-packgr ja osutama faili public_api.ts, et pakendiks valmistuda. Siin on sisu:

{
  "$ skeem": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

public_api.ts on fail, mis koosneb ühest reast, mis ekspordib hiljuti välja töötatud nurgamooduli.

eksport * kaustast './src/app/modules/ng-number-formatter/ng-number-formatter.module'

Kui kaks faili on loodud, registreerime käsu ng-packagegr meie rakendusprojekti failis package.json ja lülitame ka omaduse "privaatne": NPM kataloogi jaoks vale. Minge edasi ja värskendage oma faile, et saaksime avaldamist jätkata.

"skriptid": {
  "ng": "ng",
  "algus": "teenima",
  "ehitama": "ehitama",
  "test": "test",
  "lint": "nint",
  "e2e": "ng e2e",
  "packgr": "ng-packagegr -p ng-pack.json"
},
"privaatne": vale

Nüüd, kui ng-packagegr on käsuna registreeritud, saame jätkata oma mooduli pakkimist NPM Directory jaoks äratuntava paketina. See kompileerib meie TypeScripti-põhise mooduli käivitatavaks JavaScripti kaustas dist. Järgmisena navigeerime dist-kausta ja käivitame lõpppakendi eraldiseisvate komponentide teegina.

npm run packgr
cd dist
npm pakk

See kõik on teie kohalikus masinas - nüüd on aeg see avalikustada. Selleks vajame kontot saidil https://www.npmjs.com/. Minge edasi ja registreeruge ning siis käivitame meie raamatukogu avalikkusele kättesaadavaks tegemiseks kaks viimast käsku .

NPM-i sisselogimine terminali / käsureatööriista kaudu:

npm sisselogimine

Avalda NPM-is:

npm avaldada

Voillllaaaaaaaaaaaaaaaaaaaaaaaaaa !!!

Teie pakett on valmis ja saadaval täpselt nagu see minu oma. :)

Kuidas teised teie projekti raames teie raamatukogu tarbivad

See juhtub samamoodi nagu meie liivakasti projekti failis app.component.ts, kuid tegelikult on see natuke lihtsam. Meil on vaja ainult kõige lihtsamat moodulit, mis viitab otse nimele. Järgmised kolm toimingut tuleb üksteise järel täita: Installimine, mooduli importimine, valija abil.

// Paigaldamine
npm install ng-number-formatter - salvesta
// Mooduli importimine
impordi {BrowserModule} kaustast @ @ nurk / platvorm-brauser;
importige {NgModule} kaustast '@ nurk / südamik';
importige {AppComponent} saidist './app.component';
importige {NgNumberFormatterModule} rakendusest 'ng-number-formatter';
@NgModule ({
    deklaratsioonid: [
        AppComponent
    ],
    import: [
        Brauserimoodul,
        NgNumberFormatterModule
    ],
    pakkujad: [],
    alglaadimine: [AppComponent]
})
eksportida klassi AppModule {}
// Valija
 

Lisateavet leiate NPM-i kataloogist pakett „ng-number-formatter”!

Ja kood Githubi „Liivakastprojektis”!

Nurgatorud ja millal neid alternatiivina kasutada

Nüüd, kui kõik on tehtud, liigume edasi artikli teise ossa. Esmalt kaalume torude vajadust nurgarakendustes ja seejärel teisendame maagaasi numbrivormingu raamatukogu numbrivormingu toruks.

| sümbol klaviatuuri sisestusklahvi lähedal

Mis on toru? Toru on lihtne esitus “| Mis tahes nurgarakenduse mooduli malli piires. Torud on tavaliselt pühendatud lihtsate ülesannete täitmisele: kõige tavalisem neist on ajatemplite või Unixi versiooni kuupäeva vormindamine inimesele loetavaks kuupäevaks kuupäeva, kuu / aasta vormingus. Näiteks järgmised:

1533679976 arvesse 08/07/2018
1533679976 teisipäeval, 7. augustil 2018

See toimub HTML-sildi sees. Näiteks:

 {{1533679976 | kuupäev}} 

Eraldaja “| ”Sunnib Nurge tõlgendama Span Tagi sisemist HTML-i enne selle ekraanile kuvamist.

Teatavates stsenaariumides eelistatakse torusid moodulite ees JavaScripti maksumuse tõttu. Maksumus on seotud mälu suuruse, allalaadimisaja, latentsusaja, elementide kuvamise aja ja lehe interaktiivsuse alguseni kulunud ajaga. Need on vaid mõned asjaolud, mida tuleks arvestada JavaScripti-intensiivse veebirakenduse / veebisaidi kasutamisel.

Kolmanda osapoole teegid võivad olla rasked, laetud kümnete muude sõltuvustega (näiteks teistel raamatukogudel põhinevad raamatukogud), mis võivad teie rakenduse maha tõmmata. See võib mõjutada ka teie Google'i otsingu paremusjärjestust, kuna lehe laadimisele kuluv aeg on endiselt üks peamisi mõõdikuid teie otsinguindeksi arvutamiseks Google'i otsingus.

Ng-Number-Formatteri raamatukogu kontekstis on raamatukogu juba tihendatud ja minimaalsel kujul saadaval ilma väliste sõltuvusteta. Seega, kui teil on selle jaoks alternatiivne Pipe, oleks see ka kettal peaaegu sama suur. Võite minna kausta Projekt, kuhu olete tarbinud npm, installige ng-number-formatter - salvestage ja kontrollige, kas kaustas node_modules asuva raamatukogu koguhulk koos liivakasti testimiskeskkonnaga on umbes 70 KB.

Enne nurga numbrivormingu toru tegeliku õpetuse alustamist tahaksin märkida, et enne mis tahes kolmanda osapoole lisandmooduli või pistikprogrammi valimist peaksite oma sõltuvustest hästi teadma. Seejärel saate neid oma projekti integreerides vastavalt planeerida.

NPM-pakett, milles on palju sõltuvaid pakette, on omamoodi koorem. Pilt

Nurgaarvute vormindaja toru

Praeguse seisuga teame kõik nurgarakenduse voogu. Seega on see viimane osa lihtsalt teema üle peitmiseks petturilehena koos terminali käskudega ja minimaalse vajaliku koodiga nurga-numbri-vormingu-toru jaoks!

Alustame torude genereerimise tellingute käsklusega, seejärel registreerime ja impordime oma värskelt loodud torude põhikomponendisse. Lõpuks kasutame seda oma mallis.
* alates tänasest… on rakendamine piisavalt väljendusrikas. Terviseks!

// Toru genereerimine
genereerib torutorusid / nurk-arvu vormindajat
// Importimine moodulisse
impordi {BrowserModule} kaustast @ @ nurk / platvorm-brauser;
importige {NgModule} kaustast '@ nurk / südamik';
importige {AppComponent} saidist './app.component';
importige {AngularNumberFormatterPipe} kaustast './pipes/angular-number-formatter.pipe';
@NgModule ({
    deklaratsioonid: [
        AppComponent,
        AngularNumberFormatterPipe
    ],
    import: [
        Brauseri moodul
    ],
    pakkujad: [],
    alglaadimine: [AppComponent]
})
eksportida klassi AppModule {}

ja lõpuks malli numbrivormingu toru kasutamine:

 {{1533679976 | angularNumberFormatter}} 

See on kõik selle artikli jaoks! Loodetavasti aitab see ja võimaldab teil kogukonna jaoks avaldada kümneid raamatukogusid ja tonne torusid.

Kas soovite teada asjade Interneti ja tööstuse 4.0 kombinatsiooni? Siin on katkend minu magistritööst https://medium.com/coinmonks/micro-services-pipeline-for-an-industrial-internet-of-things-a8cdd67f1eb9.
See on rakenduse Micro-Services Pipeline rajamine, mis põhineb Apache Kafka sõnumijärjekorral, Apache Sparki voogesitusmootoril ja MongoDB's Data Lake. Laske seda lugeda!
Võite mind leida / jälgida @ok_ansari. Rõõmsameelne, Omer Kalim Ansari