Burchakli CLI-dan foydalanganda 6 ta eng yaxshi amaliyotlar va maslahatlar

Kelajak - hozir (é Sebastien Jermer)
Ogohlantirishlar: Maqola CLI burchakli CLI versiyasiga qaratilgan, 2018 yil aprel oyida chiqarilgan 6.0.0 dan kam, hamma narsa hali ham kuchga ega, faqat o'zgargan narsa - prod qurishning standart bayroqlari, iltimos, rasmiy Angular CLI ng build-ni ko'rib chiqing. hujjatlar.
Anglash CLI, Angular va ko'plab mashhur taniqli kutubxonalar haqidagi yangiliklardan xabardor bo'lishingizga yordam berish uchun men yaratgan twitter-bot Release Butler-ga rioya qiling ...

Angular CLI yordamida burchak ilovalarini ishlab chiqish juda yoqimli tajriba! Burchaklar jamoasi bizga ajoyib CLI-ni taqdim etdi, bu har qanday jiddiy loyihani amalga oshirish uchun zarur bo'lgan narsalarning ko'pchiligini qo'llab-quvvatlaydi.

To'liq sinov qobiliyatiga ega standart loyihalashtirilgan struktura (ikkala birlik ham, e2e sinovi), kodli iskala, atrof-muhitga mos konfiguratsiyani qo'llash uchun ishlab chiqarish sinfini yaratish. Bu orzular amalga oshadi va har bir yangi loyihada ko'p soatlar tejaladi. Rahmat Angular jamoasi!

Angular CLI juda yaxshi ishlayotgan bo'lsa ham, loyihalarimizni yanada yaxshilashimiz uchun ba'zi konfiguratsiyani yaxshilash va ilg'or tajribalarni qo'llashimiz mumkin!

Biz nimani bilib olamiz?

  1. Core, Shared va dangasa yuklangan Feature modullari bilan eng yaxshi arxitektura tajribalari
  2. Toza importni qo'llab-quvvatlash uchun ilova va muhitlar uchun taxalluslardan foydalanish
  3. Sass va burchakli materialdan nima uchun va qanday foydalanish kerak
  4. Yaxshi ishlab chiqarishni qanday sozlash kerak
  5. PhantomJS bilan xayrlashish va uning o'rniga Headless Chrome-ni qanday ishlatish kerak (sinov)
  6. Avtomatik ravishda yaratilgan va to'g'ri versiya to'plami bilan bizning loyihamizni qanday chiqarishimiz mumkin

1. Bir oz arxitektura

OK, shuning uchun biz yangi burchakli loyihamizni Angular CLI-dan foydalanib yaratdik, ammo endi nima? Agar biz shunchaki xizmatlar va tarkibiy qismlarni tasodifiy papkalarga yaratishni davom ettirsak? Loyihamizni qanday tuzamiz?

Bizning qo'llanmani kamida uchta turli xil modullarga bo'lish - Yaxshi, Umumiy va Feature (bo'lish uchun bir nechta modul kerak bo'ladi).

CoreModule

Bu erda bitta dasturga bitta va bitta dona ega bo'lishi kerak bo'lgan barcha xizmatlar (singleton services) shu erda amalga oshirilishi kerak. Autentifikatsiya xizmati yoki foydalanuvchi xizmati odatiy misol bo'lishi mumkin. CoreModule-ni amalga oshirish misolini ko'rib chiqaylik.

SharedModule

Bu erda "soqov" tarkibiy qismlari va quvurlari amalga oshirilishi kerak. Ushbu komponentlar xizmatlarni o'z konstruktorlarida asosiy yoki boshqa funktsiyalardan import qilmaydi va in'ektsiya qilmaydi. Ular barcha ma'lumotlarni olishlari kerak, lekin ularni ishlatadigan komponent shablonidagi atributlar. Bularning barchasi SharedModule bizning dasturimizning qolgan qismiga bog'liq emasligi bilan bog'liq.

Shuningdek, bu burchakli material qismlarini import qilish va qayta eksport qilish uchun juda yaxshi joy.

