1
00:00:00,025 --> 00:00:05,570
[MUSIC]

2
00:00:05,570 --> 00:00:09,319
Nel corso precedente su Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
abbiamo imparato come utilizzare gli script NPM o Grunt o

4
00:00:14,613 --> 00:00:21,220
Gulp per costruire la cartella di distribuzione per la nostra applicazione web.

5
00:00:21,220 --> 00:00:27,040
Così abbiamo visto come la cartella di distribuzione è costruita prendendo tutti i

6
00:00:27,040 --> 00:00:30,270
file HTML, CSS e JavaScript.

7
00:00:30,270 --> 00:00:35,540
E poi facendo modifiche, uglification, concatenazione,

8
00:00:35,540 --> 00:00:40,490
e varie altre trasformazioni su questi per costruire file di distribuzione che possono essere

9
00:00:40,490 --> 00:00:48,470
semplicemente copiati sul server e quindi rendere il tuo sito web disponibile per gli utenti.

10
00:00:48,470 --> 00:00:52,050
Ora, che mi dici della tua applicazione Angular?

11
00:00:52,050 --> 00:00:57,240
Come compriamo la nostra applicazione Angular per distribuirla su un sito web?

12
00:00:57,240 --> 00:01:01,670
Ora come ti rendi conto che la tua applicazione angolare

13
00:01:01,670 --> 00:01:06,630
sarà anche alla fine distribuita su un sito web da cui le persone accederanno

14
00:01:06,630 --> 00:01:09,350
alla tua applicazione Angular, scarica l'applicazione Angular nel browser e

15
00:01:09,350 --> 00:01:13,780
quindi la loro applicazione angolare prenderà vita nei loro browser.

16
00:01:14,810 --> 00:01:19,430
Vedremo anche il modo angolare di indirizzare

17
00:01:19,430 --> 00:01:23,890
i dispositivi mobili nei prossimi due corsi, in questa specializzazione.

18
00:01:23,890 --> 00:01:27,770
Quindi non sto parlando specificamente di questo, in questo momento.

19
00:01:27,770 --> 00:01:32,180
Ma qui stiamo parlando di come indirizzare una finestra del browser web.

20
00:01:32,180 --> 00:01:35,150
Utilizzando il codice dell'applicazione Angular.

21
00:01:35,150 --> 00:01:38,050
Quindi venendo alla domanda su come compriamo la nostra

22
00:01:38,050 --> 00:01:40,090
applicazione Angular per la distribuzione?

23
00:01:40,090 --> 00:01:47,850
Ora potremmo usare il grande modo Gulp e NPM script di farlo, se si sceglie di farlo.

24
00:01:47,850 --> 00:01:53,290
Ma c'è un nuovo ragazzo sul blocco chiamato come webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack come capiremmo molto presto è un bundler di moduli.

26
00:01:59,540 --> 00:02:03,040
Ora, esamineremo alcuni dettagli nelle prossime due diapositive.

27
00:02:03,040 --> 00:02:08,150
Quindi, ciò che il webpack ti consente di fare è di impacchettare la tua applicazione Angular in un modo

28
00:02:08,150 --> 00:02:11,720
che sia facile da distribuire su un sito Web e

29
00:02:11,720 --> 00:02:15,470
rendere la tua applicazione Angular disponibile per gli utenti.

30
00:02:15,470 --> 00:02:22,070
Ora dal momento che stiamo usando Angular CLI per costruire la nostra applicazione

31
00:02:22,070 --> 00:02:26,040
Angular, Angular CLI sfrutta già webpack per

32
00:02:26,040 --> 00:02:32,010
fare la sua costruzione per la cartella di distribuzione per l'applicazione Angular.

33
00:02:32,010 --> 00:02:38,780
Quindi non abbiamo bisogno di fare esplicitamente alcun lavoro aggiuntivo per fare uso del webpack.

34
00:02:38,780 --> 00:02:40,700
Una volta che stiamo usando Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Perché l'Angular CLI si occupa di tutto il sollevamento pesante per nostro conto.

