6 labākās prakses un Pro padomi, izmantojot leņķisko CLI

Nākotne ir tagad (éb autore Sébastien Jermer)
Atsaukums: raksts ir vērsts uz leņķisko CLI versiju, mazāku par 6.0.0, kas tika izlaista 2018. gada aprīlī, viss joprojām ir spēkā, vienīgais, kas mainījās, ir prod būvēšanas noklusējuma karodziņi, lūdzu, apskatiet oficiālo leņķisko CLI versiju dokumentācija.
Sekojiet Release Butler, twitter robotprogrammatūrai, kuru izveidoju, lai palīdzētu jums būt atjauninātai ar Angular CLI, Angular un daudzu populāru frontend bibliotēku izlaidumiem ...

Leņķisko lietotņu izstrāde ar leņķisko CLI ir ļoti patīkama pieredze! Stūrainā komanda nodrošināja mūs ar pārsteidzošu CLI, kas atbalsta lielāko daļu lietu, kas nepieciešamas jebkuram nopietnam projektam, kas atrodas ārpus karkasa.

Standartizēta projekta struktūra ar pilnām testēšanas iespējām (gan vienības, gan e2e testēšana), kodu sastatnēm, ražošanas pakāpes izveidošanu ar atbalstu specifiskas vides konfigurācijas izmantošanai. Tas ir sapņa piepildījums un daudz ietaupītu stundu par katru jauno projektu. Paldies Stūra komandai!

Lai gan leņķiskā CLI darbojas lieliski jau kopš tā sākuma, ir daži potenciāli konfigurācijas uzlabojumi un paraugprakse, ko varam izmantot, lai mūsu projektus padarītu vēl labākus!

Ko mēs iemācīsimies?

  1. Labākā prakse arhitektūrā ar Core, Shared un slinki ielādētiem Feature moduļiem
  2. Pseidonīmu izmantošana lietotņu un vides mapēm, lai atbalstītu tīrāku importu
  3. Kāpēc un kā lietot Sass un Leņķa materiālu?
  4. Kā izveidot labu ražošanas versiju
  5. Kā atvadīties no PhantomJS un izmantot Chrome bez galvas (Testēšana)
  6. Kā atbrīvot mūsu projektu ar automātiski ģenerētu izmaiņu žurnālu un pareizu versiju saīsinājumu

1. Nedaudz arhitektūras

Labi, tāpēc mēs izveidojām jauno, svaigo projektu, izmantojot leņķisko CLI, bet kas tagad? Vai mums vajadzētu turpināt mūsu pakalpojumu un komponentu ģenerēšanu dažās izlases mapēs. Kā mēs strukturējam savu projektu?

Laba vadlīnija, kas jāievēro, ir sadalīt mūsu lietojumprogrammu vismaz trīs dažādos moduļos - pamata, koplietotajā un piedāvātajā (iespējams, mums būs nepieciešami vairāk nekā viens funkciju modulis).

CoreModule

Šeit jāievieš visi pakalpojumi, kuriem vienā lietojumprogrammā ir jābūt tikai vienam gadījumam (singleton pakalpojumi). Tipisks piemērs var būt autentifikācijas pakalpojums vai lietotāja pakalpojums. Apskatīsim CoreModule ieviešanas piemēru.

SharedModule

Šeit būtu jāīsteno visas “mēmās” sastāvdaļas un caurules. Šie komponenti neimportē un neievada pakalpojumus no to konstruktoru pamata vai citām funkcijām. Viņiem būtu jāsaņem visi dati, izmantojot atribūtus to komponentu veidnē, kuri tos izmanto. Tas viss izriet no tā, ka SharedModule nav atkarīgs no pārējās mūsu lietojumprogrammas.

Tā ir arī lieliska vieta leņķa materiālu sastāvdaļu importēšanai un reeksportam.

Kā sagatavot projekta struktūru, izmantojot leņķisko CLI

Mēs varam ģenerēt Core un Shared moduļus tūlīt pēc mūsu jaunā projekta izveidošanas. Tādā veidā mēs būsim gatavi papildu komponentu un pakalpojumu ģenerēšanai jau pašā sākumā.

Palaist ģenerēšanas moduļa kodolu. Pēc tam pamata mapē izveidojiet failu index.ts un atkal eksportējiet pašu CoreModule. Mēs reeksportēsim papildu sabiedriskos pakalpojumus, kuriem turpmākās izstrādes laikā vajadzētu būt pieejamiem visā lietojumprogrammā.

Tas tiek darīts, un to pašu mēs varam darīt arī koplietotajam modulim.

FeatureModule

