Node.js, NPM, Yarn, NVM, Webpack, Babel…

Temario

• Introducción
• Node
• NPM
• Yarn
• NVM
• Webpack
• Babel
• Todos juntos

i. Introducción

Actualmente crear aplicaciones web (react, angular, etc) es muy común utilizar las herramientas/tecnologías como Node, NPM, NVM, Yarn, Webpack, etc. Seamos honestos, la mayoría de los desarrolladores no tiene idea de qué significa cada una de estas tecnologías mencionadas, y estoy casi seguro, que lo hacen porque siguieron algún tutorial o en el trabajo les dijeron “instalate node y despues ejecutas el comando npm …”… así que el propósito de esta story es explicar para qué sirven, cómo funcionan y porqué son importantes en la creación de aplicaciones web.

ii. Node.js [ref]

Un poco de historia: Fue escrito por Ryan Dhl [ref] en el 2009, y surgió debido a las limitaciones que presentaba el servidor Apache HTTP Server [ref]. En el 2010 se agregó un administrador de paquetes llamado NPM (en el siguiente capítulo hablamos más a fondo). En un principio fue creado solo para Linux y Mac, y fue hasta el 2011 que Microsoft en conjunto con Joyent[ref] lanzaron la versión para Windows. Y como en toda buena novela, el fundador empieza a tener diferencias con el equipo, donde, en el 2012 decide salir y ceder a otro la batuta; el conflicto continuó ya sin su autor al grado que en el 2014 algunos desarrolladores crearon io.js como una alternativa a Node, argumentando descontento con la empresa Joyent, en el 2015 io.js y Node limaron asperezas, entonces, deciden fusionarse con el nombre de Node.js[ref] creando la versión 4.0.0, lo cual trajo el motor V8 y el estándar ES6 de JavaScript[ref]. En el 2018 Ryan decide sacar su alternativa de Node.js, llamada Deno [ref] basada en TypeScript[ref] y escrito en Rust[ref], mejorando las deficiencias percibidas por él de Node.

Node.js es un entorno de tiempo de ejecución de JavaScript [ref]

Recordemos un poco como funciona JavaScript (Cómo funciona el JavaScript Runtime Environment [ref]):

Hasta este momento solo hemos mencionado que JavaScript se puede ejecutar dentro de un navegador.

Node.js nace con la idea de poder ejecutar JavaScript más allá de un navegador, más concreto, en nuestra máquina como una aplicación independiente, esto quiere decir, que podemos extenderlo más allá de una simple aplicación web.

Node.js va a tener todo lo necesario para ejecutar un programa escrito en JavaScript… ¿Recuerdan cuando hablamos de los motores de JavaScript?[ref], donde mencionamos el motor V8, así es, Node.js es construido y ejecutado con el motor V8, entonces, nos da la gran ventaja de que al ser convertido a un código de bajo nivel, la máquina podrá ejecutarlo sin necesidad de interpretarlo.

Node.js es tan poderoso, que en su entorno de tiempo de ejecución de JS, va a construir y ejecutar una aplicación de manera independiente, utilizando la arquitectura dirigida por eventos [ref], en conjunto con el modelo E/S asíncrona [ref], y con el objetivo de optimizar el rendimiento y la escalabilidad de las aplicaciones, donde, nos va a permitir tener muchas operaciones E/S en tiempo real (puede ser desde un simple chat o quizás un videojuego multijugador en tiempo real)…

La arquitectura dirigida por eventos (EDA) es un paradigma de arquitectura de software que promueve la producción, detección, consumo y reacción a eventos .[ref]

El modelo E/S asíncrona o no secuencial es una forma de procesamiento de entrada/salida que permite que continúe otro procesamiento antes de que la transmisión haya finalizado.

Importante: Para instalar Node.js debemos ir a la página oficial[ref] e instalar la versión de acuerdo a nuestro sistema operativo.

iii. NPM [ref]

Antes de que existieran los administradores de paquetes, los “paquetes” y dependencias se almacenaban de forma manual o por medio de un CDN, pero conforme se fueron creando aplicaciones web más complejas y robustas, surge la necesidad de automatizar o simplificar este proceso, y así, es como nacen los administradores de paquetes…

