0Pricing
Angular Academy · Lekcja

Budowanie za pomocą ng-packagr

Tworzyć wynik w formacie Angular Package Format

Budowanie za pomocą ng-packagr to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Biblioteki wymagają specjalnego procesu budowania

Nie można publikować surowego kodu TypeScript i szablonów; odbiorcy oczekują skompilowanych, ustandaryzowanych plików. Biblioteki Angulara są budowane do Angular Package Format (APF) za pomocą ng-packagr, narzędzia używanego przez CLI wewnętrznie.

Angular Package Format

APF to oficjalna struktura dystrybuowalnych bibliotek Angulara: zoptymalizowane moduły ES, definicje typów i metadane ułożone tak, aby każda aplikacja Angulara mogła niezawodnie korzystać z biblioteki i wykonywać tree-shaking.

Budowanie biblioteki

Uruchom polecenie ng build, wskazując projekt biblioteki. CLI wywoła ng-packagr i zapisze spakowany wynik w folderze dist/.

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

Co tworzy ng-packagr

Folder dist zawiera skompilowane pakiety FESM (spłaszczone moduły ES), pliki typów .d.ts oraz wygenerowany plik package.json z prawidłowymi polami wejściowymi module i types.

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

Konfiguracja ng-package.json

Każda biblioteka ma plik ng-package.json, który informuje ng-packagr o miejscu docelowym wyników i pliku wejściowym. CLI odczytuje go podczas budowania.

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

Budowanie produkcyjne

Buduj w konfiguracji produkcyjnej, aby włączyć pełną optymalizację. Wynik jest tym, co publikujesz, dlatego zawsze pakuj zoptymalizowaną wersję.

ng build ui-kit --configuration production

Kompilacja częściowa

Biblioteki są kompilowane w częściowym trybie Ivy, a nie w pełni. Zapewnia to zgodność między wersjami Angulara; aplikacja korzystająca z biblioteki kończy kompilację (linkowanie) podczas własnego procesu budowania.

Zależności peer w wynikowym pakiecie

ng-packagr pozostawia Angulara i inne zależności peer jako zewnętrzne, zamiast dołączać je do pakietu. Wygenerowany plik package.json wymienia je w polu peerDependencies, dzięki czemu odbiorca dostarcza jedną współdzieloną kopię.

Zasoby i style

Do pakietu można dołączyć style i statyczne zasoby. Zadeklaruj je w pliku ng-package.json, aby ng-packagr skopiował je i przetworzył do wynikowego folderu dist dla odbiorców.

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

Weryfikowanie wyniku budowania

Po zbudowaniu sprawdź folder dist/ui-kit: upewnij się, że zawiera pakiet FESM, pliki .d.ts oraz plik package.json, którego pola exports/module wskazują zbudowane pliki. Dokładnie to otrzyma npm.

Tryb obserwowania podczas tworzenia

Włącz automatyczne ponowne budowanie podczas edycji, dodając opcję --watch. W połączeniu z aplikacją demonstracyjną zapewnia to szybką pętlę informacji zwrotnej podczas tworzenia biblioteki.

ng build ui-kit --watch

Szybkie sprawdzenie

Do jakiego formatu budowane są biblioteki Angulara?

Podsumowanie

Buduj biblioteki za pomocą ng build <lib>. Polecenie uruchamia ng-packagr i generuje w folderze dist/ format Angular Package Format (pakiety FESM, pliki .d.ts oraz wygenerowany package.json). Konfiguruj wynik za pomocą ng-package.json, buduj w trybie produkcyjnym, korzystaj z kompilacji częściowej dla zgodności między wersjami i pozostawiaj zależności peer jako zewnętrzne.

Często zadawane pytania

Czy lekcja „Budowanie za pomocą ng-packagr” jest bezpłatna?

Tak — pełny tekst „Budowanie za pomocą ng-packagr” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Budowanie za pomocą ng-packagr”?

Tworzyć wynik w formacie Angular Package Format Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Budowanie za pomocą ng-packagr”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie biblioteki za pomocą ng generate
  2. Publiczne API i punkty wejścia
  3. Budowanie za pomocą ng-packagr
  4. Publikowanie w npm
← Powrót do Angular Academy