36
00:02:45,870 --> 00:02:50,664
Quindi, ma prima di vedere quale sia il modo Angular CLI di costruire la tua

37
00:02:50,664 --> 00:02:53,022
distribuzione ulteriormente facilità.

38
00:02:53,022 --> 00:02:57,162
Abbiamo bisogno di capire alcuni concetti su webpack e

39
00:02:57,162 --> 00:03:00,566
come webpack funziona in un po 'di dettaglio in modo

40
00:03:00,566 --> 00:03:06,270
che quando Angular CLI produce la cartella di distribuzione puoi guardare e

41
00:03:06,270 --> 00:03:10,410
vedere cosa esattamente viene costruito da Angular CLI.

42
00:03:10,410 --> 00:03:14,150
Quindi il mio obiettivo di questa particolare

43
00:03:14,150 --> 00:03:18,950
lezione è quello di darti una breve panoramica del webpack.

44
00:03:18,950 --> 00:03:23,770
Questa lezione non è un'introduzione a come fare uso del webpack.

45
00:03:23,770 --> 00:03:26,400
Questo va oltre lo scopo di questo corso, ma

46
00:03:26,400 --> 00:03:30,980
se siete interessati il sito webpack

47
00:03:30,980 --> 00:03:36,280
ha molte informazioni su come webpack può essere utilizzato per altre applicazioni.

48
00:03:36,280 --> 00:03:39,800
Potresti, in linea di principio, usare webpack per confezionare

49
00:03:41,350 --> 00:03:44,680
l'applicazione Bootstrap che hai sviluppato anche nel corso precedente.

50
00:03:46,080 --> 00:03:50,680
Ma in questo momento vedremo come facciamo uso del webpack

51
00:03:51,840 --> 00:03:57,640
come parte del modo Angular CLI di costruire la nostra interpretazione angolare.

52
00:03:59,640 --> 00:04:02,890
Quindi, ovviamente, la prima domanda che sorge nella tua mente è,

53
00:04:02,890 --> 00:04:04,410
cos'è esattamente il webpack?

54
00:04:04,410 --> 00:04:06,150
Di cosa stiamo parlando?

55
00:04:06,150 --> 00:04:12,850
Webpack, questa è la definizione dalla documentazione del webpack stesso.

56
00:04:12,850 --> 00:04:19,130
Dice che webpack è un bundler di moduli per le moderne applicazioni JavaScript.

57
00:04:19,130 --> 00:04:21,723
La tua applicazione Angular su cui hai lavorato

58
00:04:21,723 --> 00:04:24,530
finora è una semplice applicazione JavaScript moderna.

59
00:04:24,530 --> 00:04:29,590
Ora state tutti lavorando con l'avanguardia nella tecnologia Angular.

60
00:04:29,590 --> 00:04:35,170
E così, ovviamente si qualifichi come una moderna applicazione JavaScript e

61
00:04:35,170 --> 00:04:38,570
, quindi, l'uso del webpack ha perfettamente senso.

62
00:04:38,570 --> 00:04:40,980
Ora qual è il webpack migliore

63
00:04:40,980 --> 00:04:45,720
, guarda l'intera struttura della tua applicazione Angular.

64
00:04:45,720 --> 00:04:50,610
Quindi attraversa ricorsivamente il tuo codice della tua

65
00:04:50,610 --> 00:04:54,980
applicazione Angular cercando di vedere il modo migliore per raggruppare

66
00:04:54,980 --> 00:05:00,680
le informazioni in ciò che viene chiamato come bundle.

67
00:05:00,680 --> 00:05:05,947
Quando webpack guarda il tuo codice, tratta ogni file che

68
00:05:05,947 --> 00:05:12,735
hai all'interno dell'applicazione Angular, sia esso un JavaScript di file Typescript,

69
00:05:12,735 --> 00:05:17,319
sia esso un file CSS, sia esso un file SAS, sia esso un file immagine.

70
00:05:17,319 --> 00:05:21,781
Qualunque cosa, tratta ognuno di loro come moduli dal suo punto di vista,

71
00:05:21,781 --> 00:05:25,438
e poi decide, qual è il modo migliore per confezionare questi

72
00:05:25,438 --> 00:05:30,790
moduli in quelli che sono chiamati come pacchetti che possono essere scaricati da.

73
00:05:30,790 --> 00:05:36,060
Server al tuo browser web in modo comodo e conveniente.

74
00:05:37,350 --> 00:05:42,820
Quindi, quando parliamo di webpack abbiamo ovviamente bisogno di chiarire cosa significa un pacchetto.

75
00:05:42,820 --> 00:05:47,315
Come ho brevemente affermato nella diapositiva precedente, un pacchetto non è altro che

76
00:05:47,315 --> 00:05:51,155
un file JavaScript che incorpora risorse.

77
00:05:51,155 --> 00:05:56,130
Ora, devi tenerlo a mente che webpack tratta tutto come JavaScript.

78
00:05:56,130 --> 00:06:02,410
Ad esso che si tratti di CSS o di uno qualsiasi degli altri tipi di file,

79
00:06:02,410 --> 00:06:05,930
saranno anche trattati come JavaScript dal punto di vista del webpack.

80
00:06:05,930 --> 00:06:10,790
Ora non preoccupatevi troppo, webpack sa come

81
00:06:10,790 --> 00:06:15,470
impacchettarli e trattarli come pacchetti JavaScript in cui prepara quei pacchetti.

82
00:06:15,470 --> 00:06:19,740
O moduli JavaScript in cui prepara quei pacchetti.

83
00:06:19,740 --> 00:06:26,290
Quindi un pacchetto è qualcosa che raggruppa insieme moduli che appartengono insieme.

84
00:06:26,290 --> 00:06:29,010
Quando parlo del modulo non sto insinuando il modulo angolare,

85
00:06:29,010 --> 00:06:30,690
non sto insinuando il modulo JavaScript.

86
00:06:32,220 --> 00:06:36,170
Come ho detto e Webpack, ogni file viene creato come modulo.

87
00:06:36,170 --> 00:06:40,820
E così raggruppa quei moduli insieme,

88
00:06:40,820 --> 00:06:46,160
che dovrebbero essere serviti al client in un'unica risposta a una richiesta.

89
00:06:47,200 --> 00:06:51,740
Quindi il webpack stesso prende una decisione su come dire quali

90
00:06:51,740 --> 00:06:55,070
parti dovrebbero essere unite insieme in un pacchetto.

91
00:06:55,070 --> 00:06:59,000
E dovrebbe essere consegnato insieme in modo che il rendering della vostra

92
00:06:59,000 --> 00:07:04,120
applicazione web è fatto nel modo più efficace.

93
00:07:04,120 --> 00:07:09,190
Ora, Angular CLI ha già costruito la sua configurazione di come meglio impacchettare

94
00:07:09,190 --> 00:07:17,370
le risorse angolari, in modo che sia più convenientemente consegnato al browser.

95
00:07:17,370 --> 00:07:21,550
Quindi non abbiamo bisogno di preoccuparci di come farlo da soli,

96
00:07:21,550 --> 00:07:25,490
lo lasceremo alla logica CLI angolare per occuparci di tutta quella configurazione di

97
00:07:25,490 --> 00:07:29,540
come quel pacchetto costruisce i suoi pacchetti per nostro conto.

98
00:07:29,540 --> 00:07:33,190
Quindi quello che fa Webpack è, inizia al livello più alto.

99
00:07:33,190 --> 00:07:38,450
Nell' applicazione Angular, il livello più alto è index.html e main.js file,

100
00:07:38,450 --> 00:07:43,930
come abbiamo imparato nella prima lezione di questo corso.

101
00:07:43,930 --> 00:07:49,170
Quindi inizia lì, e poi segue tutti gli input