Un poco de historia: NPM (Node Package Manager)[ref], fue creado por Isaac Z. Schlueter, escrito al 100% con JavaScript, desde el 2010 a la fecha (2020) sigue siendo el administrador/gestor de paquetes por default de Node.js.

Un administrador de paquetes es una colección de herramientas de software, que se va a encargar de automatizar el proceso de instalación, actualización, configuración y eliminación de programas de manera consistente.

Esto quiere decir que NPM es una herramienta de línea de comandos para la instalación de paquetes, y además la administración de versiones y de dependencias de los paquetes Node.js.

Todas las dependencias se manejan dentro de un archivo llamado package.json, que puede ser creado de manera sencilla en la línea de comandos usando CLI

CLI (command-line interface): Es una interfaz de línea de comandos, que procesa comandos a un programa de computadora en forma de líneas de texto. El programa que maneja la interfaz se llama intérprete de línea de comandos o procesador de línea de comandos

Un ejemplo de cómo queda el archivo package.json:

Si quieres saber como configurar, y crear de manera óptima y segura el archivo, te invito a que revises la documentación: npm-init[ref] y package.json[ref] o con el comando npm help json

NPM tiene una biblioteca de paquetes gigantesca (creada mayormente por la comunidad, así es… desarrolladores como tú y como yo, y también por empresas como Facebook o Google), donde podemos usarlas en nuestras aplicaciones, con la GRAN ventaja de que el desarrollo va a ser más mucho más rápido y eficiente.

Una de las grandes desventajas que se tiene al usar NPM (y se debe tener cuidado), es que todas las dependencias las instala dentro de la carpeta node_modules pero de manera no determinista, esto quiere decir que según el orden en que se instalen las dependencias, la estructura de node_modules puede variar a la de otro desarrollador (y esas diferencias es cuando decimos, “pero en mi maquina si funciona”)

Importante: Debemos tener instalado Node.js[ref] para poder usar NPM

iv. Yarn [ref]

Un poco de historia: En el año 2016 nace un nuevo administrador de paquetes de código abierto impulsado por Facebook en colaboración con Google, Exponent y Tilde [ref], debido a las limitantes que se tienen con proyectos muy grandes en NPM (velocidad), así como la forma en que ejecuta código de manera automática algunas dependencias (seguridad). Antes de crear Yarn, Facebook siguiendo las buenas prácticas intentó escalar NPM, algunos ejemplos que ellos mencionan son:

• Ejecutar manualmente npm install, pero fallaba en los entornos de integración continua.
• Registrar el node_modules en su repositorio, pero el control de las dependencias se volvía un dolor de cabeza.
• Crear un repositorio interno (CDN) con lo necesario de node_modules, pero necesitaban acceso a internet para extraer código y construirlo.

Al comentarlo con la comunidad, se dieron cuenta que había muchos desarrolladores que tenían el mismo problema, entonces fue cuando decidieron unir fuerzas y crear Yarn.

Aunque Yarn es un nuevo administrador de paquetes, cuenta con la ventaja de ser compatible con el registro NPM, esto quiere decir que tiene el mismo conjunto de características que los flujos de trabajo existentes, solo que con la ventaja de que opera más rápido, más seguro y más confiable.

Mencionamos que uno de los grandes problemas que tenía NPM es la forma de descargar las dependencias (control de versiones), Yarn resuelve este problema haciendo la instalación de manera determinista ,creando un archivo yarn.lock, que es donde almacena todas las versiones exactas de cada uno de los paquetes de manera concisa y ordenada, garantizando que cada instalación de como resultado la misma estructura de archivos en la carpeta node_modules en todas las máquinas.

Otra ventaja que se tiene al usar Yarn, es que primero busca en un directorio de caché global, si ya tenemos el paquete, no será necesario descargarlo, por lo que nos va a permitir instalaciones completas sin conexión.

Importante: Para poder usarlo, es necesario tener instalado Node.js, y desde la línea de comandos ejecutamos el siguiente código: npm install -g yarn

Nota: La -g es para indicarle que debe instalarlo de manera global, esto quiere decir que solo va a ser una sola vez, en caso de que no se indique, en la carpeta donde nos encontremos va a descargar el paquete.

