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

2
00:00:05,570 --> 00:00:09,319
En el curso anterior de Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
aprendimos a hacer uso de scripts NPM o Grunt o

4
00:00:14,613 --> 00:00:21,220
Gulp para construir la carpeta de distribución para nuestra aplicación web.

5
00:00:21,220 --> 00:00:27,040
Así que vimos cómo se construye la carpeta de distribución tomando todos los archivos HTML,

6
00:00:27,040 --> 00:00:30,270
CSS y JavaScript.

7
00:00:30,270 --> 00:00:35,540
Y luego haciendo modificación, uglificación, concatenación,

8
00:00:35,540 --> 00:00:40,490
y varias otras transformaciones en estos para construir archivos de distribución que pueden ser

9
00:00:40,490 --> 00:00:48,470
simplemente copiados en el servidor y luego hacer que su sitio web esté disponible para los usuarios.

10
00:00:48,470 --> 00:00:52,050
Ahora, ¿qué hay de su aplicación Angular?

11
00:00:52,050 --> 00:00:57,240
¿Cómo empaquetamos nuestra aplicación Angular para implementarla en un sitio web?

12
00:00:57,240 --> 00:01:01,670
Ahora como te das cuenta de que tu aplicación angular también va a ser

13
00:01:01,670 --> 00:01:06,630
implementada en un sitio web desde donde la gente accederá a tu aplicación Angular,

14
00:01:06,630 --> 00:01:09,350
descarga la aplicación Angular al navegador y

15
00:01:09,350 --> 00:01:13,780
luego su aplicación angular cobrará vida en sus navegadores.

16
00:01:14,810 --> 00:01:19,430
También veremos la forma angular de apuntar a dispositivos móviles

17
00:01:19,430 --> 00:01:23,890
en los próximos dos cursos, en esta especialización.

18
00:01:23,890 --> 00:01:27,770
Así que no estoy hablando específicamente de eso, en este momento.

19
00:01:27,770 --> 00:01:32,180
Pero aquí estamos hablando de cómo apuntar a una ventana del navegador web.

20
00:01:32,180 --> 00:01:35,150
Usando el código de la aplicación Angular.

21
00:01:35,150 --> 00:01:38,050
Entonces, ¿llegando a la pregunta de cómo empaquetamos nuestra aplicación Angular

22
00:01:38,050 --> 00:01:40,090
para la implementación?

23
00:01:40,090 --> 00:01:47,850
Ahora podríamos usar los scripts de Gulp y NPM de gran manera de hacerlo, si lo desea.

24
00:01:47,850 --> 00:01:53,290
Pero hay un nuevo chico en el bloque llamado como paquete web.

25
00:01:53,290 --> 00:01:59,540
Webpack como entenderíamos muy pronto es un agrupador de módulos.

26
00:01:59,540 --> 00:02:03,040
Ahora, veremos algunos detalles en el próximo par de diapositivas.

27
00:02:03,040 --> 00:02:08,150
Entonces, lo que te permite hacer es empaquetar tu aplicación Angular de una manera

28
00:02:08,150 --> 00:02:11,720
que sea fácil de implementar en un sitio web y

29
00:02:11,720 --> 00:02:15,470
hacer que tu aplicación Angular esté disponible para los usuarios.

30
00:02:15,470 --> 00:02:22,070
Ahora ya que estamos usando Angular CLI para construir nuestra aplicación Angular,

31
00:02:22,070 --> 00:02:26,040
Angular CLI ya aprovecha el paquete web para

32
00:02:26,040 --> 00:02:32,010
haciendo su construcción para la carpeta de distribución para su aplicación Angular.

33
00:02:32,010 --> 00:02:38,780
Así que no necesitamos hacer explícitamente ningún trabajo adicional para hacer uso de webpack.

34
00:02:38,780 --> 00:02:40,700
Una vez que estamos usando Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Porque Angular CLI se encarga de todo el trabajo pesado en nuestro nombre.