102
00:07:49,170 --> 00:07:54,630
che usi in quelli lungo il percorso e

103
00:07:54,630 --> 00:08:00,760
porta in su un'organizzazione gerarchica di tutte le diverse parti.

104
00:08:00,760 --> 00:08:06,110
Quindi quello che viene chiamato un grafico delle dipendenze è costruito dal webpack.

105
00:08:06,110 --> 00:08:10,840
Ora usando questo grafico delle dipendenze, Webpack decide quindi come impacchettare i suoi

106
00:08:10,840 --> 00:08:15,810
pacchetti e che immagini uno o più pacchetti come hanno

107
00:08:15,810 --> 00:08:21,630
senso per la tua particolare applicazione che il webpack è bundle.

108
00:08:21,630 --> 00:08:27,690
E nel processo di farlo, quando gestisce file non JavaScript,

109
00:08:27,690 --> 00:08:34,440
come CSS, HTML e SAS o Immagini e così via.

110
00:08:34,440 --> 00:08:38,240
Quindi utilizza plugin che consentono di pre-elaborare e

111
00:08:38,240 --> 00:08:41,910
modificare quei file, quei file non JavaScript,

112
00:08:41,910 --> 00:08:46,970
in modo che possano essere raggruppati nei pacchetti webpack.

113
00:08:49,082 --> 00:08:52,070
Se stai usando il webpack da zero

114
00:08:52,070 --> 00:08:57,510
, descriveresti alcune delle configurazioni per il tuo webpack per funzionare.

115
00:08:57,510 --> 00:09:00,775
Su questi file in un file chiamato

116
00:09:00,775 --> 00:09:06,810
webpack.config.js che abbiamo incluso nella cartella principale della vostra applicazione.

117
00:09:06,810 --> 00:09:11,640
Nel nostro caso dal momento che stiamo facendo affidamento su Angular CLI per farlo per nostro conto

118
00:09:11,640 --> 00:09:16,470
Angular CLI fa clic automaticamente qui per costruire la configurazione per il

119
00:09:16,470 --> 00:09:18,300
webpack con cui lavorare.

120
00:09:18,300 --> 00:09:23,260
Ora, quando parliamo di webpack, ci sono quattro concetti che sono importanti per

121
00:09:23,260 --> 00:09:26,660
noi per capire come funziona il webpack sulle foto.

122
00:09:26,660 --> 00:09:28,740
Il primo è l'ingresso.

123
00:09:28,740 --> 00:09:33,560
Entry è il punto in cui il webpack dovrebbe iniziare e

124
00:09:33,560 --> 00:09:36,350
seguire per costruire il grafico delle dipendenze.

125
00:09:36,350 --> 00:09:40,260
Quindi, il file main.ts per esempio, è un punto di ingresso.

126
00:09:40,260 --> 00:09:44,490
Quindi il webpack può iniziare il suo inseguimento nella costruzione del grafico delle dipendenze.

127
00:09:44,490 --> 00:09:50,860
Proprio a main.ts e poi andare a caccia di tutte le istruzioni di importazione da lì

128
00:09:50,860 --> 00:09:56,160
ai loro altri file e poi da lì importano quei file e

129
00:09:56,160 --> 00:10:01,490
così via fino a quando non costruisce il grafico delle dipendenze.

130
00:10:02,930 --> 00:10:06,660
Ora, la seconda parte è ciò che chiameremmo come output.

131
00:10:06,660 --> 00:10:11,200
Nel webpack l'output è l'insieme di pacchetti che il webpack prepara

132
00:10:11,200 --> 00:10:11,740
per tuo conto.

133
00:10:12,890 --> 00:10:15,590
Il terzo è caricatori.

134
00:10:15,590 --> 00:10:18,950
Ora webpack come ho detto capisce solo JavaScript e

135
00:10:18,950 --> 00:10:21,540
sa solo come lavorare con JavaScript.

136
00:10:21,540 --> 00:10:26,250
Ma come ho anche detto, webpack tratta ogni file come un modulo.