Angular CLI yordamida loyiha tuzilishini qanday tayyorlash mumkin

Biz yangi loyihamiz yaratilgandan so'ng darhol Core va Shared modullarini yaratishimiz mumkin. Shunday qilib, biz boshidanoq qo'shimcha komponentlar va xizmatlarni yaratishga tayyor bo'lamiz.

Modul yadrosini yaratish ng ni ishga tushiring. Keyin asosiy papkada index.ts faylini yarating va CoreModule-ni o'zi qayta eksport qiling. Keyingi rivojlanish jarayonida biz barcha ilovada mavjud bo'lishi kerak bo'lgan qo'shimcha davlat xizmatlarini qayta eksport qilamiz.

Bajarilayotgan ish, biz umumiy modul uchun ham xuddi shunday qilishimiz mumkin.

FeatureModule

Biz dasturimizning har bir mustaqil xususiyati uchun bir nechta xususiyat modullarini yaratmoqchimiz. Xususiyat modullari faqat CoreModule-dan xizmatlarni import qilishi kerak. Agar A funktsional modul xizmatni B funktsional moduldan import qilishi kerak bo'lsa, ushbu xizmatni yadroga o'tkazishni ko'rib chiqing.

Ba'zi hollarda faqat ba'zi xususiyatlar tomonidan baham ko'riladigan xizmatlarga ehtiyoj bor va ularni yadroga o'tkazish mantiqiy emas. Bunday holda biz ushbu postda keyinroq tavsiflangan maxsus umumiy xususiyat modullarini yaratishimiz mumkin.
Bosh barmog'i CoreModule va SharedModule tomonidan taqdim etiladigan tarkibiy qismlarga, boshqa xususiyatlarga bog'liq bo'lmagan xususiyatlarni yaratishga harakat qilishdir.

Bu bizning kodimizni toza saqlashga yordam beradi, uni saqlash oson va yangi xususiyatlar bilan kengaytiriladi. Bu, shuningdek, qayta tiklash uchun zarur bo'lgan kuchni kamaytiradi. To'g'ri rioya qilinsa, bitta xususiyatga kiritilgan o'zgartirishlar bizning ilovamizning qolgan qismiga ta'sir qilishi yoki buzolmasligiga aminmiz.

LazyLoading

Imkoniyat bo'lsa, biz o'z xususiyat modullarimizni yuklashimiz kerak. Dasturni ishga tushirish paytida boshlang'ich tarkibni ko'rsatish uchun nazariy jihatdan faqat bitta xususiyatli modul sinxron ravishda yuklanishi kerak. Har bir boshqa modul foydalanuvchi tomonidan qo'zg'atilgan navigatsiyadan keyin dangasa tarzda yuklanishi kerak.

2. Ilova va muhit uchun taxalluslar

Ilova va atrof-muhit papkalarini olib qo'yish bizga toza importni amalga oshirishga imkon beradi, bu bizning dasturimiz davomida izchil bo'ladi.

Gipotetik, ammo odatiy vaziyatni ko'rib chiqing. Biz A xususiyatida uchta papkada joylashgan tarkibiy qism ustida ishlamoqdamiz va ikkita papkada joylashgan yadrodan xizmatni import qilmoqchimiz. Bu importga oid bayonotga olib keladi, masalan "../../../core/subpackage1/subpackage2/some.service" dan import kabi {SomeService}.

Shubhasiz, har doim ham eng toza import emas ...

Va bundan ham yomoni, istalgan vaqtda biz ushbu ikkita faylning qay birini o'rnini o'zgartirmoqchi bo'lsak, bizning import bayonnomamiz buziladi. Buni "@ app / core" dan {SomeService} qisqaroq import qilish bilan taqqoslang. Yaxshi ko'rinadi, shunday emasmi?

Taxalluslardan foydalanish uchun biz quyidagicha tsconfig.json faylimizga baseUrl va yo'llar xususiyatlarini qo'shishimiz kerak ...

