Compilando ES6 con Babel 6

Como todos sabemos ECMAScript 6 (ES6 o ES2015) es la nueva versión del estándar ECMAScript que está disponible desde Junio de 2015. Dado que en blog escribiré mucho JavaScript y que por supuesto lo haré con esta nueva versión, he creído oportuno comenzar explicando como compilar o transformar ES6 a ES5.

No me quiero extender explicando las características de la nueva versión ni cuales de ellas son soportadas actualmente por los navegadores así que os dejo este link con las tablas de compatibilidades de las diferentes versiones para que le echéis un vistazo.

 

ES6 y el transpilador del continuo

Ates de seguir me gustaría aclarar que es esa marcianada de transpilar. Seguro que lo habréis oído o leído muchas veces y si, es el término correcto para definir la compilación de ES6 a ES5. Básicamente un transpiler traduce lenguajes que operan en aproximadamente el mismo nivel de abstracción, mientras que un compilador tradicional traduce de un lenguaje de alto nivel a un lenguaje de nivel inferior. – Aclarado esto y por correcto que sea, con el fin de no dañar a mis neuronas ni las tuyas evitaré usar ese término.-

Actualmente existen varias herramientas que nos ofrecen diferentes posibilidades a la hora de transformar nuestro nuevo código JavaScript. Entre las más utilizadas tenemos Browsserify y por otro lado los task-runners Grunt y Gulp, pero en todos se suele usar el core de Babel para transformar el código.

Aunque como vemos existen otras opciones, y más consistentes, en este artículo nos centraremos en la compilación para un prototipado rápido. En breve espero publicar un artículo más extenso sobre como configurar un entorno de desarrollo para ES6, seguramente con Webpack.

También os recomendaría que experimentéis con la consola de Chrome Canary, versión de Google Chrome destinada a desarrolladores, habilitando la opción “JavaScript Experimental“.

 

logo

Babel 6, el compilador de moda

Una de las opciones más interesantes y mejor aceptadas por la comunidad es Babel (Actualmente se encuentra en su versión 6). Este compilador ofrece numerosas opciones de configuración dependiendo de la herramienta que utilicemos (os recomiendo echar un vistado a su web para más info.). Nosotros vamos a utilizar babel-cli, que se ejecuta desde la terminal y de eso tenemos todos.

Lo primero será instalar babel-cli de manera local en nuestro proyecto. Doy por hecho que todos tenemos Node.js y npm instalados en nuestra máquina así que nos movemos hasta la ruta de nuestro proyecto y ejecutamos el siguiente comando:

$ npm install --save-dev babel-cli

Esto habrá generado un nodo nuevo en nuestro package.json similar a este:

"devDependencies": {
    "babel-cli": "^6.0.0"
}

Ahora veamos las diferentes opciones de compilación que tenemos.

Podemos compilar desde un punto de entrada (opción recomendada), para eso usaremos la opción --out-file o -o. El comando completo quedaría asi:

$ babel script.js --out-file script-compiled.js

Si queremos que compile automaticamente cada vez que modifiquemos el archivo podemos utilizar la opción --watch o -s

$ babel script.js --watch --out-file script-compiled.js

También podemos compilar directorios. Para ello tenemos dos opciones. La primera es compilar de un directorio src a otro build:

$ babel src --out-dir build

O bien desde un directorio a un solo archivo

$ babel src --out-file build/script-compiled.js

 

Instalando presets

Por desgracia Babel no trae incorporadas todas las transformaciones así que necesitaremos instalar algunos presets dependiendo de que código queramos compilar. En nuestro caso solo necesitamos instalar babel-preset-es2015 para aplicar las transformaciones necesarias para ES6.

$ npm install --save-dev babel-preset-es2015

Si quisiésemos trabajar con React o JSX, o por ejemplo queremos utilizar los nuevos decorators de ES7 podemos instalar el preset específico para ello. Aquí podemos encontrar un listado de los presets disponibles.

$ npm install --save-dev babel-preset-react

Una vez instalados los presets necesários tenemos que crear un fichero .babelrc que tendrá esta pinta

{
    "presets": ["es2015", "react"]
}

Y con esto ya podemos compilar nuestro proyecto. Os recomiendo crear comandos en vuestro package.json para facilitaros la compilación. En mi caso he creado un par a modo de ejemplo.

"scripts": {
    "build": "babel src -d build/script-compiled.js",
    "dev": "babel src --watch build/script-compiled.js",
}

Para ejecutarlos solo tenemos que tirar los siguientes comando desde la terminal:

$ npm run build
$ npm run dev

 

Compilando con Source Maps

Ahora que tenemos claro como compilar nuestro código podemos añadir un source map para facilitarnos la vida a la hora de debuguear. Un source map simplemente es un archivo que mapea las líneas del código original y las del código compilado. Esta información será utilizada por los depuradores para referirse al código original. para crearlos solo ñadiremos --source-maps-s y nuestro comando quedaría así:

$ babel src --out-file build/script-compiled.js --source-maps

Babel tiene algunas opciones más que nos pueden resultar bastante útiles, os recomiendo que le dediquéis un rato a mirar la documentación, es bastante clara y está bastante actualizada.

Espero que os resulte útil!

  • Pingback: Compilando ES6 con Babel 6()

  • michell

    Esta micro guia me ayudo mucho a comprender como usar mejor a bebel en conjunto con npm y el package.json.

    1000 gracias y saludo desde Venezuela y Colombia.