Mēs izveidosim vairākus funkciju moduļus katrai mūsu lietojumprogrammas neatkarīgajai funkcijai. Funkciju moduļiem vajadzētu importēt pakalpojumus tikai no CoreModule. Ja funkciju modulim A ir jāimportē pakalpojums no funkciju B moduļa, apsveriet šī pakalpojuma pārvietošanu kodolā.

Dažos gadījumos ir vajadzīgi pakalpojumi, kuriem ir kopīgas tikai dažas funkcijas, un nebūtu jēgas tos pārvērst kodolā. Tādā gadījumā mēs varam izveidot īpašus koplietoto funkciju moduļus, kā aprakstīts vēlāk šajā amatā.
Īkšķa princips ir mēģināt radīt funkcijas, kas nav atkarīgas no citām funkcijām, tikai no pakalpojumiem, ko nodrošina CoreModule, un komponentiem, ko nodrošina SharedModule.

Tas mūsu kodu uzturēs tīru, viegli uzturējamu un papildinātu ar jaunām funkcijām. Tas arī samazina piepūli, kas nepieciešama atkārtotai reaģēšanai. Pareizi ievērojot, mēs būsim pārliecināti, ka vienas funkcijas izmaiņas nevar ietekmēt vai sabojāt pārējo mūsu lietojumprogrammu.

LazyLoading

Kad vien iespējams, mums vajadzētu slinki ielādēt mūsu funkciju moduļus. Teorētiski tikai viens funkciju modulis lietotnes palaišanas laikā ir jāielādē sinhroni, lai parādītu sākotnējo saturu. Visi citi funkciju moduļi ir jāielādē slinki pēc lietotāja izraisītas navigācijas.

2. Lietotājvārdu un vides aizstājvārdi

Lietotņu un vides mapju aizstājvārdi ļaus mums ieviest tīru importu, kas būs konsekvents visā mūsu lietojumprogrammā.

Apsveriet hipotētisku, bet parastu situāciju. Mēs strādājam pie komponenta, kas atrodas trīs mapēs dziļi objektā A, un mēs vēlamies importēt pakalpojumus no serdes, kas atrodas divās mapēs. Tas novestu pie tā, ka paziņojums par importu izskatās kā {{{{}}}} importa vietne "../../../core/subpackage1/subpackage2/some.service".

Noteikti nav visu laiku tīrākais imports ...

Un kas ir vēl sliktāk, katru reizi, kad mēs vēlamies mainīt jebkura no šiem failiem atrašanās vietu, mūsu importa paziņojums tiks sabojāts. Salīdziniet to ar daudz īsāku {SomeService} importēšanu no “@ app / core”. Izskatās labāk, vai ne?

Lai varētu izmantot pseidonīmus, mūsu tsconfig.json failam jāpievieno baseUrl un ceļu rekvizīti, piemēram, šis ...

Mēs pievienojam arī @env aizstājvārdu, lai varētu viegli piekļūt vides mainīgajiem no jebkuras vietas mūsu lietojumprogrammā, izmantojot to pašu importa {vidi} no paziņojuma "@ env / environment". Tas darbosies visās norādītajās vidēs, jo automātiski atrisinās pareizu vides failu, pamatojoties uz --env karogu, kas nodots komandai ng build.

Izmantojot savus ceļus, tagad mēs varam importēt tādu vidi un pakalpojumus kā šis ...

Jūs, iespējams, pamanījāt, ka mēs importējam entītijas (piemēram, SomeSingletonService iepriekšminētajā piemērā) tieši no @ app / core, nevis @ app / core / some-pack / some-singleton.service. Tas ir iespējams, pateicoties katras valsts struktūras reeksportēšanai galvenajā index.ts failā. Katrā iepakojumā (mapē) mēs izveidojam vienu index.ts failu, un tie izskatās apmēram šādi ...

Lielākajā daļā lietotņu konkrēta funkciju moduļa komponentiem un pakalpojumiem parasti būs jābūt piekļuvei tikai pakalpojumiem no CoreModule un komponentiem no SharedModule. Dažreiz ar to var nepietikt, lai atrisinātu konkrētu biznesa gadījumu, un mums būs vajadzīgs arī kāds “kopīgu funkciju modulis”, kas nodrošina funkcionalitāti ierobežotai citu funkciju moduļu apakškopai.

Šajā gadījumā mēs galu galā pieņemsim kaut ko līdzīgu kā {SomeService} importēšanu no '@ app / shared-feature'; Tātad līdzīgi kā pamata, kopīgajai funkcijai var piekļūt arī, izmantojot @app aizstājvārdu.

