Angular Academy · Pelajaran

Membangun dengan ng-packagr

Hasilkan output Angular Package Format.

Membangun dengan ng-packagr adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Pustaka Memerlukan Build Khusus

Anda tidak dapat memublikasikan TypeScript dan templat mentah; pengguna mengharapkan keluaran yang telah dikompilasi dan distandardisasi. Pustaka Angular dibuild ke Angular Package Format (APF) menggunakan ng-packagr, alat yang digunakan CLI secara internal.

Angular Package Format

APF adalah struktur resmi untuk pustaka Angular yang dapat didistribusikan: modul ES yang dioptimalkan, definisi tipe, dan metadata yang ditata sehingga aplikasi Angular apa pun dapat menggunakan serta melakukan tree-shaking terhadap pustaka dengan andal.

Membuild Pustaka

Jalankan ng build dengan menargetkan proyek pustaka. CLI memanggil ng-packagr dan menulis keluaran paket ke dist/.

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

Yang Dihasilkan ng-packagr

Folder dist berisi bundel FESM (modul ES yang diratakan) yang telah dikompilasi, berkas tipe .d.ts, dan package.json yang dibuat secara otomatis dengan kolom entri module dan types yang benar.

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

Konfigurasi ng-package.json

Setiap pustaka memiliki ng-package.json yang memberi tahu ng-packagr tujuan keluaran dan berkas entri. CLI membacanya selama proses build.

// 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" }
}

Build Produksi

Lakukan build dengan konfigurasi produksi untuk mengaktifkan pengoptimalan penuh. Keluaran inilah yang Anda publikasikan, jadi selalu kemas versi yang telah dioptimalkan.

ng build ui-kit --configuration production

Kompilasi Parsial

Pustaka dikompilasi dalam mode Ivy parsial, bukan dikompilasi sepenuhnya. Hal ini membuatnya kompatibel di berbagai versi Angular; aplikasi pengguna menyelesaikan kompilasi (penautan) selama build-nya sendiri.

Dependensi Rekan dalam Keluaran

ng-packagr menjaga Angular dan dependensi rekan lainnya tetap eksternal, bukan memasukkannya ke dalam bundel. package.json yang dibuat mencantumkannya sebagai peerDependencies, sehingga pengguna menyediakan satu salinan bersama.

Aset dan Gaya

Anda dapat menyertakan gaya dan aset statis dalam paket. Deklarasikan semuanya di ng-package.json agar ng-packagr menyalin dan memprosesnya ke dalam keluaran dist untuk pengguna.

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

Memverifikasi Build

Setelah melakukan build, periksa dist/ui-kit: pastikan terdapat bundel FESM, berkas .d.ts, dan package.json yang kolom exports/module-nya mengarah ke berkas hasil build. Inilah tepatnya yang akan diterima npm.

Mode Pantau untuk Pengembangan

Build ulang secara otomatis saat Anda mengedit dengan menambahkan --watch. Jika digabungkan dengan aplikasi demo, cara ini memberikan siklus umpan balik yang cepat saat mengembangkan pustaka.

ng build ui-kit --watch

Pemeriksaan Singkat

Ke dalam format apa pustaka Angular dibuild?

Rangkuman

Build pustaka dengan ng build <lib>, yang menjalankan ng-packagr untuk menghasilkan Angular Package Format (bundel FESM, .d.ts, dan package.json yang dibuat otomatis) ke dalam dist/. Konfigurasikan keluaran melalui ng-package.json, lakukan build dalam mode produksi, andalkan kompilasi parsial untuk kompatibilitas lintas versi, dan pertahankan dependensi rekan tetap eksternal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun dengan ng-packagr” gratis?

Ya — teks lengkap “Membangun dengan ng-packagr” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun dengan ng-packagr”?

Hasilkan output Angular Package Format. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membangun dengan ng-packagr” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy