Transpiling de ECMAScript 6 a 5, Uglify y ESLint con Gulp

Publicado por pico.dev el , actualizado el .
blog-stack javascript planeta-codigo programacion
Comentarios

JavaScript

Este artículo es una combinación de varias cosas que forman el actual estado del arte en JavaScript. Gulp como ejecutor de tareas, traducción o transpiling de ECMAScript 6 a ECMAcript 5 con Babel, Uglify como minificador y ofuscador de código y ESLint como verificador del código.

Dos de los navegadores web más importantes como Chrome y Firefox ya soportan gran parte de la especificación de ECMAScript 6 que añade nuevas funcionalidades al lenguaje JavaScript que comento en Introducción al JavaScript de ECMAScript 6. Sin embargo, hasta que prácticamente toda la totalidad de dispositivos soporten ECMAScript 6, formada por la diversidad actual de dispositivos en las que se incluyen los dispositivos móviles es necesario traducir el código JavaScript a la especificación ECMAScript 5. Haciendo esta traducción podemos usar ES6 y al mismo tiempo soportar todos los dispositivos. Hacer transpiling es necesario si el código será accedido desde internet de forma pública para cualquiera y queremos usar las nuevas características de ECMAScript 6. Si se tratase de una aplicación en un entorno controlado de uso interno en el que se usasen los navegadores que soporten ES6 el transpiling no sería imprescindible.

El tamaño de una página afecta al tiempo de carga de la misma, dada las velocidades de incluso los dispositivos móviles la velocidad ya no es tan importante como cuando el ancho de banda era significativamente menor y ahora importa más la latencia que el protocolo HTTP/2 trata de mejorar. En cualquier caso tanto comprimir con gzip el contenido devuelto por el servidor como minificar se consigue la mayor reducción en el tamaño de una página.

Minificar el código y ofuscarlo hace que depurar sea más complicado al no tener el código fuente original. Para que los depuradores tengan la información de los nombres originales al minificar se pueden generar archivos .map que los contengan y que los depuradores obtienen y usan cuando es necesario.

ESLint es un verificador estático de código que nos informará de aquellas reglas que se no se respetan según las normas de estilos que definamos. En ESLint hay cantidad de reglas que podemos aplicar al código y personalizar según nuestras preferencias, por ejemplo, requerir que las cadenas de texto se usen mediante comillas simples o que las llaves de bloques de código estén en la misma linea que la expresión if, else, while, etc.

Gulp define las tareas de un proyecto en un archivo de nombre gulpfile.js que usando gulp-balbel, eslint, gulp-uglify y gulp-sourcemaps obtenemos todas las funcionalidades anteriores. Con Gulp los archivos son transformados en varios pasos y finalmente enviados a un directorio destino del sistema de archivos.

Para usar Gulp deberemos tener instalado npm que en Arch Linux sería instalar su paquete:

Instalar Gulp a nivel global en el sistema:

Y finalmente instalar en el proyecto las dependencias definidas en el archivo package.json:

El archivo JavaScript original con ECMAScript 6 es el siguiente.

Transformado a ECMAScript 5 queda lo siguiente.

Estos son los archivos de configuración para ESLint donde indicaremos las reglas que queremos aplicar al código JavaScript y la configuración para Babel donde indicamos a que versión de JavaScript haremos la transformación.

Transformado con Uglify queda algo ilegible pero con el archivo .map podremos depurar en el navegador mostrándose los nombres de las variables originales.

El código fuente completo del ejemplo puedes descargarlo del repositorio de ejemplos de Blog Bitix alojado en GitHub y probarlo en tu equipo ejecutando el comando npm install && gulp && node ./build/dist/main.js.

El resultado son los siguientes mensajes en la terminal tanto para la ejecución del archivo ECMAScript 6 original con node src/main/js/main.js como para el transpilado con node ./build/dist/main.js.