Biz shuningdek "@ env / environment" bayonotidan xuddi shu import {atrof-muhit} dan foydalanib, dasturimizning istalgan joyidan atrof-muhit o'zgaruvchilariga osongina kirish uchun @env taxallusini qo'shmoqdamiz. Belgilangan barcha muhitlar uchun ishlaydi, chunki u ng build buyrug'iga berilgan --env bayrog'i asosida to'g'ri atrof-muhit faylini avtomatik ravishda hal qiladi.

Bizning yo'llarimiz bilan biz hozir atrof-muhit va xizmatlarni import qilishimiz mumkin ...

Biz ob'ektlarni (yuqoridagi misolda SomeSingletonService kabi) to'g'ridan-to'g'ri @ app / core / some-pack / some-singleton.service o'rniga @ app / core-dan import qilayotganimizni sezgan bo'lishingiz mumkin. Bu har bir davlat tuzilmasini main index.ts fayliga qayta eksport qilish natijasida mumkin. Biz har bir paketga (papka) bitta index.ts faylini yaratamiz va ular shunga o'xshash ko'rinadi ...

Ko'pgina dasturlarda, xususan, modul tarkibiy qismlari va xizmatlari odatda faqat CoreModule va SharedModule tarkibiy qismlariga kirish huquqiga ega bo'lishi kerak. Ba'zida bu ma'lum bir biznes masalasini hal qilish uchun etarli bo'lmasligi mumkin va bizga boshqa xususiyatlar modullarining cheklangan to'plami uchun funktsional imkoniyatlarni taqdim etadigan "umumiy xususiyatlar moduli" turiga ehtiyoj seziladi.

Bu holda biz '@ app / shared-feature' dan {SomeService} import kabi narsalarni tugatamiz; Yadro singari, umumiy xususiyatga ham @app taxallusidan foydalanib kirish mumkin.

Modulga bog'liqlik taniqli komponent daraxtiga juda o'xshash bo'lgan daraxt tuzilishini kuzatadi

3. Sass-dan foydalanish

Sass bu o'zgaruvchilar kabi xayoliy narsalar uchun qo'llab-quvvatlaydigan uslublar preprosessoridir (garchi css tez orada o'zgaruvchilarga ega bo'lsa ham), funktsiyalar, aralashmalar ... Siz bu nomni aytasiz ...

Sass, shuningdek, keng burchakli tematik imkoniyatlarga ega rasmiy burchakli material komponentlari kutubxonasidan samarali foydalanish uchun talab qilinadi. Sass-dan foydalanish ko'pgina loyihalar uchun odatiy tanlov deb taxmin qilish xavfsiz.

Sass-dan foydalanish uchun biz --style scss flag bilan yangi burchakli CLI ng buyrug'i yordamida loyihamizni yaratishimiz kerak. Bu kerakli konfiguratsiyaning ko'p qismini o'rnatadi. Sukut bo'yicha qo'shilmagan narsalardan biri - bu "qo'shilgan" yo'llar bilan stylePreprocessorOptions va biz uni "./" va ixtiyoriy "./txem" qiymatlari bilan o'rnatamiz.

Bu bizning muharririmizga import qilingan belgilarni topishda yordam beradi va ishlab chiqaruvchi tomonidan burchakli material parametrlari va yordamchi funktsiyalarni to'ldirish tajribasini yaxshilaydi.

Angular Material ilovalariga mavzularda har xil mavzular papkasida, har bir fayl uchun bittadan tema ajratish yaxshi tajriba.
Eng yangi blog xabarlari va qiziqarli yangiliklar haqida xabardor bo'lish uchun meni Tvitterda kuzatib boring

4. "PROD" tuzish

Angular CLI tomonidan yaratilgan loyiha faqat juda oddiy ng skript bilan ta'minlanadi. Ishlab chiqarish darajasidagi badiiy buyumlarni yaratish uchun biz ozgina sozlashimiz kerak.

Biz pack.json skriptlarimizga "build: prod": "ng build --target production --build-optimizer --vendor-chunk" qo'shamiz.

