Angular CLI kullanırken 6 En İyi Uygulamalar ve Pro İpuçları

Gelecek şimdi ( Sébastien Jermer tarafından)
Feragatname: Makale, Nisan 2018’de yayımlanan 6.0.0’dan LESS THAN’ın açılı CLI versiyonuna odaklanmıştır, her şey hala geçerlidir, değiştirilen tek şey varsayılan yapım bayraklarıdır, lütfen resmi Angular CLING yapımına bakınız. dokümantasyon.
Angular CLI, Angular ve birçok popüler frontend kütüphanesinin sürümleriyle güncel kalmanıza yardımcı olmak için oluşturduğum bir twitter bot olan Release Butler'i takip edin…

Angular CLI ile Angular uygulamalarını geliştirmek çok zevkli bir deneyim! Açısal ekip, kutudan çıkan herhangi bir ciddi proje için ihtiyaç duyulan şeylerin çoğunu destekleyen inanılmaz bir CLI sağladı.

Tam test kabiliyetine sahip standardize edilmiş proje yapısı (hem ünite hem de e2e testi), kod iskelesi, çevreye özel konfigürasyon kullanma desteğiyle üretim sınıfı yapısı. Bu, her yeni projede gerçekleşen ve birçok saatlerce kazanılan hayalin gerçekleşmesi. Teşekkürler Açısal takım!

Angular CLI baştan sona harika çalışıyor olsa da, projelerimizi daha iyi hale getirmek için kullanabileceğimiz bazı potansiyel yapılandırma iyileştirmeleri ve kullanabileceğimiz en iyi uygulamalar var!

Ne öğreneceğiz

  1. Çekirdek, Paylaşımlı ve tembel yüklü Özellik modülleriyle mimari için en iyi yöntemler
  2. Daha temiz ithalatı desteklemek için uygulama ve ortam klasörleri için takma ad kullanma
  3. Sass ve Angular Material neden ve nasıl kullanılır?
  4. İyi üretim inşa nasıl kurulur
  5. PhantomJS veda sallamak ve yerine Başsız Krom kullanın (test)
  6. Projemiz otomatik olarak oluşturulan changelog ve doğru versiyonda çarpma ile nasıl serbest bırakılır

1. Biraz mimari

Tamam, yeni projemizi Angular CLI kullanarak yarattık, peki ya şimdi? Hizmetlerimizi ve bileşenlerimizi rastgele klasörlerde oluşturmaya devam etmeli miyiz? Projemizi nasıl yapılandırabiliriz?

İzlenecek iyi bir rehber, uygulamamızı en az üç farklı modüle ayırmaktır - Çekirdek, Paylaşılan ve Özellik (muhtemelen birden fazla özellik modülüne ihtiyaç duyarız).

Çekirdek modülü

Başvuru başına bir ve sadece bir örneğe sahip olması gereken tüm hizmetler (singleton hizmetleri) burada uygulanmalıdır. Tipik bir örnek, doğrulama servisi veya kullanıcı servisi olabilir. CoreModule uygulamasının bir örneğine bakalım.

SharedModule

Bütün “aptal” bileşenler ve borular burada uygulanmalıdır. Bu bileşenler, yapıcılarındaki çekirdek veya diğer özelliklerden hizmetleri içe aktarmaz ve enjekte etmez. Tüm verileri, bunları kullanan bileşenin şablonundaki niteliklere rağmen almalıdırlar. Tüm bunlar, SharedModule'un uygulamamızın geri kalanına herhangi bir bağımlılığı bulunmadığı gerçeğini özetlemektedir.

Ayrıca, Köşeli Malzeme bileşenlerini almak ve yeniden vermek için mükemmel bir yerdir.

Açısal CLI kullanarak proje yapısı nasıl hazırlanır

Yeni projemizin oluşturulmasından hemen sonra Core ve Shared modülleri üretebiliriz. Bu şekilde, en başından itibaren ek bileşenler ve hizmetler üretmeye hazır olacağız.

Üretme modülü çekirdeğini çalıştırın. Ardından çekirdek klasörde index.ts dosyasını oluşturun ve CoreModule'un kendisini yeniden verin. Daha fazla geliştirme sırasında tüm başvuruda mevcut olması gereken ilave kamu hizmetlerini tekrar ihraç edeceğiz.

Bu yapıldığında, paylaşılan modül için aynı şeyi yapabiliriz.

FeatureModule