36
00:02:45,870 --> 00:02:50,664
Entonces, pero antes de que veamos cuál es la forma de CLIs angular de construir su distribución

37
00:02:50,664 --> 00:02:53,022
más fácil.

38
00:02:53,022 --> 00:02:57,162
Necesitamos entender algunos conceptos sobre webpack y

39
00:02:57,162 --> 00:03:00,566
cómo funciona webpack con un poco de detalle para

40
00:03:00,566 --> 00:03:06,270
que cuando Angular CLI produce la carpeta de distribución, pueda mirar y

41
00:03:06,270 --> 00:03:10,410
ver qué está siendo construido exactamente por Angular CLI.

42
00:03:10,410 --> 00:03:14,150
Así que mi objetivo de esta conferencia

43
00:03:14,150 --> 00:03:18,950
en particular es darles una breve descripción general del paquete web.

44
00:03:18,950 --> 00:03:23,770
Esta conferencia no es una introducción a cómo hacer uso del paquete web.

45
00:03:23,770 --> 00:03:26,400
Eso está más allá del alcance de este curso, pero

46
00:03:26,400 --> 00:03:30,980
si usted está interesado el sitio de webpacks

47
00:03:30,980 --> 00:03:36,280
tiene mucha información sobre cómo webpack puede ser utilizado para otras aplicaciones.

48
00:03:36,280 --> 00:03:39,800
Usted podría, en principio, usar el paquete web para empaquetar su aplicación Bootstrap

49
00:03:41,350 --> 00:03:44,680
que desarrolló también en el curso anterior.

50
00:03:46,080 --> 00:03:50,680
Pero en este momento vamos a ver cómo hacemos uso del paquete web

51
00:03:51,840 --> 00:03:57,640
como parte de la forma angular CLI de construir nuestra interpretación angular.

52
00:03:59,640 --> 00:04:02,890
Así que obviamente la primera pregunta que surge en tu mente es,

53
00:04:02,890 --> 00:04:04,410
, ¿qué es exactamente el paquete web?

54
00:04:04,410 --> 00:04:06,150
¿De qué estamos hablando?

55
00:04:06,150 --> 00:04:12,850
Webpack, esta es la definición de la documentación del webpack en sí.

56
00:04:12,850 --> 00:04:19,130
Dice que el paquete web es un paquete de módulos para aplicaciones JavaScript modernas.

57
00:04:19,130 --> 00:04:21,723
Su aplicación angular en la que ha estado trabajando hasta

58
00:04:21,723 --> 00:04:24,530
ahora es una aplicación JavaScript moderna y fácil.

59
00:04:24,530 --> 00:04:29,590
Ahora todos están trabajando con la vanguardia en tecnología Angular.

60
00:04:29,590 --> 00:04:35,170
Y entonces, obviamente califica como una aplicación JavaScript moderna y

61
00:04:35,170 --> 00:04:38,570
, por lo tanto, usar webpack tiene perfecto sentido.

62
00:04:38,570 --> 00:04:40,980
Ahora cuál es el mejor paquete web,

63
00:04:40,980 --> 00:04:45,720
mira toda la estructura de su aplicación Angular.

64
00:04:45,720 --> 00:04:50,610
Así que recorre recursivamente su código de su aplicación Angular

65
00:04:50,610 --> 00:04:54,980
buscando ver la mejor manera de agrupar

66
00:04:54,980 --> 00:05:00,680
la información en lo que se llama como paquetes.

67
00:05:00,680 --> 00:05:05,947
Cuando webpack mira tu código, trata cada archivo que

68
00:05:05,947 --> 00:05:12,735
tiene dentro de tu aplicación Angular, ya sea un JavaScript de archivo Typescript,

69
00:05:12,735 --> 00:05:17,319
ya sea un archivo CSS, ya sea un archivo SAS, ya sea un archivo de imagen.