Maqsadli ishlab chiqarish

Ushbu standart soyabon bayroq bo'lib, kodni minifikatsiya qilish va standart foydali bayroqlarni ko'paytirish imkonini beradi. Bu quyidagini ishlatishga tengdir ...

  • - environment prod - atrof-muhit o'zgaruvchilari uchun environment.prod.ts faylini ishlatish
  • --aot - vaqtdan oldin kompilyatsiya qilishni yoqish. Bu Angular CLI-ning kelajakdagi versiyalarida odatiy holga aylanadi, ammo hozir biz buni qo'lda yoqishimiz kerak
  • - kiriting-hashing barchasi - hosil qilingan fayllarning xesh tarkiblari va brauzer keshini to'ldirishni osonlashtirish uchun fayl nomiga xesh qo'shing (fayl tarkibidagi har qanday o'zgarish har xil xeshlarni keltirib chiqaradi va shuning uchun brauzer faylning yangi versiyasini yuklashga majbur bo'ladi)
  • --extract-css true - barcha css-larni alohida-alohida jadvallar fayliga ajrating
  • - manbalar xaritalari noto'g'ri - manbalar xaritalarini yaratishni o'chirib qo'yish
  • - nameed-chunks false - odam uchun o'qiladigan nomlardan foydalanishni o'chirib qo'ying va ularning o'rniga raqamlardan foydalaning

Boshqa foydali bayroqlar

  • - build-optimizer - yangi to'plam, bu kichikroq to'plamlarga olib keladi, ammo vaqtni ko'paytiradi, shuning uchun ehtiyotkorlik bilan foydalaning! (shuningdek, kelajakda sukut bo'yicha yoqilgan bo'lishi kerak)
  • --vendor-chunk - barcha sotuvchi (kutubxona) kodini alohida bo'limga ajratib oling

Shaxsiy loyihangizda foydali bo'lishi mumkin bo'lgan boshqa mavjud konfiguratsiya bayroqlari uchun rasmiy hujjatlarni tekshiring.

5. Phantom JS vafot etdi! Yashasin Boshsiz Chrome!

PhantomJS - bu taniqli boshsiz brauzer bo'lib, u CI serverlarida va ko'plab dasturlash mashinalarida old sinovlarni o'tkazish uchun SOLUTION edi.

Yaxshi kinoda bo'lgan vaqtingizda, zamonaviy ECMAScript funktsiyalarini qo'llab-quvvatlash orqada qoldi. Bundan tashqari, nostandart xulq-atvor ko'p hollarda bosh og'rig'iga sabab bo'ldi, ammo testlar mahalliy joylarda muammosiz o'tayotgan bo'lsa ham, ular CI muhitini buzdi.

Yaxshiyamki, endi bu bilan shug'ullanishimiz shart emas!

Boshsiz Chrome - Frontend Uyg'onish sinovi boshlandi!

Rasmiy hujjatlarda aytilishicha ...

Boshsiz Chrome Chrome-da 59-da etkazib berilmoqda. Bu Chrome brauzerini boshsiz muhitda ishlashning bir usuli. Aslida, Chrome brauzerini Chromesiz ishlaydi! Bu buyruqlar satriga Chromium va Blink renderlash vositasi tomonidan taqdim etilgan barcha zamonaviy veb-platforma xususiyatlarini taqdim etadi.
Ajoyib! Xo'sh, uni bizning burchakli CLI loyihamizda qanday ishlatishimiz mumkin?

Biz sinov buyrug'iga - - brauzer ChromeHeadless brauzerini qo'shamiz, shunda biz "sinov": "ng test - brauzer - ChromeHeadless - bir marta ishga tushirish" va "tomosha qilish": "ng test - brauzer ChromeHeadless brauzeri" bilan yakunlaymiz. json skriptlari. Juda oddiy, ha!

6. Standart ravishda etkazilgan xabarlar va avtomatik o'zgartirish generatorini ishlating

Bizni qiziqtirgan loyihaning yangi xususiyatlari va tuzatishlari haqida qisqacha ma'lumot berish har doim juda yaxshi.

