Angular Academy · Lezione

Creare build con ng-packagr

Produrre l'output Angular Package Format

Creare build con ng-packagr è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Le librerie richiedono un build speciale

Non è possibile pubblicare TypeScript e template grezzi: i consumer si aspettano un output compilato e standardizzato. Le librerie Angular vengono compilate nel formato Angular Package Format (APF) usando ng-packagr, lo strumento utilizzato internamente dalla CLI.

Il formato Angular Package Format

APF è la struttura ufficiale per le librerie Angular distribuibili: moduli ES ottimizzati, definizioni dei tipi e metadati organizzati in modo che qualsiasi app Angular possa utilizzare la libreria e applicare il tree-shaking in modo affidabile.

Compilare una libreria

Esegua ng build indicando come destinazione il progetto della libreria. La CLI invoca ng-packagr e scrive l'output del pacchetto in dist/.

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

Cosa produce ng-packagr

La cartella dist contiene bundle FESM compilati (moduli ES appiattiti), file di tipo .d.ts e un package.json generato con i campi di entry module e types corretti.

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

La configurazione ng-package.json

Ogni libreria ha un ng-package.json che indica a ng-packagr la destinazione dell'output e il file di entry. La CLI lo legge durante il 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 di produzione

Esegua il build con la configurazione di produzione per abilitare l'ottimizzazione completa. L'output è quello che pubblicherà, quindi prepari sempre la versione ottimizzata.

ng build ui-kit --configuration production

Compilazione parziale

Le librerie vengono compilate in modalità Ivy parziale, non completamente. Questo le rende compatibili tra diverse versioni di Angular; l'app consumer completa la compilazione, il linking, durante il proprio build.

Peer dependencies nell'output

ng-packagr mantiene Angular e le altre peer dependencies esterne, invece di includerle nel bundle. Il package.json generato le elenca come peerDependencies, così il consumer fornisce un'unica copia condivisa.

Asset e stili

È possibile includere stili e asset statici nel pacchetto. Li dichiari in ng-package.json, così ng-packagr li copia e li elabora nell'output dist destinato ai consumer.

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

Verificare il build

Dopo il build, controlli dist/ui-kit: verifichi il bundle FESM, i file .d.ts e un package.json i cui campi exports/module puntano ai file compilati. È esattamente ciò che npm riceverà.

Modalità watch per lo sviluppo

Ricompili automaticamente a ogni modifica aggiungendo --watch. In combinazione con un'app dimostrativa, questo offre un ciclo di feedback rapido durante lo sviluppo della libreria.

ng build ui-kit --watch

Verifica rapida

In quale formato vengono compilate le librerie Angular?

Riepilogo

Compili le librerie con ng build <lib>, che esegue ng-packagr per generare il formato Angular Package Format (bundle FESM, .d.ts, package.json generato) in dist/. Configuri l'output tramite ng-package.json, esegua il build in produzione, si affidi alla compilazione parziale per la compatibilità tra versioni e mantenga esterne le peer dependencies.

Domande Frequenti

La lezione «Creare build con ng-packagr» è gratuita?

Sì — il testo completo di «Creare build con ng-packagr» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Creare build con ng-packagr»?

Produrre l'output Angular Package Format Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Creare build con ng-packagr»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy