Membina dengan ng-packagr
Hasilkan output Format Pakej Angular.
Membina dengan ng-packagr ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Pustaka Memerlukan Binaan Khas
Anda tidak boleh menerbitkan TypeScript dan templat mentah; pengguna menjangkakan keluaran yang telah dikompil dan diseragamkan. Pustaka Angular dibina kepada Format Pakej Angular (APF) menggunakan ng-packagr, iaitu alat yang digunakan oleh CLI di sebalik tabir.
Format Pakej Angular
APF ialah struktur rasmi untuk pustaka Angular yang boleh diedarkan: modul ES yang dioptimumkan, takrif jenis dan metadata yang disusun supaya mana-mana aplikasi Angular boleh menggunakan serta menggoncang pepohon pustaka dengan pasti.
Membina Pustaka
Jalankan ng build dengan menyasarkan projek pustaka. CLI memanggil ng-packagr dan menulis keluaran pakej ke dist/.
ng build ui-kit
# outputs dist/ui-kit in Angular Package FormatKeluaran ng-packagr
Folder dist mengandungi bundle FESM (modul ES diratakan) yang telah dikompil, fail jenis .d.ts dan package.json yang dijana dengan medan entri module dan types yang betul.
dist/ui-kit/
fesm2022/ui-kit.mjs # flattened ES module
index.d.ts # type declarations
package.json # generated, points to the aboveKonfigurasi ng-package.json
Setiap pustaka mempunyai ng-package.json yang memberitahu ng-packagr destinasi keluaran dan fail titik masuk. CLI membacanya semasa binaan.
// 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" }
}Binaan Pengeluaran
Bina menggunakan konfigurasi pengeluaran untuk mendayakan pengoptimuman penuh. Keluaran inilah yang anda terbitkan, jadi sentiasa pakejkan versi yang dioptimumkan.
ng build ui-kit --configuration productionKompilasi Separa
Pustaka dikompil dalam mod Ivy separa, bukan dikompil sepenuhnya. Ini menjadikannya serasi merentas versi Angular; aplikasi pengguna melengkapkan kompilasi (pautan) semasa binaannya sendiri.
Kebergantungan Rakan Sebaya dalam Keluaran
ng-packagr mengekalkan Angular dan kebergantungan rakan sebaya lain sebagai luaran dan bukannya membungkusnya. package.json yang dijana menyenaraikannya sebagai peerDependencies, supaya pengguna membekalkan satu salinan yang dikongsi.
Aset dan Gaya
Anda boleh menyertakan gaya dan aset statik dalam pakej. Isytiharkannya dalam ng-package.json supaya ng-packagr menyalin dan memprosesnya ke dalam keluaran dist untuk pengguna.
"assets": ["./styles/theme.css"]Mengesahkan Binaan
Selepas membina, periksa dist/ui-kit: sahkan bundle FESM, fail .d.ts dan package.json yang medan exports/modulenya menunjuk kepada fail yang telah dibina. Inilah tepatnya perkara yang akan diterima oleh npm.
Mod Pantau untuk Pembangunan
Bina semula secara automatik semasa anda mengedit dengan menambah --watch. Digabungkan dengan aplikasi demo, ciri ini memberikan kitaran maklum balas pantas semasa membangunkan pustaka.
ng build ui-kit --watchSemakan Pantas
Apakah format yang digunakan oleh pustaka Angular untuk binaan?
Imbas Kembali
Bina pustaka dengan ng build <lib>, yang menjalankan ng-packagr untuk menghasilkan Format Pakej Angular (bundle FESM, .d.ts, package.json yang dijana) ke dalam dist/. Konfigurasikan keluaran melalui ng-package.json, bina dalam pengeluaran, gunakan kompilasi separa untuk keserasian merentas versi dan kekalkan kebergantungan rakan sebaya sebagai luaran.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Membina dengan ng-packagr” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Membina dengan ng-packagr”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membina dengan ng-packagr”?
Hasilkan output Format Pakej Angular. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Membina dengan ng-packagr” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mencipta Pustaka dengan ng generate
- API Awam dan Titik Masuk
- Membina dengan ng-packagr
- Menerbitkan ke npm