Entonces, Yarn nos ayuda a automatizar el proceso de instalación, actualización, configuración y eliminación de paquetes NPM.

v. NVM [ref]

NVM (Node Version Manager) es una secuencia de comandos bash simple para administrar múltiples versiones activas de node.js

Cuando empiezas a desarrollar aplicaciones web con AngularJs, Angular 2+, ReactJs, React Native, Vue, etc… llega un momento donde cada uno necesita una versión específica de node (ej.. AngularJS se ejecuta con versión 9 y React con la versión 10 o superior para aprovechar todo lo que ES6 nos dá) y cambiar entre entornos para un desarrollo local puede llegar a ser un dolor de cabeza… y así es como surgió la herramienta NVM, que como su nombre lo indica es un administrador de versiones de Node, pero… ¿Qué significa eso?, básicamente podemos:

• Tener todas las versiones de Node.js (LTS)
• Descargar y cambiar entre cada una de las versiones de node.js de manera simple y rápida (desde línea de comandos), configuración de alias para cada una de las versiones y sea aún más fácil cambiar.
• Podemos seleccionar una versión específica para que sea la de default a nivel global, como en nuestro proyecto (ejecutar en nuestro proyecto la línea de comando node -v > .nvmrc), donde nos va a crear un archivo llamado .nvmrc, con la versión de node que estemos usando en ese momento[ref])

Para instalar NVM, podemos ver la documentación [ref], en caso de usar windows, revisar las siguientes ligas [ref] [ref] [ref].

vi. Webpack[ref]

Webpack es un paquete de módulos para aplicaciones de JavaScript.

Esto quiere decir que Webpack va a tomar un buen de archivos diferentes (js, sass, png, jpg, etc…) y los va a agrupar por tipo en un solo paquete, de hecho la imagen de la página oficial lo dice todo…

Antes de que existieran los empaquetadores de módulos, los archivos de JavaScript (ES5 e inferiores), se tenía un archivo HTML, donde se insertaba cada uno de los JS que íbamos a ocupar <script>, donde se volvía un dolor de cabeza cuando no cerrábamos las etiquetas en cada uno de los archivos (rompía toda la aplicación), también, había que preocuparse de programar para todos los navegadores, donde, teníamos una gran cantidad de código extra llamado polyfills que nos aseguraban que cualquier navegador pudiera interpretar nuestro código. Inclusive cuando utilizabamos SASS [ref] en algún proyecto y sufría cambios, debíamos de compilar el archivo para que lo convirtiera a CSS y así poder agregar a nuestro proyecto, ahora imaginate con con las imágenes y librerías de terceros, esto se volvía inmantenible.

Después evolucionó a los corredores de tareas (Ej. Gulp[ref]), básicamente estos se encargan de preprocesar o transpilar los archivos de origen a una de salida, pero dejando al desarrollador de juntar todas esas piezas de la mejor manera…no esta mal, pero en proyectos grandes o en simpleza puede llegar a ser complicado manejarlo…

Entonces, surgió webpack, que como tal no es perfecto, pero nos ayuda a automatizar el proceso de desarrollo (mediante configuraciones), pero todo mediante JavaScript; con webpack podemos escribir código por módulos estáticos y empaquetarlos en uno o más paquetes de manera sencilla y segura, y no solo código JS, también CSS, HTML, etc…

Webpack utiliza estos conceptos:

• Cargadores (loaders) [ref]— Por si solo Webpack solo sabe JavaScript, por lo que los cargadores, nos van a permitir manejar todo tipo de archivos (TS, CSS, HTML, etc), donde le van a ayudar a webpack a compilar/transformar determinado recurso, y así poderlos agrupar de manera adecuada.
• Complementos (plugins)[ref] — Se utilizan para generar tareas que los loaders no pueden realizar, por ejemplo: la minificación de archivos, cambiar/agregar rutas en archivos CSS, soporte para i18n, etc…
• Modo (mode) — Nos da la oportunidad de compilar nuestro proyecto en modo development (Para poder depurar nuestra aplicación) o production (minifica, concatena y emite errores durante la compilación)

Más adelante veremos un ejemplo bastante sencillo…

