[MUSIC]
Nel corso precedente su Bootstrap 4,
abbiamo imparato come utilizzare gli script NPM o Grunt o
Gulp per costruire la cartella di distribuzione per la nostra applicazione web.
Così abbiamo visto come la cartella di distribuzione è costruita prendendo tutti i
file HTML, CSS e JavaScript.
E poi facendo modifiche, uglification, concatenazione,
e varie altre trasformazioni su questi per costruire file di distribuzione che possono essere
semplicemente copiati sul server e quindi rendere il tuo sito web disponibile per gli utenti.
Ora, che mi dici della tua applicazione Angular?
Come compriamo la nostra applicazione Angular per distribuirla su un sito web?
Ora come ti rendi conto che la tua applicazione angolare
sarà anche alla fine distribuita su un sito web da cui le persone accederanno
alla tua applicazione Angular, scarica l'applicazione Angular nel browser e
quindi la loro applicazione angolare prenderà vita nei loro browser.
Vedremo anche il modo angolare di indirizzare
i dispositivi mobili nei prossimi due corsi, in questa specializzazione.
Quindi non sto parlando specificamente di questo, in questo momento.
Ma qui stiamo parlando di come indirizzare una finestra del browser web.
Utilizzando il codice dell'applicazione Angular.
Quindi venendo alla domanda su come compriamo la nostra
applicazione Angular per la distribuzione?
Ora potremmo usare il grande modo Gulp e NPM script di farlo, se si sceglie di farlo.
Ma c'è un nuovo ragazzo sul blocco chiamato come webpack.
Webpack come capiremmo molto presto è un bundler di moduli.
Ora, esamineremo alcuni dettagli nelle prossime due diapositive.
Quindi, ciò che il webpack ti consente di fare è di impacchettare la tua applicazione Angular in un modo
che sia facile da distribuire su un sito Web e
rendere la tua applicazione Angular disponibile per gli utenti.
Ora dal momento che stiamo usando Angular CLI per costruire la nostra applicazione
Angular, Angular CLI sfrutta già webpack per
fare la sua costruzione per la cartella di distribuzione per l'applicazione Angular.
Quindi non abbiamo bisogno di fare esplicitamente alcun lavoro aggiuntivo per fare uso del webpack.
Una volta che stiamo usando Angular CLI.
Perché l'Angular CLI si occupa di tutto il sollevamento pesante per nostro conto.
Quindi, ma prima di vedere quale sia il modo Angular CLI di costruire la tua
distribuzione ulteriormente facilità.
Abbiamo bisogno di capire alcuni concetti su webpack e
come webpack funziona in un po 'di dettaglio in modo
che quando Angular CLI produce la cartella di distribuzione puoi guardare e
vedere cosa esattamente viene costruito da Angular CLI.
Quindi il mio obiettivo di questa particolare
lezione è quello di darti una breve panoramica del webpack.
Questa lezione non è un'introduzione a come fare uso del webpack.
Questo va oltre lo scopo di questo corso, ma
se siete interessati il sito webpack
ha molte informazioni su come webpack può essere utilizzato per altre applicazioni.
Potresti, in linea di principio, usare webpack per confezionare
l'applicazione Bootstrap che hai sviluppato anche nel corso precedente.
Ma in questo momento vedremo come facciamo uso del webpack
come parte del modo Angular CLI di costruire la nostra interpretazione angolare.
Quindi, ovviamente, la prima domanda che sorge nella tua mente è,
cos'è esattamente il webpack?
Di cosa stiamo parlando?
Webpack, questa è la definizione dalla documentazione del webpack stesso.
Dice che webpack è un bundler di moduli per le moderne applicazioni JavaScript.
La tua applicazione Angular su cui hai lavorato
finora è una semplice applicazione JavaScript moderna.
Ora state tutti lavorando con l'avanguardia nella tecnologia Angular.
E così, ovviamente si qualifichi come una moderna applicazione JavaScript e
, quindi, l'uso del webpack ha perfettamente senso.
Ora qual è il webpack migliore
, guarda l'intera struttura della tua applicazione Angular.
Quindi attraversa ricorsivamente il tuo codice della tua
applicazione Angular cercando di vedere il modo migliore per raggruppare
le informazioni in ciò che viene chiamato come bundle.
Quando webpack guarda il tuo codice, tratta ogni file che
hai all'interno dell'applicazione Angular, sia esso un JavaScript di file Typescript,
sia esso un file CSS, sia esso un file SAS, sia esso un file immagine.
Qualunque cosa, tratta ognuno di loro come moduli dal suo punto di vista,
e poi decide, qual è il modo migliore per confezionare questi
moduli in quelli che sono chiamati come pacchetti che possono essere scaricati da.
Server al tuo browser web in modo comodo e conveniente.
Quindi, quando parliamo di webpack abbiamo ovviamente bisogno di chiarire cosa significa un pacchetto.
Come ho brevemente affermato nella diapositiva precedente, un pacchetto non è altro che
un file JavaScript che incorpora risorse.
Ora, devi tenerlo a mente che webpack tratta tutto come JavaScript.
Ad esso che si tratti di CSS o di uno qualsiasi degli altri tipi di file,
saranno anche trattati come JavaScript dal punto di vista del webpack.
Ora non preoccupatevi troppo, webpack sa come
impacchettarli e trattarli come pacchetti JavaScript in cui prepara quei pacchetti.
O moduli JavaScript in cui prepara quei pacchetti.
Quindi un pacchetto è qualcosa che raggruppa insieme moduli che appartengono insieme.
Quando parlo del modulo non sto insinuando il modulo angolare,
non sto insinuando il modulo JavaScript.
Come ho detto e Webpack, ogni file viene creato come modulo.
E così raggruppa quei moduli insieme,
che dovrebbero essere serviti al client in un'unica risposta a una richiesta.
Quindi il webpack stesso prende una decisione su come dire quali
parti dovrebbero essere unite insieme in un pacchetto.
E dovrebbe essere consegnato insieme in modo che il rendering della vostra
applicazione web è fatto nel modo più efficace.
Ora, Angular CLI ha già costruito la sua configurazione di come meglio impacchettare
le risorse angolari, in modo che sia più convenientemente consegnato al browser.
Quindi non abbiamo bisogno di preoccuparci di come farlo da soli,
lo lasceremo alla logica CLI angolare per occuparci di tutta quella configurazione di
come quel pacchetto costruisce i suoi pacchetti per nostro conto.
Quindi quello che fa Webpack è, inizia al livello più alto.
Nell' applicazione Angular, il livello più alto è index.html e main.js file,
come abbiamo imparato nella prima lezione di questo corso.
Quindi inizia lì, e poi segue tutti gli input
che usi in quelli lungo il percorso e
porta in su un'organizzazione gerarchica di tutte le diverse parti.
Quindi quello che viene chiamato un grafico delle dipendenze è costruito dal webpack.
Ora usando questo grafico delle dipendenze, Webpack decide quindi come impacchettare i suoi
pacchetti e che immagini uno o più pacchetti come hanno
senso per la tua particolare applicazione che il webpack è bundle.
E nel processo di farlo, quando gestisce file non JavaScript,
come CSS, HTML e SAS o Immagini e così via.
Quindi utilizza plugin che consentono di pre-elaborare e
modificare quei file, quei file non JavaScript,
in modo che possano essere raggruppati nei pacchetti webpack.
Se stai usando il webpack da zero
, descriveresti alcune delle configurazioni per il tuo webpack per funzionare.
Su questi file in un file chiamato
webpack.config.js che abbiamo incluso nella cartella principale della vostra applicazione.
Nel nostro caso dal momento che stiamo facendo affidamento su Angular CLI per farlo per nostro conto
Angular CLI fa clic automaticamente qui per costruire la configurazione per il
webpack con cui lavorare.
Ora, quando parliamo di webpack, ci sono quattro concetti che sono importanti per
noi per capire come funziona il webpack sulle foto.
Il primo è l'ingresso.
Entry è il punto in cui il webpack dovrebbe iniziare e
seguire per costruire il grafico delle dipendenze.
Quindi, il file main.ts per esempio, è un punto di ingresso.
Quindi il webpack può iniziare il suo inseguimento nella costruzione del grafico delle dipendenze.
Proprio a main.ts e poi andare a caccia di tutte le istruzioni di importazione da lì
ai loro altri file e poi da lì importano quei file e
così via fino a quando non costruisce il grafico delle dipendenze.
Ora, la seconda parte è ciò che chiameremmo come output.
Nel webpack l'output è l'insieme di pacchetti che il webpack prepara
per tuo conto.
Il terzo è caricatori.
Ora webpack come ho detto capisce solo JavaScript e
sa solo come lavorare con JavaScript.
Ma come ho anche detto, webpack tratta ogni file come un modulo.
Quindi quei file che non sono JavaScript devono essere
trasformati e quindi inseriti nei tuoi pacchetti utilizzando
trasformazioni appropriate e quindi verranno aggiunti nel tuo grafico delle dipendenze.
Questo è dove entra in gioco l'uso dei vari plugin.
Cosa ti aiutano a fare i plugin?
I plugin ti aiutano a eseguire le varie azioni e funzionalità personalizzate
o compilazioni che devi fare per costruire i tuoi pacchetti.
Quindi ti aiuterà a trasformare il tuo CSS in un modo che posso
impacchettare nei tuoi pacchetti JavaScript e così via.
Quindi questa è una rapida introduzione a come funziona effettivamente il webpack.
Ora con questa rapida introduzione, nel prossimo esercizio
vedrai che useremo convenientemente un comando chiamato ng
build per costruire la nostra cartella di distribuzione per la nostra applicazione Angular.
Ng build ti consente anche di creare una versione di sviluppo o una
versione di produzione della tua applicazione Angular.
Quando abbiamo usato ng surf,
la CLI Angular stava effettivamente facendo uso del webpack per imballare le cose.
Quindi, se torni indietro e
guardi tutte le cose che venivano stampate nella tua finestra del terminale,
inizierai a vedere il webpack che lavora dietro le quinte per fare i bundle.
Ora nel prossimo esercizio si costruirà la loro cartella di distribuzione,
che può quindi essere copiata sul tuo sito web e quindi distribuire l'applicazione Angular.
Ora ho già fatto una build
dell'applicazione Angular che abbiamo costruito finora.
In modo che, andiamo a dare un'occhiata veloce alla cartella di distribuzione per vedere cosa
c'è dentro prima di eseguire effettivamente l'esercizio.
Quindi, una volta completato l'esercizio, ti consiglio vivamente di andare a
guardare la cartella del disco che è stata creata nella cartella del progetto delle applicazioni angolari.
E poi guarda e vedi esattamente i file che ti mostrerò subito.
Proprio nella cartella di distribuzione.
Andando alla nostra applicazione Angular in Visual Studio qui,
vedi che ora sto aprendo la cartella di distribuzione.
E all'interno della cartella di distribuzione vedrai un sacco di file qui.
Vedrai un file chiamato main una lunga stringa dove
.bundle.js dalla tua conoscenza di Gulp e Grunt dal corso precedente,
inizierai a vedere cosa significa quella stringa lunga intermedia.
Ecco come aggiungi quel controllo delle versioni alla tua applicazione.
Allo stesso modo vedi un altro file chiamato styles.something.css.
Quindi vedi un vendor.bundle.js.
E poi polyfills.js.
Quindi hai un file index.html e
ti stai chiedendo cosa sia successo a tutto il tuo codice HTML?
E' in uno di quei pacchi, ok?
Quindi tutti i modelli che hai scritto sono tutti lì in uno di quei pacchetti,
tranne la pagina index.html.
È necessaria la pagina index.html esplicitamente perché,
quando un utente digita l'URL per il
tuo sito Web nella barra degli indirizzi del browser.
Quindi atterreresti sul tuo sito web e
sulle pagine HTML del punto indice in cui avvii tutto e
ne hai bisogno per avviare la tua applicazione Angular, quindi è per questo che c'è.
E poi si vedono anche i file fontawesome lì che sono necessari e
che all'interno della risorsa si vedono alcune immagini lì, nella cartella risorse.
Quindi, dando una rapida occhiata al file principale, vedrai che questo è
come puoi vedere è un insieme concatenato di file molti compressi.
Ora, se provi a leggerlo, non sarà facile,
è un file enorme con un sacco di cose.
Questo include anche tutto il codice framework angolare,
una mano il tuo codice che hai scritto.
E il codice che proviene da Angular Material, Flex Layout e
ogni altra cosa che hai incluso con la tua applicazione Angular.
Allo stesso modo, hai polyfill e poi stili e
inizi a vedere che tutte le cose che usi all'interno
dell'applicazione Angular sono state raggruppate insieme in questi file lì.
Quindi con questo spero che tu abbia una rapida panoramica del webpack.
Ora è il momento per noi di andare all'esercizio, dove faremo semplicemente uso di
Angular CLI ng comando build per costruire questa cartella di distribuzione.
E vedrai come puoi distribuire la tua applicazione Angular su un sito web.
Subito dopo aver completato la compilazione.
[ MUSIC]