[MUSIC]
En el curso anterior de Bootstrap 4,
aprendimos a hacer uso de scripts NPM o Grunt o
Gulp para construir la carpeta de distribución para nuestra aplicación web.
Así que vimos cómo se construye la carpeta de distribución tomando todos los archivos HTML,
CSS y JavaScript.
Y luego haciendo modificación, uglificación, concatenación,
y varias otras transformaciones en estos para construir archivos de distribución que pueden ser
simplemente copiados en el servidor y luego hacer que su sitio web esté disponible para los usuarios.
Ahora, ¿qué hay de su aplicación Angular?
¿Cómo empaquetamos nuestra aplicación Angular para implementarla en un sitio web?
Ahora como te das cuenta de que tu aplicación angular también va a ser
implementada en un sitio web desde donde la gente accederá a tu aplicación Angular,
descarga la aplicación Angular al navegador y
luego su aplicación angular cobrará vida en sus navegadores.
También veremos la forma angular de apuntar a dispositivos móviles
en los próximos dos cursos, en esta especialización.
Así que no estoy hablando específicamente de eso, en este momento.
Pero aquí estamos hablando de cómo apuntar a una ventana del navegador web.
Usando el código de la aplicación Angular.
Entonces, ¿llegando a la pregunta de cómo empaquetamos nuestra aplicación Angular
para la implementación?
Ahora podríamos usar los scripts de Gulp y NPM de gran manera de hacerlo, si lo desea.
Pero hay un nuevo chico en el bloque llamado como paquete web.
Webpack como entenderíamos muy pronto es un agrupador de módulos.
Ahora, veremos algunos detalles en el próximo par de diapositivas.
Entonces, lo que te permite hacer es empaquetar tu aplicación Angular de una manera
que sea fácil de implementar en un sitio web y
hacer que tu aplicación Angular esté disponible para los usuarios.
Ahora ya que estamos usando Angular CLI para construir nuestra aplicación Angular,
Angular CLI ya aprovecha el paquete web para
haciendo su construcción para la carpeta de distribución para su aplicación Angular.
Así que no necesitamos hacer explícitamente ningún trabajo adicional para hacer uso de webpack.
Una vez que estamos usando Angular CLI.
Porque Angular CLI se encarga de todo el trabajo pesado en nuestro nombre.
Entonces, pero antes de que veamos cuál es la forma de CLIs angular de construir su distribución
más fácil.
Necesitamos entender algunos conceptos sobre webpack y
cómo funciona webpack con un poco de detalle para
que cuando Angular CLI produce la carpeta de distribución, pueda mirar y
ver qué está siendo construido exactamente por Angular CLI.
Así que mi objetivo de esta conferencia
en particular es darles una breve descripción general del paquete web.
Esta conferencia no es una introducción a cómo hacer uso del paquete web.
Eso está más allá del alcance de este curso, pero
si usted está interesado el sitio de webpacks
tiene mucha información sobre cómo webpack puede ser utilizado para otras aplicaciones.
Usted podría, en principio, usar el paquete web para empaquetar su aplicación Bootstrap
que desarrolló también en el curso anterior.
Pero en este momento vamos a ver cómo hacemos uso del paquete web
como parte de la forma angular CLI de construir nuestra interpretación angular.
Así que obviamente la primera pregunta que surge en tu mente es,
, ¿qué es exactamente el paquete web?
¿De qué estamos hablando?
Webpack, esta es la definición de la documentación del webpack en sí.
Dice que el paquete web es un paquete de módulos para aplicaciones JavaScript modernas.
Su aplicación angular en la que ha estado trabajando hasta
ahora es una aplicación JavaScript moderna y fácil.
Ahora todos están trabajando con la vanguardia en tecnología Angular.
Y entonces, obviamente califica como una aplicación JavaScript moderna y
, por lo tanto, usar webpack tiene perfecto sentido.
Ahora cuál es el mejor paquete web,
mira toda la estructura de su aplicación Angular.
Así que recorre recursivamente su código de su aplicación Angular
buscando ver la mejor manera de agrupar
la información en lo que se llama como paquetes.
Cuando webpack mira tu código, trata cada archivo que
tiene dentro de tu aplicación Angular, ya sea un JavaScript de archivo Typescript,
ya sea un archivo CSS, ya sea un archivo SAS, ya sea un archivo de imagen.
Lo que sea, trata a cada uno de ellos como módulos desde su perspectiva,
y luego decide, cuál es la mejor manera de empaquetar estos módulos
en lo que se llaman como paquetes que se pueden descargar desde el.
Servidor a su navegador web de una manera cómoda y conveniente.
Así que cuando hablamos de webpack obviamente necesitamos aclarar lo que significa un paquete.
Como dije brevemente en la diapositiva anterior, un paquete no es más que
un archivo JavaScript que incorpora activos.
Ahora, tienes que tener esto en cuenta que el paquete web trata todo como JavaScript.
Ya sea CSS o cualquiera de los otros tipos de archivos,
también serán tratados como JavaScript desde la perspectiva del webpack.
Ahora no te preocupes demasiado, webpack sabe cómo empaquetarlos y
tratarlos como paquetes de JavaScript donde prepara esos paquetes.
O módulos JavaScript donde prepara esos paquetes.
Así que un paquete es algo que agrupa módulos que pertenecen juntos.
Cuando hablo de módulo, no estoy implicando módulo angular,
no estoy implicando módulo JavaScript.
Como dije y Webpack, cada archivo se crea como un módulo.
Y así agrupa esos módulos,
que deben ser servidos al cliente en una sola respuesta a una solicitud.
Así que el paquete web en sí mismo toma una decisión sobre decir qué partes
deben unirse en un paquete.
Y debe entregarse juntos para que la representación de su aplicación web
se realice de la manera más efectiva.
Ahora, Angular CLI ya ha construido su configuración de la mejor manera de empaquetar
los activos angulares, de modo que se entrega más convenientemente al navegador.
Así que no necesitamos preocuparnos por cómo hacerlo nosotros mismos,
lo dejaremos a la lógica angular CLI para encargarse de toda esa configuración de
cómo ese paquete construye sus paquetes en nuestro nombre.
Así que lo que Webpack hace es que comienza en el nivel más alto.
En su aplicación Angular, el nivel superior es index.html y main.js archivos,
como hemos aprendido en la primera lección de este curso.
Así que comienza allí, y luego sigue todas las entradas
que usas en los que están en el camino y
trae una organización jerárquica de todas las partes.
Entonces, lo que se llama un gráfico de dependencia es construido por webpack.
Ahora usando este gráfico de dependencia, Webpack luego decide cómo
empaquetar sus paquetes y que las imágenes de uno o más paquetes ya que tienen
sentido para su aplicación particular que el paquete web es paquete.
Y en el proceso de hacerlo, cuando está manejando archivos que no son JavaScript,
como CSS, HTML y un SAS o Images, etc.
Luego utiliza plugins que le permiten pre-procesar y
modificar esos archivos, aquellos archivos que no son JavaScript,
de una manera que puedan ser incluidos en sus paquetes de paquete web.
Si está usando webpack desde cero,
entonces describiría parte de la configuración para que su webpack funcione.
En estos archivos en un archivo llamado
webpack.config.js que incluimos en la carpeta raíz de su aplicación.
En nuestro caso, ya que estamos confiando en Angular CLI para hacer esto en nuestro nombre
Angular CLI hace clic automáticamente aquí en la construcción de la configuración para
webpack para trabajar con.
Ahora cuando hablamos de webpack, hay cuatro conceptos que son importantes para
nosotros para entender cómo funciona webpack en las fotos.
La primera es la entrada.
La entrada es el punto en el que el paquete web debe comenzar y
seguir hacia abajo para construir el gráfico de dependencia.
Entonces, el archivo main.ts, por ejemplo, es un punto de entrada.
Así que el paquete web puede comenzar su persecución en la construcción del gráfico de dependencia.
Justo en main.ts y luego ir persiguiendo todas las declaraciones de importación desde allí
a sus otros archivos y luego desde allí importan esos archivos y
así sucesivamente hasta que construye el gráfico de dependencia.
Ahora, la segunda parte es lo que llamaríamos como la salida.
En el paquete web, la salida es el conjunto de paquetes que el paquete web prepara
en su nombre.
El tercero es cargadores.
Ahora webpack como dije solo entiende JavaScript y
solo sabe cómo trabajar con JavaScript.
Pero como también mencioné, el paquete web trata cada archivo como un módulo.
Así que esos archivos que no son JavaScript tienen que ser
transformados y luego puestos en sus paquetes usando
transformaciones apropiadas y luego se agregarán a su gráfico de dependencia.
Aquí es donde entra el uso de los diversos plugins.
¿Qué te ayudan los plugins a hacer?
Los plugins te ayudan a realizar las diversas acciones y funcionalidades personalizadas
o compilaciones que necesitas hacer para construir tus paquetes.
Así que te ayudará a transformar tu CSS en una manera que pueda
paquete en tus paquetes de JavaScript, y así sucesivamente.
Así que esa es una introducción rápida a cómo funciona webpack en realidad.
Ahora con esa rápida introducción, en el próximo ejercicio verá
que convenientemente haremos uso de un comando llamado ng
build para construir nuestra carpeta de distribución para nuestra aplicación Angular.La compilación
Ng le permite incluso construir una versión de desarrollo o versión de producción
de su aplicación Angular.
Cuando usamos ng surf,
la CLI angular estaba haciendo uso de webpack para empacar cosas.
Así que si retrocedes y
mira todas las cosas que se estaban imprimiendo en la ventana de tu terminal,
comenzarás a ver el webpack trabajando entre bambalinas para hacer los paquetes.
Ahora, en el próximo ejercicio, construirá su carpeta de distribución,
que luego se puede copiar en su sitio web y luego implementar su aplicación Angular.
Ahora ya he hecho una compilación
de la aplicación Angular que hemos construido hasta ahora.
Así que, vamos a echar un vistazo rápido a la carpeta de distribución para ver lo que hay en
allí antes de que realmente haga el ejercicio.
Así que una vez que complete el ejercicio, le aconsejaría encarecidamente que vaya y
mire la carpeta de disco que se creó en su carpeta de proyecto de aplicaciones angulares.
Y luego mira y mira exactamente los archivos que te voy a mostrar ahora mismo.
Justo en la carpeta de distribución.
Al ir a nuestra aplicación Angular en Visual Studio aquí,
ve que ahora estoy abriendo la carpeta de distribución.
Y dentro de la carpeta de distribución verá un montón de archivos aquí.
Verá un archivo llamado main una cadena larga donde
.bundle.js por su conocimiento de Gulp y Grunt del curso anterior,
comenzará a ver lo que significa esa cadena larga intermedia.
Así es como agrega ese versionado a su aplicación.
Del mismo modo, verá otro archivo llamado styles.something.css.
Entonces verá un vendor.bundle.js.
Y luego polyfills.js.
Entonces tienes un archivo index.html, y
te estás preguntando qué pasó con todo tu código HTML.
Está en uno de esos paquetes, vale.
Así que todas las plantillas que has escrito están en uno de esos paquetes,
excepto la página index.html.
Necesita la página index.html explícitamente porque
cuando un usuario escribe la URL de
su sitio web en la barra de direcciones del navegador.
Entonces aterrizarías en tu sitio web y
las páginas HTML de punto índice donde comienzas todo y
necesitas eso para arrancar tu aplicación Angular, por lo que es por eso que eso está ahí.
Y luego también se ven los archivos fontawesome allí que son necesarios y
que dentro del activo se ven algunas imágenes allí, en la carpeta de activos.
Así que echando un vistazo rápido al archivo principal, verá que esto es
como puede ver es un conjunto concatenado de muchos archivos comprimidos.
Ahora, si intentas leer eso, no va a ser fácil,
es un archivo enorme con muchas cosas.
Esto también incluye todo el código de marcos angulares,
una mano su código que ha escrito.
Y el código que viene de Material Angular, Flex Layout y
todas las demás cosas que incluiste con tu aplicación Angular.
Del mismo modo, tiene polyfills y luego estilos y
comienza a ver que todas las cosas que usa dentro de su aplicación Angular
se han agrupado en estos archivos allí.
Así que con esto espero que tengas una visión general rápida del paquete web.
Ahora es el momento de que vayamos al ejercicio, donde simplemente haremos uso del comando
angular CLI ng build para construir esta carpeta de distribución.
Y verá cómo puede implementar su aplicación Angular en un sitio web.
Justo después de completar la compilación.
[MÚSICA]