vii. Babel[ref]

Babel es un transpilador[ref] JS que convierte el nuevo código JS [ES6+] en código de JS compatible con versiones anteriores (polyfills).

Cuando utilizamos Webpack, este crea archivos estáticos de cada uno de ellos, luego Babel los vuelve a compilar en archivos JS estándar para que cada navegador sin necesidad de soportar todas las fuciones de ES6+ y pueda implementarlo sin problemas (Ejemplo: Cuando usamos JSX, Babel lo convierte a JavaScript).

Así como NPM, WebPack, etc. Babel también tiene un archivo de configuración llamado .babelrc, donde va a tener todo lo necesario para que compile nuestros archivos JS.

Veamos un ejemplo en JavaScript ES6, y cómo lo vuelve compatible Babel:

viii. Todo junto

Proyecto: Puedes descargar el proyecto completo en Github[aquí].

Ahora que ya entendemos los conceptos Node.js, NPM, Yarn, NVM, Webpack y Babel, vamos a crear un proyecto desde cero usando Node.js, Yarn, Webpack. Así que empecemos!!!…

Importante: los pasos y comandos son exactamente los mismos en Mac, Linux y Windows

a — Crearemos una carpeta, para nuestro ejemplo: my-first-webpack.

b — Dentro de la carpeta vamos a crear nuestro archivo package.json, entonces, abrimos nuestra consola y ejecutamos:

Lo que hará el comando es generar un archivo package.json por default

Nota: Con la instrucción -y generamos un archivo package.json, con los parámetros por default (no es recomendable hacerlo, pero se hizo así para agilizar el ejemplo).

c — Ahora vamos a instalar Webpack, para esto necesitamos instalar los siguientes paquetes (ejecutar en consola):

Es el paquete de módulos oficial, el que nos va a servir para agrupar archivos JavaScript ya sea en un archivo único o en varios,

El paquete webpack tiene algunas limitantes en comandos, por lo que es necesario instalar webpack CLI, ya que este, nos va a proporcionar más comandos para configurar nuestro proyecto de manera más rápida, sencilla y personalizable. Desde la versión 4 de webpack ya no es necesario tener un archivo de configuración, pero nosotros vamos a usar una configuración personalizada, webpack CLI nos permite crear y mejorar dicha configuración.

Para levantar un servidor y poder ver nuestra aplicación web en nuestro navegador.

Nota: La instrucción -D, es para indicar que es una dependencia para nuestra aplicación pero de manera local, esto quiere decir que lo que instalemos con esa instrucción no va a ir a producción.

Hasta aquí no hemos hecho nada complicado (solo ejecutar comandos) de hecho podemos observar que se han creado dos archivos: package.json y yarn.lock, así como la carpeta node_modules con un buen de carpetas (son los paquetes de webpack que acabamos de instalar)

d — Ahora vamos a crear el archivo de configuración de webpack webpack.config.js en la raíz de nuestro proyecto.

La configuración más básica es la siguiente (copiar y pegar el código en su archivo):

Donde:

• path — Es un módulo de Node.js que nos va a servir para poder trabajar con las rutas de nuestra aplicación.
• module.exports — Exportamos nuestro módulo, que necesita tres valores: modo (mode), entrada (entry) y salida (output).
• mode — Es para indicarle el modo development, con esto NO va a minificar el archivo de salida.
• entry — Es el archivo que webpack va a ejecutar para crear nuestro paquete (en este caso /src/index.js).
• output — Nombre del archivo (en este caso bundle.js) de paquete final y donde va a colocarlo (en este caso en /dist/)

Nota: Tenemos dos maneras de indicar nuestra ruta de carpetas/archivos: Con __dirname[ref] devuelve el nombre del directorio que contiene el archivo de código fuente, y con process.cwd()[ref] devuelve el directorio de trabajo actual, es decir, el directorio desde donde se invocó el comando.

e — Vamos a crear la carpeta src (en la raíz del proyecto) y dentro el archivo index.js (no olvidemos que es el archivo que le indicamos a webpack que debe ejecutar entry)

Y dentro de nuestro archivo index.js, vamos a poner nuestro Hello world!