137
00:10:26,250 --> 00:10:31,660
Quindi quei file che non sono JavaScript devono essere

138
00:10:31,660 --> 00:10:36,870
trasformati e quindi inseriti nei tuoi pacchetti utilizzando

139
00:10:36,870 --> 00:10:42,300
trasformazioni appropriate e quindi verranno aggiunti nel tuo grafico delle dipendenze.

140
00:10:42,300 --> 00:10:45,420
Questo è dove entra in gioco l'uso dei vari plugin.

141
00:10:45,420 --> 00:10:47,320
Cosa ti aiutano a fare i plugin?

142
00:10:47,320 --> 00:10:51,920
I plugin ti aiutano a eseguire le varie azioni e funzionalità personalizzate

143
00:10:51,920 --> 00:10:58,020
o compilazioni che devi fare per costruire i tuoi pacchetti.

144
00:10:58,020 --> 00:11:02,820
Quindi ti aiuterà a trasformare il tuo CSS in un modo che posso

145
00:11:02,820 --> 00:11:06,830
impacchettare nei tuoi pacchetti JavaScript e così via.

146
00:11:06,830 --> 00:11:12,570
Quindi questa è una rapida introduzione a come funziona effettivamente il webpack.

147
00:11:12,570 --> 00:11:17,420
Ora con questa rapida introduzione, nel prossimo esercizio

148
00:11:17,420 --> 00:11:22,750
vedrai che useremo convenientemente un comando chiamato ng

149
00:11:22,750 --> 00:11:28,360
build per costruire la nostra cartella di distribuzione per la nostra applicazione Angular.

150
00:11:28,360 --> 00:11:31,690
Ng build ti consente anche di creare una versione di sviluppo o una

151
00:11:33,380 --> 00:11:36,440
versione di produzione della tua applicazione Angular.

152
00:11:36,440 --> 00:11:38,790
Quando abbiamo usato ng surf,

153
00:11:38,790 --> 00:11:43,270
la CLI Angular stava effettivamente facendo uso del webpack per imballare le cose.

154
00:11:43,270 --> 00:11:44,350
Quindi, se torni indietro e

155
00:11:44,350 --> 00:11:50,630
guardi tutte le cose che venivano stampate nella tua finestra del terminale,

156
00:11:50,630 --> 00:11:55,910
inizierai a vedere il webpack che lavora dietro le quinte per fare i bundle.

157
00:11:57,070 --> 00:12:01,760
Ora nel prossimo esercizio si costruirà la loro cartella di distribuzione,

158
00:12:01,760 --> 00:12:08,840
che può quindi essere copiata sul tuo sito web e quindi distribuire l'applicazione Angular.

159
00:12:08,840 --> 00:12:12,020
Ora ho già fatto una build

160
00:12:12,020 --> 00:12:15,570
dell'applicazione Angular che abbiamo costruito finora.

161
00:12:15,570 --> 00:12:20,380
In modo che, andiamo a dare un'occhiata veloce alla cartella di distribuzione per vedere cosa

162
00:12:20,380 --> 00:12:24,370
c'è dentro prima di eseguire effettivamente l'esercizio.

163
00:12:24,370 --> 00:12:28,520
Quindi, una volta completato l'esercizio, ti consiglio vivamente di andare a

164
00:12:28,520 --> 00:12:36,140
guardare la cartella del disco che è stata creata nella cartella del progetto delle applicazioni angolari.

165
00:12:36,140 --> 00:12:40,940
E poi guarda e vedi esattamente i file che ti mostrerò subito.

166
00:12:40,940 --> 00:12:44,020
Proprio nella cartella di distribuzione.

167
00:12:44,020 --> 00:12:50,890
Andando alla nostra applicazione Angular in Visual Studio qui,

168
00:12:50,890 --> 00:12:53,950
vedi che ora sto aprendo la cartella di distribuzione.

169
00:12:53,950 --> 00:12:58,260
E all'interno della cartella di distribuzione vedrai un sacco di file qui.