Uygulamamızın her bağımsız özelliği için çoklu özellik modülleri yaratacağız. Özellik modülleri yalnızca CoreModule'den servis almalıdır. Özellik modülü A'nın özellik modülü B'den servis alması gerekiyorsa, bu servisi çekirdeğe taşımayı düşünün.

Bazı durumlarda, yalnızca bazı özellikler tarafından paylaşılan hizmetlere ihtiyaç duyulur ve bunları çekirdeğe dönüştürmenin pek bir anlamı olmaz. Bu durumda, bu yazının ilerleyen kısımlarında açıklandığı gibi özel ortak özellik modülleri oluşturabiliriz.
Temel kural, yalnızca CoreModule tarafından sağlanan hizmetlere ve SharedModule tarafından sağlanan bileşenlere bağlı olan diğer özelliklere bağlı olmayan özellikler oluşturmaya çalışmaktır.

Bu, kodumuzu temiz, bakımı kolay ve yeni özelliklerle genişletmeyi sürdürecek. Ayrıca yeniden yapılanma için gereken çabayı azaltır. Doğru şekilde takip edilirse, bir özellikte yapılan değişikliklerin uygulamanın geri kalanını etkilemeyeceğinden veya engelleyemeyeceğinden emin olacağız.

Yavaş yüklenme

Mümkün olduğunca özellik modüllerimizi tembel olarak yüklemeliyiz. Teorik olarak, ilk içeriği göstermek için uygulama başlatılırken yalnızca bir özellik modülü eşzamanlı olarak yüklenmelidir. Diğer tüm özellik modülleri, kullanıcı tarafından başlatılan navigasyon işleminden sonra tembel olarak yüklenmelidir.

2. Uygulama ve ortamlar için takma adlar

Uygulama ve ortam klasörlerimizin diğer adı, uygulamamız boyunca tutarlı olacak temiz ithalat gerçekleştirmemizi sağlayacaktır.

Varsayımsal ama olağan bir durum düşünün. A özelliğinde üç klasörün derinliklerinde bulunan bir bileşen üzerinde çalışıyoruz ve iki klasörün derinliklerinde bulunan çekirdekten servis almak istiyoruz. Bu, '../../../core/subpackage1/subpackage2/some.service' adresinden import {SomeService} gibi bir şey arayan içe aktarma ifadesine yol açacaktır.

Kesinlikle şimdiye kadarki en temiz ithalat ...

Daha da kötüsü, ithalat ifademizin kırılacağı bu iki dosyanın herhangi birinin konumunu değiştirmek istediğimizde. Bunu "@ app / core" adresinden daha kısa bir ithalat {SomeService} ile karşılaştırın. Daha iyi görünüyor, değil mi?

Takma adları kullanabilmek için, tsconfig.json dosyamıza baseUrl ve path özelliklerini eklemeliyiz…

Ayrıca "@ env / environment" deyiminden aynı import {environment} kullanarak uygulamamızın herhangi bir yerindeki ortam değişkenlerine kolayca erişebilmek için @env diğer adını ekliyoruz. Belirtilen tüm ortamlar için çalışacaktır çünkü build komutuna geçirilen --env bayrağı temelinde doğru ortam dosyasını otomatik olarak çözecektir.

Yerinde yürüdüğümüz yollarla artık bunun gibi çevre ve hizmetleri ithal edebiliyoruz…

Varlıkları (yukarıdaki örnekte SomeSingletonService gibi) doğrudan @ app / core / some-package / some-singleton.service yerine @ app / core adresinden içe aktardığımızı fark etmiş olabilirsiniz. Bu, her kamu kuruluşunu ana index.ts dosyasında tekrar dışa aktarması sayesinde mümkündür. Paket (klasör) başına bir index.ts dosyası yaratıyoruz ve şöyle görünüyorlar…

Çoğu uygulamada, belirli özellik modülünün bileşenleri ve hizmetleri genellikle yalnızca CoreModule ve SharedModule bileşenlerine ait hizmetlere erişime sahip olacaktır. Bazen bu, belirli bir iş vakasını çözmek için yeterli olmayabilir ve ayrıca, diğer özellik modüllerinin sınırlı bir alt kümesi için işlevsellik sağlayan bir çeşit “paylaşılan özellik modülüne” ihtiyacımız olabilir.

Bu durumda '@ app / shared-feature' adresinden import {SomeService}; Böylece, çekirdeğe benzer şekilde, paylaşılan özelliğe @app diğer adı kullanılarak da erişilir.

Modül bağımlılıkları, bilinen bileşen ağacına çok benzeyen ağaç yapısını izler

3. Sass Kullanımı

Sass, değişkenler gibi fantezi şeyleri (css de yakında değişkenler alsa da), fonksiyonlar, karışımlar için destek getiren bir stil işlemcidir.

Sass ayrıca, geniş kapsamlı tema oluşturma yetenekleriyle resmi Angular Material Components kütüphanesini etkin bir şekilde kullanmak için de gereklidir. Sass'ı kullanmanın çoğu proje için varsayılan seçenek olduğunu varsaymak güvenlidir.

Sass'ı kullanmak için projemizi --style scss flag ile yeni Cgular komutunu kullanarak oluşturmalıyız. Bu gerekli konfigürasyonun çoğunu ayarlar. Varsayılan olarak eklenmeyen bir şey, includePaths ile stylePreprocessorOptions ve bunu zorunlu zorunlu "./" ve isteğe bağlı "./themes" değerleri ile ayarlayabiliriz.

Bu, editörümüzün içe aktarılmış sembolleri bulmasına yardımcı olur ve Açısal Malzeme değişkenleri ve yardımcı fonksiyonların kod tamamlamasıyla geliştirici deneyimini geliştirir.

Angular Material uygulamasında tema oluştururken, tema tanımlarını dosya başına bir tema olmak üzere ayrı temalar klasörüne çıkarmak iyi bir uygulamadır.
En yeni blog gönderileri ve ilginç ön bilgiler hakkında bilgi almak için beni Twitter'da takip edin

4. “PROD” yapısı

Angular CLI tarafından oluşturulan proje sadece kutudan çıkan çok basit bir script ile birlikte geliyor. Üretim kalitesinde eserler üretmek için kendimizi biraz özelleştirmemiz gerekiyor.

Biz "inşa: prod": "inşa - hedef üretim - build-optimizer - satıcısı-chunk" 'ı package.json scriptlerimize ekliyoruz.

Hedef Üretimi

Bu, varsayılan olarak kod küçültmeyi ve çok sayıda faydalı yapı işaretini sağlayan bir şemsiye bayrağıdır. Aşağıdaki kullanarak eşdeğerdir…

  • --environment prod - ortam değişkenleri için ortam.prod.ts dosyasını kullanın
  • --aot - Önceden Zamanlı derlemeyi etkinleştir. Bu, Angular CLI'nın gelecekteki sürümlerinde varsayılan ayar haline gelecektir, ancak şimdilik bunu manuel olarak etkinleştirmemiz gerekiyor
  • --output-hashing - Oluşturulan dosyaların tüm içeriğini hash eder ve tarayıcı önbelleğini bozmayı kolaylaştırmak için dosya adına karma ekler (dosya içeriğindeki herhangi bir değişiklik farklı karma işlemine neden olur ve bu nedenle tarayıcı dosyanın yeni bir sürümünü yüklemek zorunda kalır)
  • --extract-css true - tüm css'leri ayrı bir stil sayfası dosyasına çıkarın
  • --sourcemaps false - kaynak haritaların oluşturulmasını engelle
  • - named-chunks false - öğe için okunaklı adları kullanarak devre dışı bırak ve bunun yerine sayıları kullan

Diğer faydalı bayraklar

  • --build-optimizer - daha küçük paketlerle sonuçlanan, ancak çok daha uzun süren oluşturma sürelerine neden olan yeni özellik, bu nedenle dikkatli kullanın! (ayrıca gelecekte varsayılan olarak etkin olması gerekir)
  • --vendor-chunk - Tüm satıcı kodunu ayıklayın

Ayrıca, bireysel projenizde yararlı olabilecek diğer yapılandırma bayrakları için resmi belgeleri kontrol edin.

5. Phantom JS öldü! Çok yaşa Başsız Krom!

PhantomJS, CI sunucularında ve birçok dev makinede ön uç testleri yapmak için ÇÖZÜM'ün temelini oluşturan çok iyi bilinen bir başsız tarayıcıdır.

Tamam iken, modern ECMAScript özelliklerinin desteği gecikiyordu. Dahası, standart olmayan davranışlar, testlerin sorunsuzca yerel olarak geçerken çoğu zaman baş ağrısına neden oldu, ancak yine de CI ortamını kırdılar.

Neyse ki, artık bununla uğraşmak zorunda değiliz!

Başsız Krom - Rönesans'taki Frontend testi başladı!

Resmi belgelerin dediği gibi…