f — El siguiente paso es indicarle a nuestro archivo de configuración package.json que cada vez que ejecutemos nuestro proyecto, debe abrir el archivo de configuración webpack.config.js

Entonces, nuestro archivo package.json, debe verse así:

Ahora en consola ejecutamos yarn start (el nombre de start es el que hemos definido en nuestro archivo de configuración package.json)

Al ejecutarse el comando, podemos observar que nos ha generado una nueva carpeta llamada dist, y dentro de ella un archivo llamado bundle.js

g — Sabemos que por sí solo webpack solo sirve para código en JavaScript, y que para poder usarlo con otro tipo de archivos, es necesario usar complementos (plugins)[ref]

Ahora lo que necesitamos es tener un archivo HTML donde podamos importar nuestro archivo dist/bundle.js, para eso vamos a utilizar el plugin HtmlWebpackPlugin[ref], entonces, descargamos el paquete:

yarn add html-webpack-plugin -D

No olvidar: La instrucción -D, es para indicar que es una dependencia para nuestra aplicación pero de manera local, esto quiere decir que lo que instalemos con esa instrucción no va a ir a producción.

Abrimos nuestro archivo de configuración webpack.config.js, y agregamos dos líneas de código:

Esta es la forma más básica de generar el archivo HTML, por lo que va encargar de crear un archivo HTML que va a servir para agregar los paquetes web.

Nuestro código completo debe verse de la siguiente manera:

Ahora hemos creado una nueva clave dentro de nuestro módulo llamada plugins, donde:

• Es una arreglo, donde cada elemento agregado va a ser un nuevo plugin (en nuestro ejemplo es HtmlWebpackPlugin) y si aplica, le mandamos parámetros.

Cuando ejecutamos en consola: yarn start

Podemos observar que dentro de la carpeta dist, nos genera un archivo llamado index.html y dentro, se encuentra importado nuestro archivo bundle.js

Ahora viene la pregunta del millón… ¿Cómo probamos que realmente funciona?…