70
00:05:17,319 --> 00:05:21,781
Lo que sea, trata a cada uno de ellos como módulos desde su perspectiva,

71
00:05:21,781 --> 00:05:25,438
y luego decide, cuál es la mejor manera de empaquetar estos módulos

72
00:05:25,438 --> 00:05:30,790
en lo que se llaman como paquetes que se pueden descargar desde el.

73
00:05:30,790 --> 00:05:36,060
Servidor a su navegador web de una manera cómoda y conveniente.

74
00:05:37,350 --> 00:05:42,820
Así que cuando hablamos de webpack obviamente necesitamos aclarar lo que significa un paquete.

75
00:05:42,820 --> 00:05:47,315
Como dije brevemente en la diapositiva anterior, un paquete no es más que

76
00:05:47,315 --> 00:05:51,155
un archivo JavaScript que incorpora activos.

77
00:05:51,155 --> 00:05:56,130
Ahora, tienes que tener esto en cuenta que el paquete web trata todo como JavaScript.

78
00:05:56,130 --> 00:06:02,410
Ya sea CSS o cualquiera de los otros tipos de archivos,

79
00:06:02,410 --> 00:06:05,930
también serán tratados como JavaScript desde la perspectiva del webpack.

80
00:06:05,930 --> 00:06:10,790
Ahora no te preocupes demasiado, webpack sabe cómo empaquetarlos y

81
00:06:10,790 --> 00:06:15,470
tratarlos como paquetes de JavaScript donde prepara esos paquetes.

82
00:06:15,470 --> 00:06:19,740
O módulos JavaScript donde prepara esos paquetes.

83
00:06:19,740 --> 00:06:26,290
Así que un paquete es algo que agrupa módulos que pertenecen juntos.

84
00:06:26,290 --> 00:06:29,010
Cuando hablo de módulo, no estoy implicando módulo angular,

85
00:06:29,010 --> 00:06:30,690
no estoy implicando módulo JavaScript.

86
00:06:32,220 --> 00:06:36,170
Como dije y Webpack, cada archivo se crea como un módulo.

87
00:06:36,170 --> 00:06:40,820
Y así agrupa esos módulos,

88
00:06:40,820 --> 00:06:46,160
que deben ser servidos al cliente en una sola respuesta a una solicitud.

89
00:06:47,200 --> 00:06:51,740
Así que el paquete web en sí mismo toma una decisión sobre decir qué partes

90
00:06:51,740 --> 00:06:55,070
deben unirse en un paquete.

91
00:06:55,070 --> 00:06:59,000
Y debe entregarse juntos para que la representación de su aplicación web

92
00:06:59,000 --> 00:07:04,120
se realice de la manera más efectiva.

93
00:07:04,120 --> 00:07:09,190
Ahora, Angular CLI ya ha construido su configuración de la mejor manera de empaquetar

94
00:07:09,190 --> 00:07:17,370
los activos angulares, de modo que se entrega más convenientemente al navegador.

95
00:07:17,370 --> 00:07:21,550
Así que no necesitamos preocuparnos por cómo hacerlo nosotros mismos,

96
00:07:21,550 --> 00:07:25,490
lo dejaremos a la lógica angular CLI para encargarse de toda esa configuración de

97
00:07:25,490 --> 00:07:29,540
cómo ese paquete construye sus paquetes en nuestro nombre.

98
00:07:29,540 --> 00:07:33,190
Así que lo que Webpack hace es que comienza en el nivel más alto.

99
00:07:33,190 --> 00:07:38,450
En su aplicación Angular, el nivel superior es index.html y main.js archivos,

100
00:07:38,450 --> 00:07:43,930
como hemos aprendido en la primera lección de este curso.

101
00:07:43,930 --> 00:07:49,170
Así que comienza allí, y luego sigue todas las entradas

102
00:07:49,170 --> 00:07:54,630
que usas en los que están en el camino y

103
00:07:54,630 --> 00:08:00,760
trae una organización jerárquica de todas las partes.

104
00:08:00,760 --> 00:08:06,110
Entonces, lo que se llama un gráfico de dependencia es construido por webpack.

105
00:08:06,110 --> 00:08:10,840
Ahora usando este gráfico de dependencia, Webpack luego decide cómo

106
00:08:10,840 --> 00:08:15,810
empaquetar sus paquetes y que las imágenes de uno o más paquetes ya que tienen

107
00:08:15,810 --> 00:08:21,630
sentido para su aplicación particular que el paquete web es paquete.

108
00:08:21,630 --> 00:08:27,690
Y en el proceso de hacerlo, cuando está manejando archivos que no son JavaScript,

109
00:08:27,690 --> 00:08:34,440
como CSS, HTML y un SAS o Images, etc.

110
00:08:34,440 --> 00:08:38,240
Luego utiliza plugins que le permiten pre-procesar y

111
00:08:38,240 --> 00:08:41,910
modificar esos archivos, aquellos archivos que no son JavaScript,

112
00:08:41,910 --> 00:08:46,970
de una manera que puedan ser incluidos en sus paquetes de paquete web.

113
00:08:49,082 --> 00:08:52,070
Si está usando webpack desde cero,

114
00:08:52,070 --> 00:08:57,510
entonces describiría parte de la configuración para que su webpack funcione.

115
00:08:57,510 --> 00:09:00,775
En estos archivos en un archivo llamado

116
00:09:00,775 --> 00:09:06,810
webpack.config.js que incluimos en la carpeta raíz de su aplicación.

117
00:09:06,810 --> 00:09:11,640
En nuestro caso, ya que estamos confiando en Angular CLI para hacer esto en nuestro nombre

118
00:09:11,640 --> 00:09:16,470
Angular CLI hace clic automáticamente aquí en la construcción de la configuración para

119
00:09:16,470 --> 00:09:18,300
webpack para trabajar con.

120
00:09:18,300 --> 00:09:23,260
Ahora cuando hablamos de webpack, hay cuatro conceptos que son importantes para

121
00:09:23,260 --> 00:09:26,660
nosotros para entender cómo funciona webpack en las fotos.

122
00:09:26,660 --> 00:09:28,740
La primera es la entrada.

123
00:09:28,740 --> 00:09:33,560
La entrada es el punto en el que el paquete web debe comenzar y

124
00:09:33,560 --> 00:09:36,350
seguir hacia abajo para construir el gráfico de dependencia.

125
00:09:36,350 --> 00:09:40,260
Entonces, el archivo main.ts, por ejemplo, es un punto de entrada.

126
00:09:40,260 --> 00:09:44,490
Así que el paquete web puede comenzar su persecución en la construcción del gráfico de dependencia.

127
00:09:44,490 --> 00:09:50,860
Justo en main.ts y luego ir persiguiendo todas las declaraciones de importación desde allí

128
00:09:50,860 --> 00:09:56,160
a sus otros archivos y luego desde allí importan esos archivos y

129
00:09:56,160 --> 00:10:01,490
así sucesivamente hasta que construye el gráfico de dependencia.

130
00:10:02,930 --> 00:10:06,660
Ahora, la segunda parte es lo que llamaríamos como la salida.

131
00:10:06,660 --> 00:10:11,200
En el paquete web, la salida es el conjunto de paquetes que el paquete web prepara

132
00:10:11,200 --> 00:10:11,740
en su nombre.

133
00:10:12,890 --> 00:10:15,590
El tercero es cargadores.

134
00:10:15,590 --> 00:10:18,950
Ahora webpack como dije solo entiende JavaScript y

135
00:10:18,950 --> 00:10:21,540
solo sabe cómo trabajar con JavaScript.

136
00:10:21,540 --> 00:10:26,250
Pero como también mencioné, el paquete web trata cada archivo como un módulo.