Moduļu atkarības seko koku struktūrai, kas izskatās ļoti līdzīga labi zināmajam komponentu kokam

3. Sass lietošana

Sass ir stilu priekšapstrādātājs, kas sniedz atbalstu tādām izdomātām lietām kā mainīgie (kaut arī css arī drīz iegūs mainīgos lielumus), funkcijas, sajaukumi ... Jūs to nosauksit ...

Sass ir arī nepieciešams, lai efektīvi izmantotu oficiālo leņķisko materiālu komponentu bibliotēku ar plašajām to izmantošanas iespējām. Var droši pieņemt, ka Sass lietošana ir noklusējuma izvēle lielākajai daļai projektu.

Lai izmantotu Sass, mums jāģenerē mūsu projekts, izmantojot jauno komandu Leņķiskā CLI ar --style scss karogu. Tas izveido lielāko daļu nepieciešamās konfigurācijas. Viena lieta, kas pēc noklusējuma nav pievienota, ir stylePreprocessorOptions ar includePaths, un mēs paši to varam iestatīt ar obligātām saknes "./" un izvēles "./themes" vērtībām.

Tas palīdz mūsu redaktoram atrast importētos simbolus un uzlabo izstrādātāju pieredzi ar leņķa materiāla mainīgo lielumu un utilītas funkciju aizpildīšanu.

Izmantojot leņķiskā materiāla lietotnes, laba prakse ir iegūt motīvu definīcijas atsevišķā motīvu mapē - pa vienam motīvam vienā failā.
Sekojiet man Twitter vietnē, lai saņemtu paziņojumus par jaunākajām emuāru ziņām un interesantām frontend lietām

4. “PROD” būve

Leņķiskās CLI ģenerētais projekts nāk tikai ar ļoti vienkāršu skriptu, kas ir izveidots ārpus lodziņa. Lai radītu ražošanas pakāpes artefaktus, mums pašiem ir nedaudz jāpielāgojas.

Mēs savam package.json skriptam pievienojam "build: prod": "n - build --target production --build-optimizer --vendor-chunk".

Mērķa ražošana

Šis ir jumta karodziņš, kas pēc noklusējuma ļauj minēt kodu un daudz noderīgu būvēšanas karodziņu. Tas ir līdzvērtīgi sekojošas darbības izmantošanai…

  • - vides ražotne - vides mainīgo izmantošanai failā environment.prod.ts
  • - Aot - iespējot kompilāciju pirms laika. Tas kļūs par noklusējuma iestatījumu turpmākajās leņķiskās CLI versijās, bet pagaidām mums tas jāiespējo manuāli
  • - visu izvadi-jaukšanu - ģenerēto failu jauktu saturu un faila nosaukumam pievieno jauku, lai atvieglotu pārlūkprogrammas kešatmiņas pārspiešanu (jebkura faila satura maiņa radīs atšķirīgu jaucēju, tāpēc pārlūks ir spiests ielādēt jaunu faila versiju)
  • --extract-css true - izvelciet visu css atsevišķā stila lapas failā
  • --sourcemaps false - atspējot avotu karšu ģenerēšanu
  • --named-chunks false - atspējojiet cilvēkam saprotamus nosaukumus gabaliem un to vietā izmantojiet ciparus

Citi noderīgi karodziņi

  • - Build-Optimizer - jauna funkcija, kuras rezultāts ir mazāki saišķi, bet daudz ilgāks uzbūves laiks, tāpēc izmantojiet piesardzīgi! (arī nākotnē tas jāiespējo pēc noklusējuma)
  • --vendor-rieciens - visu pārdevēja (bibliotēkas) kodu iegūst atsevišķā rūtī

Pārbaudiet arī oficiālos dokumentus, lai redzētu citus pieejamos konfigurācijas karodziņus, kas varētu būt noderīgi jūsu individuālajā projektā.

5. Phantom JS ir miris! Lai dzīvo Chrome bez galvas!

PhantomJS ir ļoti labi pazīstams pārlūks bez galvas, kas tika defacto the SOLUTION, lai palaistu frontend testus CI serveros un daudzās dev mašīnās.

Kaut arī tas šķita labi, tas neatbalstīja mūsdienu ECMAScript funkcijas. Turklāt nestandarta uzvedība daudzos gadījumos izraisīja galvassāpes, kad testi bez problēmām tika nokārtoti lokāli, bet tie tomēr sabojāja KI vidi.

Par laimi mums tas vairs nav jārisina!

Chrome bez galvām - ir sākusies Frontend renesanses pārbaude!

Kā teikts oficiālajā dokumentācijā ...

Chrome bez galvām tiek piegādāts pārlūkā Chrome 59. Tas ir veids, kā darbināt Chrome pārlūku bez galvas vidē. Būtībā pārlūka Chrome darbināšana bez hroma! Tas komandrindai nodrošina visas modernās tīmekļa platformas funkcijas, kuras nodrošina Chromium un Blink renderēšanas dzinējs.
Lieliski! Tātad, kā mēs to varam izmantot savā Leņķa CLI projektā?

Mēs savam testa komandam pievienojam karodziņu - pārlūka ChromeHeadless, tāpēc mūsu paketē ir "pārbaude": "ng pārbaude - pārlūks ChromeHeadless - vienreizējs izpildījums" un "skatīties": "ng tests - pārlūks ChromeHeadless". json skripti. Diezgan vienkārši, ha!

6. Izmantojiet standartizētus saistīšanas ziņojumus un automātisko pārmaiņu žurnālu ģeneratoru

Vienmēr ir ļoti patīkami ātri iepazīties ar mūs interesējošā projekta jaunajām funkcijām un kļūdu labojumiem.

Nodrošināsim lietotājiem tādas pašas ērtības!

Pārmaiņas žurnāla rakstīšana manuāli būtu ļoti nogurdinošs, uz kļūdām vērsts uzdevums, tāpēc vislabāk ir šo procesu automatizēt. Ir daudz pieejamo rīku, kas var veikt šo darbu, bet koncentrēsimies uz standarta versiju.

Šis rīks automātiski ģenerē un atjaunina failu CHANGELOG.md ar visām saistībām, kas seko parasto saistību specifikācijai, un pareizi nosaka jauno mūsu projekta versiju.

Parastā apņemšanās definē obligāto veidu, pēc izvēles (darbības joma): kam seko apņemšanās ziņojums. Ir arī iespējams pievienot izvēles pamattekstu un kājeni, abus atdalot ar tukšu līniju. Apskatīsim, kā tas izskatās praksē, pārbaudot ngx-modeļa bibliotēkas pilna saistīšanas ziņojuma piemēru.

labot (atkarība): vairākas rxjs versijas vienā projektā (TS90010)
PĀRMAIŅU IZMAIŅAS: rxjs tagad ir peerDependency, nevis atkarība
aizver 1. numuru

Standarta versija pareizi sagraus galvenās projekta versijas, jo atbildīgajā institūcijā ir atslēgvārds BREAKING CHANGE.

Izveidotais CHANGELOG.md izskatīsies apmēram šādi:

Standarta versiju bibliotēkas ģenerēta faila CHANGELOG.md piemērs

Izskatās jauki! Tātad, kā mēs to varam izmantot savā projektā?

Mēs sākam ar npm instalēšanas -D standarta versijas instalēšanu, lai saglabātu to mūsu devDependenciācijās, un mūsu skriptiem package.json pievienojam “release”: “standard-version”.

Lai automatizētu visu procesu, mēs varam arī pievienot git push un npm publicēšanu. Šajā gadījumā mēs nonāksim pie "izlaišanas": "standarta versijas && git push - follow-tags izcelsmes galvenā un & npm publicēšana".

Ņemiet vērā, ka mēs izmantojām &&, lai ķēdi mūsu komandas, kas ir atkarīgas no platformas un darbojas tikai uz Unix balstītām sistēmām (tātad arī operētājsistēmā Windows ar Cygwin, Gitbash vai jaunu Win10 apakšsistēmu Linux).

BONUSS: Izmantojiet resursa sakni (Intellij IDEA, tikai Webstorm)

Intellij IDEA ne vienmēr atradīs visus ceļus pēc noklusējuma, kas radīs daudz sarkanu kļūdu marķējumu un kropļa koda pabeigšanas atbalstu. Par laimi risinājums ir ļoti vienkāršs. Vienkārši atlasiet mapi src un atzīmējiet to kā avotu sakni.

Atzīmējiet src mapi kā avotu sakni

Lieliski! Jūs to izdarījāt līdz galam!

Es ceru, ka daži no šiem padomiem un paraugpraksi jums bija noderīgi! Lūdzu, atbalstiet šo rakstu ar savu , lai izplatītu šos padomus plašākai auditorijai!

Vai sākat leņķa projektu? Iepazīstieties ar leņķisko NgRx materiāla starteri!
Leņķiskais NgRx materiāla iesācējs ar iebūvētu labāko praksi, to izmantošanu un daudz ko citu!

Lūdzu, pārbaudiet arī citas interesantas leņķa ziņas ...

Un nekad neaizmirstiet, nākotne ir gaiša
Acīmredzot gaišā nākotne (ven autors Svens Šēmersmeijers)