Başsız Chrome, Chrome 59 ile birlikte geliyor. Chrome tarayıcıyı başsız bir ortamda çalıştırmanın bir yolu. Esasen, Chrome'u krom olmadan çalıştırma! Chromium ve Blink rendering motorunun sunduğu tüm modern web platformu özelliklerini komut satırına getiriyor.
Harika! Peki, bunu Açısal CLI projemizde nasıl kullanabiliriz?

--Browser ChromeHeadless bayrağını test komutumuza ekledik, böylece "test": "ng test --browser ChromeHeadless - single-run" ve "watch": "ng test --browser ChromeHeadless" ile paketimizde. json komut dosyaları. Oldukça basit, ha!

6. Standart hale getirilmiş mesajlar ve otomatik değiştirici üreteci kullanın

İlgilendiğimiz projenin yeni özellikleri ve hata düzeltmeleri hakkında hızlı bir genel bakışa sahip olmak her zaman harikadır.

Kullanıcılarımıza aynı kolaylığı sağlayalım!

Değişiklik manüel olarak yazmak son derece sıkıcı ve hataya açık bir iş olacaktır, bu nedenle bu işlemi otomatikleştirmek en iyisidir. İşi yapabilen birçok araç var ancak standart versiyona odaklanalım.

Bu araç, CHANGELOG.md dosyasını Konvansiyonel Taahhütler spesifikasyonunu takip eden tüm taahhütlerle birlikte otomatik olarak oluşturur ve günceller ve projemizin yeni sürümünü doğru bir şekilde belirler.

Geleneksel taahhüt, zorunlu tipi, isteğe bağlı (kapsam) tanımlar: bunu, taahhüt mesajını takip eder. Her ikisi de boş bir satırla ayrılmış isteğe bağlı gövde ve altbilgi eklemek de mümkündür. Ngx-model kütüphanesinin eksiksiz mesajlaşma örneğini kontrol ederek bunun pratikte nasıl göründüğünü görelim.

düzeltme (bağımlılık): tek bir projede birden fazla rxjs sürümü (TS90010)
KIRMA DEĞİŞİMİ: rxjs şimdi bağımlılık yerine eş bağımlılıktır
# 1 kapatır

Standart sürüm, taahhüt kuruluşunda BREAKING CHANGE anahtar sözcüğünün bulunması nedeniyle projenin ANA sürümünü doğru şekilde çarpacaktır.

Oluşturulan CHANGELOG.md daha sonra şöyle bir şeye benzeyecek….

Standart sürüm kitaplığı tarafından oluşturulan CHANGELOG.md dosyası örneği

Tatlı görünüyor! Peki bunu projemizde nasıl kullanabiliriz?

DevDependences dosyamıza kaydetmek için npm install -D standard-version programını yükleyerek başlıyoruz ve package.json scriptlerimize "release": "standard-version" ekliyoruz.

Tüm süreci otomatikleştirmek için git push ve npm yayınlarını da ekleyebiliriz. Bu durumda "release" ile biteceğiz: "standart sürüm && git push - follow-tags kökeni master && npm yayınla".

Platforma bağımlı olan ve yalnızca Unix tabanlı sistemlerde çalışan komutlarımızı zincirlemek için && kullandığımızı unutmayın (bu nedenle Windows için Cygwin, Gitbash veya Linux için yeni Win10 alt sistemi de vardır).

BONUS: Kaynak kökü kullan (Yalnızca Intellij IDEA, Web fırtınası)

Intellij IDEA, birçok kırmızı hata işaretine ve saklı kod tamamlama desteğine neden olacak şekilde varsayılan olarak tüm yolları her zaman bulamaz. Neyse ki, çözüm çok basit. Sadece src klasörünü seçin ve bir Kaynak Kökü olarak işaretleyin.

Src klasörünü Kaynak Kökü olarak işaretle

Harika! Sonuna kadar yaptın!

Umarım bu ipuçlarından ve en iyi uygulamalardan bazılarını faydalı bulmuşsunuzdur! Bu ipuçlarını daha geniş kitlelere yaymak için lütfen bu yazıyı your ile destekleyin!

Açısal bir proje başlatmak? Açısal NgRx Malzeme Başlangıç!
Açısal NgRx Material Starter, en iyi uygulamalara, temaya ve çok daha fazlasına sahip!

Ayrıca, diğer ilginç Angular mesajlarını kontrol etmekten çekinmeyin…

Ve asla unutma, gelecek parlak
Açıkçası, parlak bir gelecek (Sven Scheuermeier tarafından )