170
00:12:58,260 --> 00:13:03,905
Vedrai un file chiamato main una lunga stringa dove

171
00:13:03,905 --> 00:13:09,890
.bundle.js dalla tua conoscenza di Gulp e Grunt dal corso precedente,

172
00:13:09,890 --> 00:13:14,620
inizierai a vedere cosa significa quella stringa lunga intermedia.

173
00:13:14,620 --> 00:13:19,830
Ecco come aggiungi quel controllo delle versioni alla tua applicazione.

174
00:13:19,830 --> 00:13:25,310
Allo stesso modo vedi un altro file chiamato styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Quindi vedi un vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
E poi polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Quindi hai un file index.html e

178
00:13:34,300 --> 00:13:37,350
ti stai chiedendo cosa sia successo a tutto il tuo codice HTML?

179
00:13:37,350 --> 00:13:39,970
E' in uno di quei pacchi, ok?

180
00:13:39,970 --> 00:13:43,610
Quindi tutti i modelli che hai scritto sono tutti lì in uno di quei pacchetti,

181
00:13:43,610 --> 00:13:45,670
tranne la pagina index.html.

182
00:13:45,670 --> 00:13:51,206
È necessaria la pagina index.html esplicitamente perché,

183
00:13:51,206 --> 00:13:54,348
quando un utente digita l'URL per il

184
00:13:54,348 --> 00:13:59,024
tuo sito Web nella barra degli indirizzi del browser.

185
00:13:59,024 --> 00:14:01,624
Quindi atterreresti sul tuo sito web e

186
00:14:01,624 --> 00:14:05,362
sulle pagine HTML del punto indice in cui avvii tutto e

187
00:14:05,362 --> 00:14:11,400
ne hai bisogno per avviare la tua applicazione Angular, quindi è per questo che c'è.

188
00:14:11,400 --> 00:14:16,170
E poi si vedono anche i file fontawesome lì che sono necessari e

189
00:14:16,170 --> 00:14:21,340
che all'interno della risorsa si vedono alcune immagini lì, nella cartella risorse.

190
00:14:22,530 --> 00:14:28,980
Quindi, dando una rapida occhiata al file principale, vedrai che questo è

191
00:14:28,980 --> 00:14:35,185
come puoi vedere è un insieme concatenato di file molti compressi.

192
00:14:35,185 --> 00:14:40,025
Ora, se provi a leggerlo, non sarà facile,

193
00:14:40,025 --> 00:14:42,455
è un file enorme con un sacco di cose.

194
00:14:42,455 --> 00:14:46,695
Questo include anche tutto il codice framework angolare,

195
00:14:46,695 --> 00:14:49,140
una mano il tuo codice che hai scritto.

196
00:14:49,140 --> 00:14:53,980
E il codice che proviene da Angular Material, Flex Layout e

197
00:14:53,980 --> 00:14:58,460
ogni altra cosa che hai incluso con la tua applicazione Angular.

198
00:14:58,460 --> 00:15:02,480
Allo stesso modo, hai polyfill e poi stili e

199
00:15:02,480 --> 00:15:07,130
inizi a vedere che tutte le cose che usi all'interno

200
00:15:07,130 --> 00:15:10,870
dell'applicazione Angular sono state raggruppate insieme in questi file lì.

201
00:15:12,270 --> 00:15:17,220
Quindi con questo spero che tu abbia una rapida panoramica del webpack.

202
00:15:17,220 --> 00:15:21,100
Ora è il momento per noi di andare all'esercizio, dove faremo semplicemente uso di

203
00:15:21,100 --> 00:15:26,660
Angular CLI ng comando build per costruire questa cartella di distribuzione.

204
00:15:26,660 --> 00:15:30,810
E vedrai come puoi distribuire la tua applicazione Angular su un sito web.

205
00:15:31,870 --> 00:15:37,329
Subito dopo aver completato la compilazione.

206
00:15:37,329 --> 00:15:39,969
[ MUSIC]