Primeros pasos con Babel y Webpack
Hace poco empecé un nuevo proyecto que requiere desarrollo front-end “puro”, sin ningún framework Javascript moderno. Uno de los mayores desafíos que se nos presenta es que el despliegue se tiene que realizar en dispositivos antiguos que no soportan las últimas tecnologías web.
Otro de los problemas que tenemos es que a medida que aumente la complejidad, aumentarán las dependencias, tanto de recursos como de lógica de aplicación. En el caso de nuestro proyecto, que utiliza predominantemente Javascript, las dependencias se manejan mediante módulos que importan otros módulos.
import express from “express”; //CommonJSconst express = require(“express”); //ES6
Esto puede provocar potenciales errores al manejar una gran cantidad de dependencias y recursos, ya sea en la importación como en código sin utilidad.
Es por ello que decidimos implementar dos herramientas bastante populares, un compilador como Babel para convertir nuestro código a una versión compatible y un “empaquetador” como Webpack que aúna todo nuestro código y lo optimiza. Vamos a ver como funcionan.
Webpack
Como acabo de decir, Webpack es un empaquetador o bundler. ¿Qué significa esto?. Pues que Webpack va a coger todos los archivos de tu proyecto como son los ficheros javascript, de css, imágenes, gifs… Y los agrupará en un único archivo que contendrá toda la lógica y los recursos de nuestro proyecto.
Ahora la siguiente pregunta que tenemos que hacernos es, ¿para qué quiero yo hacer esto?. Bueno, pues si dedicamos un momento a implementar Webpack en nuestro proyecto podemos beneficiarnos de los siguiente:
- Eliminación de recursos innecesarios: Webpack solo agrupará los recursos que estemos utilizando en nuestro proyecto, tanto imágenes como CSS, cargando en nuestra app los elementos esenciales.
- Control del procesamiento de los recursos: Podemos controlar por ejemplo que las imágenes se codifiquen en base64, convertir archivos sass en CSS vanilla, minimizar el HTML…
- Despliegue a producción estable: Es imposible desplegar el proyecto si faltan estilos, scripts o imágenes, ya que el propio Webpack controla el grafo de dependencias.
- Optimización del proyecto: Desde Webpack 4 tenemos un modo de producción que tiene como objetivo minimizar el tamaño del paquete, optimizar el código en tiempo de ejecución, impedir la exposición de código fuente o rutas y facilidad en el acceso a recursos.
Pese a todas estas ventajas, también tiene sus inconvenientes, siendo el más importante la alta curva de aprendizaje que tiene la herramienta. Es por ello que existen otros proyectos como Parcel o Rollup más sencillos de usar pero en mi opinión no tan versátiles.
Babel
En segundo lugar tenemos Babel, que se puede usar como una extensión de Webpack para compilar código ECMAScript 2015+ (Javascript) en versiones compatibles que soporten navegadores antiguos.
Esto es muy útil ya que no todos los navegadores renderizan igual el código y hay todavía muchos dispositivos en uso no compatibles con Javascript moderno.
Así, podremos hacer uso de las sintaxis modernas que nos ofrece Javascript actualmente.
// ES6 syntax
import axios from 'axios';axios.get(`https://example.com`)
.then(res => {
const persons = res.data;
console.log(persons);
});
Y cuando tengamos preparado el proyecto solo tendremos que compilarlo con Babel
// ECMAScript"use strict";var _axios = _interopRequireDefault(require("axios"));function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }_axios.default.get("https://example.com").then(function (res) {
var persons = res.data;
console.log(persons);
});
Como podemos ver cambia mucho la sintaxis, si queréis probar el compilador online, Babel tiene una instancia creada.
Ejemplo
Para ver el resultado final, adjunto un ejemplo en Github de un Template que preparé con todo lo necesario para crear una página web y luego deplegarla en un contendor. En el README.md podréis encontrar las instrucciones para empezar a usarlo.
Voy a mencionar algunos de los ficheros y directorios más importantes para un aterrizaje a los primerizos con esta tecnología.
- webpack.config.js: Es el fichero de configuración de Webpack, aquí elegiremos como empaquetar los distintos ficheros del proyecto, añadiremos plugins para manejar las dependencias de CSS y HTML y elegiremos como tratar los recursos gráficos.
- package.json: Cualquiera que conozca node ya sabe como funciona su archivo de configuración. Manejará las librerías que se encuentran en la carpeta node_modules, así como otros metadatos del proyecto.
- docker-compose.yml: Archivo de composición de contenedores de Docker, para más información, consultar la página oficial de Docker.
- deploy.sh: Script propio para crear un fichero de despliegue con los archivos esenciales.
- .eslintrc.json: Linter del proyecto, indica como activar las sugerencias de estilo y warnings.
- .babelrc: Fichero de configuración de Babel.
Este proyecto está destinado a ser un template, os animo a modificarlo para adaptarlo a vuestras necesidades. Por ejemplo he hecho otro proyecto en base a éste que funciona con archivos Typescript.