137
00:10:26,250 --> 00:10:31,660
Así que esos archivos que no son JavaScript tienen que ser

138
00:10:31,660 --> 00:10:36,870
transformados y luego puestos en sus paquetes usando

139
00:10:36,870 --> 00:10:42,300
transformaciones apropiadas y luego se agregarán a su gráfico de dependencia.

140
00:10:42,300 --> 00:10:45,420
Aquí es donde entra el uso de los diversos plugins.

141
00:10:45,420 --> 00:10:47,320
¿Qué te ayudan los plugins a hacer?

142
00:10:47,320 --> 00:10:51,920
Los plugins te ayudan a realizar las diversas acciones y funcionalidades personalizadas

143
00:10:51,920 --> 00:10:58,020
o compilaciones que necesitas hacer para construir tus paquetes.

144
00:10:58,020 --> 00:11:02,820
Así que te ayudará a transformar tu CSS en una manera que pueda

145
00:11:02,820 --> 00:11:06,830
paquete en tus paquetes de JavaScript, y así sucesivamente.

146
00:11:06,830 --> 00:11:12,570
Así que esa es una introducción rápida a cómo funciona webpack en realidad.

147
00:11:12,570 --> 00:11:17,420
Ahora con esa rápida introducción, en el próximo ejercicio verá

148
00:11:17,420 --> 00:11:22,750
que convenientemente haremos uso de un comando llamado ng

149
00:11:22,750 --> 00:11:28,360
build para construir nuestra carpeta de distribución para nuestra aplicación Angular.La compilación

150
00:11:28,360 --> 00:11:31,690
Ng le permite incluso construir una versión de desarrollo o versión de producción

151
00:11:33,380 --> 00:11:36,440
de su aplicación Angular.

152
00:11:36,440 --> 00:11:38,790
Cuando usamos ng surf,

153
00:11:38,790 --> 00:11:43,270
la CLI angular estaba haciendo uso de webpack para empacar cosas.

154
00:11:43,270 --> 00:11:44,350
Así que si retrocedes y

155
00:11:44,350 --> 00:11:50,630
mira todas las cosas que se estaban imprimiendo en la ventana de tu terminal,

156
00:11:50,630 --> 00:11:55,910
comenzarás a ver el webpack trabajando entre bambalinas para hacer los paquetes.

157
00:11:57,070 --> 00:12:01,760
Ahora, en el próximo ejercicio, construirá su carpeta de distribución,

158
00:12:01,760 --> 00:12:08,840
que luego se puede copiar en su sitio web y luego implementar su aplicación Angular.

159
00:12:08,840 --> 00:12:12,020
Ahora ya he hecho una compilación

160
00:12:12,020 --> 00:12:15,570
de la aplicación Angular que hemos construido hasta ahora.

161
00:12:15,570 --> 00:12:20,380
Así que, vamos a echar un vistazo rápido a la carpeta de distribución para ver lo que hay en

162
00:12:20,380 --> 00:12:24,370
allí antes de que realmente haga el ejercicio.

163
00:12:24,370 --> 00:12:28,520
Así que una vez que complete el ejercicio, le aconsejaría encarecidamente que vaya y

164
00:12:28,520 --> 00:12:36,140
mire la carpeta de disco que se creó en su carpeta de proyecto de aplicaciones angulares.

165
00:12:36,140 --> 00:12:40,940
Y luego mira y mira exactamente los archivos que te voy a mostrar ahora mismo.

166
00:12:40,940 --> 00:12:44,020
Justo en la carpeta de distribución.

167
00:12:44,020 --> 00:12:50,890
Al ir a nuestra aplicación Angular en Visual Studio aquí,

168
00:12:50,890 --> 00:12:53,950
ve que ahora estoy abriendo la carpeta de distribución.

169
00:12:53,950 --> 00:12:58,260
Y dentro de la carpeta de distribución verá un montón de archivos aquí.

170
00:12:58,260 --> 00:13:03,905
Verá un archivo llamado main una cadena larga donde

171
00:13:03,905 --> 00:13:09,890
.bundle.js por su conocimiento de Gulp y Grunt del curso anterior,

172
00:13:09,890 --> 00:13:14,620
comenzará a ver lo que significa esa cadena larga intermedia.

173
00:13:14,620 --> 00:13:19,830
Así es como agrega ese versionado a su aplicación.

174
00:13:19,830 --> 00:13:25,310
Del mismo modo, verá otro archivo llamado styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Entonces verá un vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
Y luego polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Entonces tienes un archivo index.html, y

178
00:13:34,300 --> 00:13:37,350
te estás preguntando qué pasó con todo tu código HTML.

179
00:13:37,350 --> 00:13:39,970
Está en uno de esos paquetes, vale.

180
00:13:39,970 --> 00:13:43,610
Así que todas las plantillas que has escrito están en uno de esos paquetes,

181
00:13:43,610 --> 00:13:45,670
excepto la página index.html.

182
00:13:45,670 --> 00:13:51,206
Necesita la página index.html explícitamente porque

183
00:13:51,206 --> 00:13:54,348
cuando un usuario escribe la URL de

184
00:13:54,348 --> 00:13:59,024
su sitio web en la barra de direcciones del navegador.

185
00:13:59,024 --> 00:14:01,624
Entonces aterrizarías en tu sitio web y

186
00:14:01,624 --> 00:14:05,362
las páginas HTML de punto índice donde comienzas todo y

187
00:14:05,362 --> 00:14:11,400
necesitas eso para arrancar tu aplicación Angular, por lo que es por eso que eso está ahí.

188
00:14:11,400 --> 00:14:16,170
Y luego también se ven los archivos fontawesome allí que son necesarios y

189
00:14:16,170 --> 00:14:21,340
que dentro del activo se ven algunas imágenes allí, en la carpeta de activos.

190
00:14:22,530 --> 00:14:28,980
Así que echando un vistazo rápido al archivo principal, verá que esto es

191
00:14:28,980 --> 00:14:35,185
como puede ver es un conjunto concatenado de muchos archivos comprimidos.

192
00:14:35,185 --> 00:14:40,025
Ahora, si intentas leer eso, no va a ser fácil,

193
00:14:40,025 --> 00:14:42,455
es un archivo enorme con muchas cosas.

194
00:14:42,455 --> 00:14:46,695
Esto también incluye todo el código de marcos angulares,

195
00:14:46,695 --> 00:14:49,140
una mano su código que ha escrito.

196
00:14:49,140 --> 00:14:53,980
Y el código que viene de Material Angular, Flex Layout y

197
00:14:53,980 --> 00:14:58,460
todas las demás cosas que incluiste con tu aplicación Angular.

198
00:14:58,460 --> 00:15:02,480
Del mismo modo, tiene polyfills y luego estilos y

199
00:15:02,480 --> 00:15:07,130
comienza a ver que todas las cosas que usa dentro de su aplicación Angular

200
00:15:07,130 --> 00:15:10,870
se han agrupado en estos archivos allí.

201
00:15:12,270 --> 00:15:17,220
Así que con esto espero que tengas una visión general rápida del paquete web.

202
00:15:17,220 --> 00:15:21,100
Ahora es el momento de que vayamos al ejercicio, donde simplemente haremos uso del comando

203
00:15:21,100 --> 00:15:26,660
angular CLI ng build para construir esta carpeta de distribución.

204
00:15:26,660 --> 00:15:30,810
Y verá cómo puede implementar su aplicación Angular en un sitio web.

205
00:15:31,870 --> 00:15:37,329
Justo después de completar la compilación.

206
00:15:37,329 --> 00:15:39,969
[MÚSICA]