Angular Academy · Ders

ng-packagr ile Derleme

Angular Paket Biçimi çıktısı üretin

ng-packagr ile Derleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Kitaplıkların Özel Bir Derlemeye İhtiyacı Vardır

Ham TypeScript'i ve şablonları yayımlayamazsınız; tüketiciler derlenmiş ve standartlaştırılmış çıktı bekler. Angular kitaplıkları, CLI'ın arka planda kullandığı araç olan ng-packagr ile Angular Paket Biçimi'ne (APF) derlenir.

Angular Paket Biçimi

APF, dağıtılabilir Angular kitaplıkları için resmî yapıdır: her Angular uygulamasının kitaplığı güvenilir biçimde kullanabilmesi ve ağaç sarsma uygulayabilmesi için iyileştirilmiş ES modüllerini, tür tanımlarını ve meta verileri düzenler.

Kitaplık Derleme

Kitaplık projesini hedefleyerek ng build komutunu çalıştırın. CLI, ng-packagr'ı çağırır ve paketlenmiş çıktıyı dist/ klasörüne yazar.

ng build ui-kit
# outputs dist/ui-kit in Angular Package Format

ng-packagr Neler Üretir

dist klasörü, derlenmiş FESM (düzleştirilmiş ES modülü) paketlerini, .d.ts tür dosyalarını ve doğru module ile types giriş alanlarına sahip, oluşturulmuş bir package.json dosyasını içerir.

dist/ui-kit/
  fesm2022/ui-kit.mjs   # flattened ES module
  index.d.ts            # type declarations
  package.json          # generated, points to the above

ng-package.json Yapılandırması

Her kitaplıkta, ng-packagr'a çıktı hedefini ve giriş dosyasını bildiren bir ng-package.json bulunur. CLI, derleme sırasında bu dosyayı okur.

// projects/ui-kit/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": { "entryFile": "src/public-api.ts" }
}

Üretim Derlemesi

Tam optimizasyonu etkinleştirmek için üretim yapılandırmasıyla derleyin. Yayımlayacağınız şey çıktı olduğundan her zaman iyileştirilmiş sürümü paketleyin.

ng build ui-kit --configuration production

Kısmi Derleme

Kitaplıklar tamamen derlenmiş olarak değil, kısmi Ivy kipinde derlenir. Bu, farklı Angular sürümleri arasında uyumluluk sağlar; tüketen uygulama derlemeyi (bağlamayı) kendi derlemesi sırasında tamamlar.

Çıktıdaki Eş Bağımlılıklar

ng-packagr, Angular'ı ve diğer eş bağımlılıkları pakete dahil etmek yerine harici tutar. Oluşturulan package.json bunları peerDependencies olarak listeler; böylece tüketici tek bir ortak kopya sağlar.

Varlıklar ve Stiller

Pakete stiller ve statik varlıklar ekleyebilirsiniz. ng-packagr'ın bunları tüketiciler için kopyalayıp dist çıktısına işlemesi amacıyla ng-package.json içinde bildirin.

"assets": ["./styles/theme.css"]

Derlemeyi Doğrulama

Derlemeden sonra dist/ui-kit klasörünü inceleyin: FESM paketini, .d.ts dosyalarını ve exports/module alanları derlenmiş dosyaları gösteren bir package.json dosyasını doğrulayın. npm'in teslim alacağı şey tam olarak budur.

Geliştirme İçin İzleme Kipi

--watch ekleyerek düzenleme yaptıkça otomatik olarak yeniden derleyin. Bir örnek uygulamayla birlikte bu, kitaplığı geliştirirken hızlı bir geri bildirim döngüsü sağlar.

ng build ui-kit --watch

Kısa Kontrol

Angular kitaplıkları hangi biçime derlenir?

Özet

Kitaplıkları ng build <lib> ile derleyin; bu komut ng-packagr'ı çalıştırarak Angular Paket Biçimi çıktısını (FESM paketleri, .d.ts, oluşturulmuş package.json) dist/ içine yazar. Çıktıyı ng-package.json ile yapılandırın, üretim kipinde derleyin, sürümler arası uyumluluk için kısmi derlemeye güvenin ve eş bağımlılıkları harici tutun.

Sıkça Sorulan Sorular

“ng-packagr ile Derleme” dersi ücretsiz mi?

Evet — “ng-packagr ile Derleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“ng-packagr ile Derleme” dersinde ne öğreneceğim?

Angular Paket Biçimi çıktısı üretin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“ng-packagr ile Derleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön