f

Continuamos con el análisis sobre el proceso detrás de nuestros empaquetados, puedes leer la parte 1 aquí.

Las aplicaciones frontend SPA son más que JavaScript. Necesitamos un archivo HTML para ofrecer una buena lectura al usuario, también debemos recurrir al uso de archivos multimedia, tipografía y hojas de estilo.

Por defecto, los empaquetadores no tienen idea de como procesar este tipo de archivos, pues estos solo comprenden módulos JavaScript, la forma para utilizar elementos diferentes al lenguaje es a través de extensiones instalables que realicen la función de puente que permitan “traducir” esos recursos a código JavaScript.

DISCLAIMER: Los ejemplos que utilizaremos en esta serie de blogs están construidos utilizando Webpack y rollup, no se garantiza resultados idénticos con otros empaquetadores.

Importaciones en un módulo JavaScript

Dos de las cuatro importaciones sobre el módulo, no son módulos JavaScript. Tomando como referencia el árbol de módulos explicado en la primera parte del blog, tendríamos el siguiente esquema.

Error en la resolución de módulos con extensión desconocida.

Al importar archivos que no son módulos de JavaScript, el empaquetador arrojará error.

Error al importar un archivo CSS en rollup.
Error al importar un archivo CSS en Webpack.

Cada uno de ellos ofrece una forma de solucionar distinta (Webpack funciona a base de loaders y/o plug-ins y rollup solo con plug-ins) pero con el mismo propósito, aplicar un puente para poder leer el archivo y así ser interpretado como módulo JavaScript.

Las dependencias necesarias para realizar estos ejercicios están explícitas en las imágenes de las configuraciones respectivas. Para conocer más acerca de los loaders para Webpack puedes leer aquí, así mismo, para conocer más sobre los plug-ins aplicables para rollup puedes leer aquí.

Dependencias a usar durante todo el ejercicio.

Agregando soporte para hojas de estilos.

Configuración de Webpack para soportar archivos cuya extensión sea CSS.
Configuración de rollup para soportar archivos CSS (este plug-in también permite el uso de preprocesadores Sass y Less).

Ambas implementaciones arrojan el mismo resultado. Procesar el archivo CSS como cadena de texto, crear una etiqueta <stile> y engancharla a la cabecera del documento HTML (o al cuerpo si modifican los valores por defecto).

Función inyectada  por rollup al bundle para enganchar el CSS al DOM.

Agregando soporte para archivos

Para archivos como las imágenes se realiza el mismo procedimiento, pero dependiendo de la necesidad, las imágenes y demás archivos se pueden incluir al bundle de dos maneras: como URL relativa o como base64.

Como URL

El tratamiento que recibe el archivo objetivo es la reubicación de este a la carpeta del resultado del empaquetado y el renombramiento por un hash aleatorio (o personalizado si se modifican los valores por defecto).
En donde fue importado el archivo, solo se le entregará una cadena de texto que contiene la URL a la que deberá apuntar.

Tratamiento como URL en rollup

Configuración para importar imágenes como URL en rollup

Configuración para importar imágenes como URL en Webpack

Como base64

De esta forma, realiza la conversión del archivo a URL de tipo base64, donde el archivo hará parte del código, incrementando así el tamaño del bundle JavaScript.

Tratamiento como base64.
Configuración para importar imágenes como base64 en rollup

Configuración para importar imágenes como URL base64 en Webpack.

Con estas configuraciones, ¡ya nuestro empaquetador puede resolver correctamente los archivos que requerimos al inicio!

Módulos con resolución satisfactoria.

¿Qué nos falta? Un archivo HTML donde sea incluido nuestro bundle JavaScript, basta con un plug-in para ello. Este sería nuestra configuración final para cada uno de los empaquetadores:

Configuración final para Webpack.

Configuracióninal para rollup.

Para tener un código listo en producción debemos tener en cuenta otros complementos como la minificación y compresión, transpilación para añadir soporte a diferentes versiones de navegadores y utilizar JavaScript de última generación.

Así finalizamos nuestro blog, a partir de aquí debes complementar los temas expuestos de manera general a más profundidad directamente desde la documentación de las herramientas y experimentando por cuenta propia.

¡Recuerden que nunca debemos parar de aprender!

William de Jesus Santos

William de Jesus Santos

Es egresado de la Universidad de Pamplona, programa desde los 14 años y desde el 2018 labora profesionalmente en casas de desarrollo. El enfoque que le ha dado a su carrera ha sido hacia las tecnologías basadas en Javascript.

Déjanos tu comentario