Foydalanuvchilarimizga shu kabi qulayliklarni taqdim etaylik!

O'zgartirish yozuvini qo'lda yozish juda qiyin ish bo'lishi mumkin, shuning uchun bu jarayonni avtomatlashtirish yaxshidir. Bu ishni bajaradigan ko'plab vositalar mavjud, ammo e'tiborni standart versiyalarga qarataylik.

Ushbu vosita avtomatik ravishda CHANGELOG.md faylini yaratadi va yangilaydi, bu odatiy majburiyatlar spetsifikatsiyasidan so'ng bajarilgan va loyihamizning yangi versiyasini to'g'ri belgilaydi.

Odatiy majburiyat majburiy turini belgilaydi, ixtiyoriy (ko'lami): so'ngra majburiyat xabari keladi. Bo'sh chiziq bilan ajratilgan ixtiyoriy tanani va altbilgisini ham qo'shish mumkin. Ngx-modelli kutubxonaning to'la-to'kis xabari misolini tekshirib, amalda qanday ko'rinishini ko'rib chiqaylik.

fix (qaramlik): bitta loyihada rxjlarning bir nechta versiyalari (TS90010)
BIRINChI O'ZGARTIRISH: rxjs endi qaramlik o'rniga peerDependent
№1 ni yopadi

Foydalanuvchi versiyasida BREAKING CHANGE kalit so'zining mavjudligi sababli standart versiya loyihaning MAJOR versiyasini to'g'ri ravishda buzadi.

Yaratilgan CHANGELOG.md keyin shunga o'xshash ko'rinadi ....

Standart versiyalar kutubxonasi tomonidan yaratilgan CHANGELOG.md fayliga misol

Shirin ko'rinadi! Xo'sh, buni loyihamizda qanday ishlatishimiz mumkin?

Biz npm o'rnatish -D standart versiyasini o'rnatib, uni devDependents-da saqlashimiz va pack.json skriptlarimizga "ozod qilish": "standart-versiya" ni qo'shamiz.

Shuningdek, biz butun jarayonni avtomatlashtirish uchun git push va npm nashrlarini qo'shamiz. Bu holda biz "ozod qilish" bilan yakunlaymiz: "standart versiya va & git push-tag-тегlarning boshlig'i & & npm nashr qilish".

E'tibor bering, biz platformalarimizga bog'liq va faqat Unix asosidagi tizimlarda ishlaydigan buyruqlarimizni zanjirlash uchun ishlatganmiz (shuningdek, Windowsda Cygwin, Gitbash yoki Linux uchun yangi Win10 quyi tizimi).

BONUS: Resurs ildizidan foydalaning (Intellij IDEA, faqat Webstorm)

Intellij IDEA har doim ham sukut bo'yicha barcha yo'llarni topa olmaydi, buning natijasida ko'plab qizil xato belgilari va kodni tugatish qo'llab-quvvatlanadi. Yaxshiyamki, echim juda oddiy. Faqat src papkasini tanlang va uni manbalar ildizi sifatida belgilang.

Src papkasini manbalar ildizi sifatida belgilang

Ajoyib! Siz buni oxirigacha qildingiz!

Umid qilamanki, siz ushbu maslahatlar va eng yaxshi amaliyotlarning ayrimlarini foydali deb topdingiz! Ushbu maslahatlarni kengroq auditoriyaga tarqatish uchun iltimos, ushbu maqolani o'zingizning sahifangiz bilan qo'llab-quvvatlang!

Burchak loyihasini boshlaysizmi? Angular NgRx Material Starter-ni tekshiring!
Eng yaxshi amaliyotlar, mavzular va boshqalar bilan jihozlangan burchakli NgRx Material Starter!

Bundan tashqari, boshqa bir nechta qiziqarli burchli xabarlarni tekshirishdan ozod bo'ling ...

Va hech qachon unutmang, kelajak porloq
Shubhasiz porloq kelajak ( Sven Scheuermeier)