Angular Academy · Oppitunti

Rakentaminen ng-packagrilla

Tuottakaa Angular Package Format -muotoinen tuloste

Oppitunti 3/413 vaihetta

Rakentaminen ng-packagrilla on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Kirjastot tarvitsevat erityisen käännöksen

Raakaa TypeScript-koodia ja mallipohjia ei voi julkaista, sillä kuluttajat odottavat käännettyä ja standardoitua tulostetta. Angular-kirjastot käännetään Angular Package Format (APF) -muotoon työkalulla ng-packagr, jota CLI käyttää taustalla.

Angular Package Format

APF on jaeltavien Angular-kirjastojen virallinen rakenne: optimoidut ES-moduulit, tyyppimääritykset ja metatiedot on järjestetty niin, että mikä tahansa Angular-sovellus voi käyttää kirjastoa ja karsia siitä tarpeettomat osat luotettavasti.

Kirjaston kääntäminen

Suorita ng build kohdistamalla se kirjastoprojektiin. CLI kutsuu ng-packagria ja kirjoittaa paketoidun tulosteen hakemistoon dist/.

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

Mitä ng-packagr tuottaa

dist-kansio sisältää käännetyt FESM-paketit (litistetyt ES-moduulit), .d.ts-tyyppitiedostot sekä luodun package.json-tiedoston, jonka module- ja types-kentät osoittavat oikeisiin sisääntulotiedostoihin.

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-asetustiedosto

Jokaisella kirjastolla on ng-package.json-tiedosto, joka kertoo ng-packagrille tulosteen kohteen ja sisääntulotiedoston. CLI lukee sen käännöksen aikana.

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

Tuotantokäännös

Käännä tuotantokokoonpanolla, jotta kaikki optimoinnit otetaan käyttöön. Tuloste on se paketti, jonka julkaiset, joten paketoi aina optimoitu versio.

ng build ui-kit --configuration production

Osittainen käännös

Kirjastot käännetään osittaisessa Ivy-tilassa, ei täysin käännettyinä. Tämä tekee niistä yhteensopivia eri Angular-versioiden välillä; käyttävä sovellus viimeistelee käännöksen eli linkityksen oman käännöksensä aikana.

Vertaisriippuvuudet tulosteessa

ng-packagr pitää Angularin ja muut vertaisriippuvuudet ulkoisina sen sijaan, että paketoisi ne mukaan. Luotu package.json luettelee ne peerDependencies-kentässä, joten kuluttaja tarjoaa yhden yhteisen kopion.

Resurssit ja tyylit

Voit sisällyttää pakettiin tyylejä ja staattisia resursseja. Ilmoita ne tiedostossa ng-package.json, jotta ng-packagr kopioi ja käsittelee ne dist-tulosteeseen kuluttajien käytettäväksi.

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

Käännöksen tarkistaminen

Tarkista käännöksen jälkeen hakemisto dist/ui-kit: varmista FESM-paketti, .d.ts-tiedostot sekä package.json, jonka exports- ja module-kentät osoittavat käännettyihin tiedostoihin. Juuri tämän npm vastaanottaa.

Watch-tila kehitystä varten

Käännä muutokset automaattisesti muokkaamisen aikana lisäämällä --watch. Yhdessä esimerkkisovelluksen kanssa tämä nopeuttaa palautekierrosta kirjastoa kehitettäessä.

ng build ui-kit --watch

Pikatarkistus

Mihin muotoon Angular-kirjastot käännetään?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käännä kirjastot komennolla ng build <lib>, joka suorittaa ng-packagrin ja tuottaa Angular Package Format -muodon (FESM-paketit, .d.ts, luotu package.json) hakemistoon dist/. Määritä tuloste tiedostossa ng-package.json, käännä tuotantotilassa, hyödynnä osittaista käännöstä versioiden välisen yhteensopivuuden saavuttamiseksi ja pidä vertaisriippuvuudet ulkoisina.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Rakentaminen ng-packagrilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Rakentaminen ng-packagrilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Rakentaminen ng-packagrilla”?

Tuottakaa Angular Package Format -muotoinen tuloste Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Rakentaminen ng-packagrilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy