Node.js / Babel

Bienvenidos sean a este post, hoy hablaremos sobre otro tema opcional.

Anteriormente en este post hablamos sobre como instalar nvm para manejar ciertos temas de manera practica, y en esa ocasion mencionamos que era de forma opcional pero hoy hablaremos sobre una herramienta que tambien es opcional pero que nos permite experimentar con caracteristicas de Javascript, este es habitualmente denominado como «transpilador» porque este re-escribe el codigo fuente de un lenguaje a otro, es como un compilador pero que convierte un codigo en otra forma en lugar de hacerlo en ejecutable, si bien esta herramienta convierte codigo Javascript en codigo Javascript y puede sonar a inutil si nos servira para convertirlo en versiones viejas de Javascript, es decir que podemos reconfigurarlo para convertir codigo con ES2015, ES2016, etc en codigo compatible con ES5, y teniendo en cuenta que esta version es compatible con absolutamente cualquier navegador en cualquier ordenador viejo permitiendo tener como una buena practica trabajar con el frontend con codigo moderno y luego convertirlo mediante babel para usarlo en navegadores viejos.

Si bien node.js soporta mas que bien todas las caracteristicas de ES2015, ES2016, etc y a su vez lo podemos usar tranquilamente en el codigo del lado del cliente, esto puede llevarno a concluir que no necesitariamos a babel pero puede suceder que necesitemos utilizar una version vieja de node.js y aqui si babel nos puede ser de ayuda, esto es principalmente por la diferencia de tiempo que puede surgir entre las nuevas caraccteristicas de ECMAScript y la capacidad de usarlas del lado del navegador, esto es debido a que no todos los navegadores se actualizan al mismo tiempo para implementarlos, ocasionando que algunos si los soporten y otros no, por esta razon es necesario familiarizarse con babel.

Antes de comenzar a ponerlo en practica veremos como instalar babel y para ello ejecutaremos el siguiente comando en una terminal:

$ npm install babel-cli

Este nos instalara el comando de la linea de comando, nuestro siguiente paso sera agregar dos herramientas para poder trabajar con nuestro codigo:

$ npm install babel-plugin-transform-es2015-modules-commonjs

Este se encarga de transformar modules ES2015 a CommonJS y una vez instalado instalen el siguiente:

$ npm install babel-plugin-transform-async-to-generator

Este sera para convertir las funciones asincronicas, pueden instalar todo junto simplemente pasando de la siguiente forma:

$ npm install babel-cli babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-async-to-generator

Anteriormente lo hice separado para detallar a cada uno pero un detalle que no mencione es que esto se debe hacer en el directorio donde estan los codigos que convertiremos, ahora si con esto podemos a pasar a trabajar con un ejemplo para ver a babel en accion, para ello vamos a tomar como base el codigo del archivo listar.js que vimos en este post, pero agregaremos un par de cosas mas y para ello crearemos en un directorio el archivo con el nombre de ls.js y le agregaremos el siguiente codigo:

ls.js

const fs = require("fs");

const fs_leerdir = dir => {
        return new Promise((resuelto,rechazo) => {
                fs.readdir(dir, (err, lista) => {
                        if (err) rechazo(err);
                        else resuelto(lista);
                });
        });
};

async function listar() {
        try {
                var dir=".";
                if (process.argv[2]) dir = process.argv[2];
                const archivos = await fs_leerdir(dir);
                for (let a of archivos)
                {
                        console.log(a);
                }
        } catch(err) { console.log(err); };
}

listar();

Primero definiremos un objeto donde estara fs para utilizar el acceso a nuestro filesystem, nuestro siguiente paso sera definir un objeto que sera el encargado de leer el directorio, en realidad devolvera una promesa donde informara si se puedo leer el directorio informado o no, observen que en el readdir tenemos dos valores, a parte del directorio a investigar, donde si ocurre un error (err) lo devuelve de lo contrario devuelve lo obtenido, la siguiente sera la funcion asincronica que se encarga de listar el contenido del directorio, tiene un try/catch en caso de haber un error, observen que primero definimos un valor predeterminado de directorio que es el actual, despues verifica si pasamos algun valor, en caso de ser verdadero reemplaza al valor de dir, lo siguiente es un objeto para obtener los archivos y aca usamos un await para leer el directorio, recuerden que este devuelve una promesa, y una vez obtenido mediante un bucle for mostraremos todo el contenido devuelto por este, por ultimo tenemos el catch que devuelve el error en caso de existir este, para finalmente hacer un llamado a esta funcion, con todo esto comentado veamos como trabaja

En el directorio donde crearon este archivo deben instalar a babel y los componentes antes mencionados, en caso de ya estar realizado nuestro siguiente paso sera crear en el mismo directorio del codigo un archivo con el nombre .babelrc, para que este oculto, y en este agregaremos el sigueinte codigo:

.babelrc

{
        "plugins": [
                "transform-es2015-modules-commonjs",
                "transform-async-to-generator"
        ]
}

En este basicamente especificamos los plug-in que usaremos, los que instalamos previamente, este sera el encargado de especificarle a babel con cual debe convertirlos, nuestro siguiente paso sera ejecutar a babel desde donde lo instalamos y con la siguiente sintaxis:

$ ./node_modules/.bin/babel archivo_origen -o archivo_destino

El primero punto es para indicar que desde el directorio actual vaya a node_modules pero como bin es invisible debemos ponerle el punto tambien, despues pasaremos el archivo a analizar, la opcion -o para especificar cual sera la salida y el nombre del archivo de destino, les paso el comando que yo use:

$ ./node_modules/.bin/babel 2/ls.js -o 2/ls-babel.js

Debido a que lo instale en otro directorio y para evitar inconvenientes con otros codigos al archivo original lo puse en otro directorio, y como salida le especifique otro nombre pero en otro directorio, en caso de no devolver ningun error significa que se realizo exitosamente, veamos como quedo nuestro nuevo codigo:

Nota:
El archivo .babelrc esta en el mismo directorio de los codigos.

"use strict";

let listar = (() => {
        var _ref = _asyncToGenerator(function* () {
                try {
                        var dir = ".";
                        if (process.argv[2]) dir = process.argv[2];
                        const archivos = yield fs_leerdir(dir);
                        for (let a of archivos) {
                                console.log(a);
                        }
                } catch (err) {
                        console.log(err);
                };
        });

        return function listar() {
                return _ref.apply(this, arguments);
        };
})();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

const fs = require("fs");

const fs_leerdir = dir => {
        return new Promise((resuelto, rechazo) => {
                fs.readdir(dir, (err, lista) => {
                        if (err) rechazo(err);else resuelto(lista);
                });
        });
};

listar();

Con esto tenemos un codigo que deberia funcionar en un node con una version vieja, para ver si funciona vamos a usar nvm para instalar una version vieja de node.js, si no tienen nvm lo explique en este post, lo siguiente sera ejecutar este comando:

$ nvm install 4

Este automaticamente lo instalara y lo siguiente sera establecerlo como predeterminado y para ello ejecuten el siguiente comando:

$ nvm use 4

Con esto ya tenemos todo listo para comenzar a experimentar, para ello vayan a la ubicacion de los codigos trabajados, si intentan ejecutar el codigo original obtendremos la siguiente salida:

$ node ls.js
/home/tinchicus/lenguajes/node.js/2/ls.js:12
async function listar() {
      ^^^^^^^^

SyntaxError: Unexpected token function
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:140:18)
    at node.js:1043:3
$

En cambio si ejecutamos el archivo generado por babel obtendremos la siguiente salida:

tinchicus@dbn001vrt:~/lenguajes/node.js/2$ node ls-babel.js
.babelrc
ls-babel.js
ls.js
tinchicus@dbn001vrt:~/lenguajes/node.js/2$

Como pueden ver nos creo una equivalencia para poder utilizarlo en navegadores viejos, tambien puede ser util para adaptar algun codigo a versiones viejas en sitios donde se siguen utilizando por alguna necesidad en particular en el mismo, recueden que todo lo comentado fue sobre Linux y antes de finalizar les dejo el sitio de babel por si surge alguna duda o necesitan ver como instalarlo en otros sistemas operativos:

https://babeljs.io/

En resumen, hoy hemos visto como instalar babel, que es para que sirve, su curiosa conducta, pero como nos puede facilitar ciertos trabajos especialmente orientados a convertir ESMACscript a CommonJS para navegadores antiguos, recuerden que es opcional la instalacion pero les puede resultar util a futuro 😉, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.