Babel en ES6

Un transpilador de Babel es una herramienta gratuita de código abierto que convierte el código ECMAScript 2015 (ES6) en una versión de JavaScript compatible con versiones anteriores que puede ejecutarse en navegadores antiguos y nuevos.

FLUJO DE COMPILACIÓN 

JavaScript es el lenguaje que entiende el navegador. Usamos una variedad de navegadores para ejecutar nuestras aplicaciones, incluidos Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera y UC Browser. Hemos tenido ES6, ES7 y ES8 desde ES5. Como parte del lanzamiento de ES6, se introdujeron muchas funciones nuevas que aún no son totalmente compatibles con todos los navegadores. No está claro cuándo todos los navegadores podrán admitir todas las versiones de ES lanzadas. En caso de que planeemos usar las funciones de ES6, ES7 o ES8 en nuestro código, el código podría romperse en algunos navegadores más antiguos debido a la falta de compatibilidad con las nuevas funciones. Por lo tanto, requerimos una herramienta que compile nuestro código final en ES5. Aquí es donde entra Babel.

Transpilación: la traducción de lenguajes de programación a un idioma de destino específico se denomina transpilación.  Un transpilador de Babel puede analizar el código JavaScript moderno y reescribirlo utilizando construcciones de sintaxis más antiguas para que también funcione en navegadores obsoletos. Además de las construcciones de sintaxis y los operadores, las mejoras del lenguaje también pueden incluir funciones. Por ejemplo, Matemáticas. trunc(n) elimina la parte decimal de un número, por ejemplo, Math. trunc(1.47) devuelve 1. Algunos motores de JavaScript (obsoletos) no son compatibles con Math. trunc, por lo que dicho código fallará. Ya que estamos hablando de nuevas funciones, no de cambios de sintaxis, no hay necesidad de transpilar nada. Todo lo que tenemos que hacer es declarar la función. Cuando la nueva característica es un método u objeto, necesitamos usar Babel-polyfill junto con la transpilación para que funcione en navegadores más antiguos.

Consideremos la característica de función de flecha de ES6 para entender Babel. Por ejemplo, es posible que desee esta función de flecha código Javascript 

(x) => x + 1;

para ser compilado en código JavaScript compatible con el navegador:

"use strict";
 
(function (x) {
 
  return x + 1;
 
});

El proceso consta de tres pasos principales:

1. Análisis: Babel toma el código fuente y lo analiza como un AST (árbol de sintaxis abstracta). Un AST es una estructura de datos que representa la estructura de un código fuente como un árbol.

2. Transformación:  Babel transforma el AST del último paso y lo manipula de modo que el AST resultante represente un código compatible con el navegador.

3. Generación de código: un código compatible con el navegador se deriva del AST generado en el último paso de Babel.

"use strict";
 
(function (x) {
 
  return x + 1;
 
});