h — Lo que necesitamos es ejecutar nuestra aplicación web (si intentas ejecutar directamente el archivo index.html, quizás, pueda funcionar de manera correcta, pero… esa no es la mejor práctica, recuerdan que al principio instalamos el paquete webpack-dev-server[ref], ha llegado el momento de usarlo, abrimos nuestro archivo webpack.config.js y agregamos las siguientes líneas:

Donde:

• contentBase — La ruta de nuestra carpeta que va a levantar el servidor.
• port — Puerto donde va a ejecutar el servidor

Nuestro archivo de configuración webpack.config.js, se debe ver así:

Ahora para levantar nuestra aplicación necesitamos ejecutar en consola lo siguiente: yarn webpack-dev-server

Si no nos ha arrojado algún error, podemos abrir en nuestro navegador http://localhost:8050/

Ahora, si hacemos algún cambio al index.js debemos ejecutar : yarn start y luego yarn webpack-dev-server… si te entiendo, suena a mucho trabajo… por fortuna podemos ahorrarnos un par de líneas y hacer que se ejecuten ambas líneas, así que, vamos al archivo de configuración package.json y en scripts, modifiquemos la siguiente línea:

Podemos observar que primero va a ejecutar el servidor, después va a compilar nuestra aplicación web y finalmente abrir http://localhost:8050/ en nuestro navegador.

El archivo de configuración package.json, debe verse así:

Nota: He creado dos scripts, uno llamado build (encargado de solo compilar la aplicación), y start (encargado de levantar el server y compilar la aplicación)

Ahora cuando ejecutemos en consola yarn start, va a levantar el servidor y después va a compilar la aplicación.

Genial!! ¿no?

Vamos a aumentar la complejidad a nuestra aplicación…

Imaginemos que ahora queremos que en nuestro archivo index.html tenga un div, y que muestre Hello world Webpack!!…

Uhm, espera… no tenemos ningún archivo estático index.html, el único que tenemos es el que se genera dinámicamente por medio del plugin HtmlWebpackPlugin, que no cunda el pánico, por suerte ese mismo plugin nos da la oportunidad de indicarle un template para que lo integre con el HTML dinámico, entonces primero, vamos a generar nuestro template:

Entonces creamos nuestro archivo index.html en la carpeta de dist

Ahora abrimos nuestro archivo de configuración webpack.config.js, y dónde está el plugin HtmlWebpackPlugin, le indicamos dónde va a estar nuestro template:

Ahora levantamos nuestro servidor (yarn start)…

Con esto, ya podemos agregar HTML desde nuestro archivo src/index.js, agregamos un poco de código…

Cuando visualizamos nuestra aplicación:

Ahora imaginemos que tenemos múltiples archivos HTML estáticos y queremos que formen uno solo (no me voy a meter en cosas dinámicas, ya que este no es el tema), para esto usaremos los cargadores (loaders)[ref], no olvidemos que van a ser los encargados de agrupar otros archivos estáticos, y estos son la clave para agruparlos.

Para nuestro ejemplo vamos a utilizar el html-loader[ref], en términos simples se va a encargar de exportar HTML como cadena, entonces, lo primero es ejecutar en consola el comando: yarn add html-loader -D

De acuerdo a la documentación, vamos a nuestro archivo de configuración webpack.config.js y agregamos una nueva clave:

Donde:

• module — Va a ser un arreglo de objetos por cada uno de los cargadores que usamos, en este caso hemos agregado el de html-loader
• test — El tipo de archivo que debe de leer (Dependiendo el loader es la extensión, para nuestro ejemplo usamos .html)
• loader — Es el nombre del cargador que va a ocupar (html-loader, file-loader, url-loader, etc)
• options — Parámetros opcionales (Dependiendo el loader que se este usando)
• options.interpolate — Para nuestro cargador (html-loader), vamos a ocupar esta propiedad, que se va a encargar de poder usar plantillas de ES6 en archivos HTML.

Nuestro archivo de configuración webpack.config.js, va a quedar de la siguiente manera:

El siguiente paso, dentro de la carpeta src vamos a crear una carpeta llamada components, donde vamos a tener todos los archivos HTML necesarios para nuestro ejemplo, la idea es convertir el siguiente ejemplo en archivos HTML:

Entonces:

• image.html — El HTML que va a tener el código necesario de la imagen.

• description.html — El HTML que va a tener el código de la biografía de nuestro artista.

• stats.html — El HTML que va a tener la información extra de nuestro artista.

• card.html — El HTML principal que va a contener los demás HTML.

En este último archivo podemos observar que hemos usado la sintaxis de ES6 ${JavaScript}, donde require(), es una función que va a cargar asíncronamente el archivo o módulo indicado.

Nuestro proyecto debe verse de la siguiente manera:

Y por último para verlo dentro de nuestra aplicación, en el archivo src/index.js, debemos importar nuestro archivo components/card.html e insertarlo en el HTML.

Cuando ejecutamos en la consola, debemos ver lo siguiente:

Excelente!, pero… ¿y los estilos?… así es… debemos de importar otro loader para eso, entonces vamos a ver como es…

Para nuestro ejemplo vamos a utilizar 4 cargadores:

• style-loader[ref] — Se va a encargar nodos de estilos a partir de cadenas en JavaScript
• css-loader[ref]— Va a traducir el CSS en CommonJS
• sass-loader[ref] — Se va a encargar de compilar de Sass a utilizando el loader node-sass
• node-sass[ref][ref] — Proporciona enlaces para Node.js a LibSass , la versión C del popular preprocesador de hojas de estilo, Sass.

Nota: Si no vas a usar Sass, solo basta instalar los dos primeros.

Entonces en consola ejecutamos el siguiente comando:

De acuerdo a la documentación, vamos a nuestro archivo de configuración webpack.config.js y agregamos una nueva clave:

Donde:

• module — Va a ser un arreglo de objetos por cada uno de los cargadores que usamos, en este caso hemos agregado para los estilos.
• test — El tipo de archivo que debe de leer (Dependiendo el loader es la extensión, para nuestro ejemplo usamos .sass y scss)
• use — Los componentes que necesitamos para los estilos, para este caso los cargadores se procesan en el orden inverso del arreglo, esto quiere decir que, sass-loader va cargar primero, luego css-loader y por último style-loader

Nuestro archivo de configuración webpack.config.js, va a quedar de la siguiente manera:

Dentro de la carpeta src, vamos a crear una carpeta que tendrá el nombre de styles, dentro de ella un archivo llamado card.scss, y finalmente agregamos el siguiente código:

Nota: En el caso de nuestro ejercicio he dejado todo los estilos en una sola hoja (lo cual es una “mala práctica para desarrollar”), lo ideal es aprovechar las bondades de los componentes y separar los archivos, para que cada uno de ellos importe lo necesario…

Nota 2: En el archivo no he usado el poder de Sass (ya que por ahora no es el tema, pero es bueno que sepas que se puede usar), pero si te interesa aprender, puedes comenzar con la documentación oficial[ref]

En nuestro archivo index.js, vamos a importar los estilos:

Y el resultado debe ser el siguiente:

Cuando revisamos el código, podemos observar que TODOS los estilos, los agrega de manera manual en el encabezado head del HTML:

Esto se debe por varias razones:

• Ahorrar una petición extra de un archivo a importar (esto puede parecer simple, pero en la carga es muy valioso)
• Otra razón de peso es eliminar el concepto de FOUC (Flash of unstyled content)[ref], cuándo una página se carga por un periodo breve se ve todo el contenido sin estilos, y cuando carga el/los archivo(s) de estilos es cuando ya se ve de manera correcta, ese pequeño destello es lo que evita, entonces desde el principio siempre va a mostrar de manera correcta nuestra aplicación web.

Cuando nosotros desarrollamos con código de +ES6, sabemos que NO todos los navegadores lo soportan, para eso llega al rescate Babel[ref], veamos cómo funciona,

Si queremos usar Babel en nuestro proyecto, es necesario agregar los loaders necesarios:

• babel-loader[ref] — Este paquete permite transpilar archivos JavaScript.
• @babel-core[ref]
• @babel-preset-env[ref] —Nos va a permitir desarrollar con las últimas ediciones de JavaScript, y solo transpilar (De acuerdo a los navegadores que vamos a usar)el código, haciendo más ligero los archivos de JS.

Nota: Desde la versión 7 de Babel, se le agrega @ a sus paquetes oficiales[ref]. y con ello poder diferenciar los que hace la comunidad a los propios de Babel.

Entonces, ejecutamos en consola:

De acuerdo a la documentación, vamos a nuestro archivo de configuración webpack.config.js y agregamos una nueva clave:

Donde:

• module — Va a ser un arreglo de objetos por cada uno de los cargadores que usamos, en este caso hemos agregado para los estilos.
• test — El tipo de archivo que debe de leer (Dependiendo el loader es la extensión, para nuestro ejemplo usamos .js)
• exclude — Carpetas que no queremos que revise.
• loader — Es el nombre del cargador que va a ocupar (babel-loader, html-loader, file-loader, url-loader, etc)
• options — Parámetros opcionales (Dependiendo el loader que se esté usando)
• options.presets — Preajustes que necesitamos para nuestra configuración, para nuestro ejemplo usamos el más básico[ref].

Nuestro archivo de configuración webpack.config.js, va a quedar de la siguiente manera:

Entonces cuando nosotros desarrollemos con ediciones +ES6:

Nuestro código será transpilado, para que funcione en navegadores que no soporten +ES6

Creo que hemos abarcado bastantes conceptos (algunos de manera básica), ahora podemos saber qué es Node.js, webpack, Babel, etc, y además sabemos cómo crear un proyecto desde cero con webpack…

Proyecto: Puedes descargar el proyecto completo en Github[aquí]

En la siguiente entrega vamos a ver React — Primeros pasos…

Bibliografía y links que te pueden interesar…

Node.js

Node.js

Command-line interface

What exactly is Node.js?

npm

Yarn

nvm-sh/nvm

NVM, the Easiest Way to Switch Node.js Environments on Your Machine in a Flash

Webpack 4 — The Complete Guide

Webpack - Behind the Scenes

Babel · The compiler for next generation JavaScript

Babel (transcompiler)

Understand basic Webpack from scratch

🚀 Using Webpack To Bootstrap A JS App (Webpack Dev Server)💎

Webpack 4 — The Complete Guide

What is @babel/preset-env and why do I need it?