ReactJS | Introducción a Babel

Introducción a Babel  Babel es un transpilador
muy famoso que básicamente nos permite utilizar JavaScript del futuro en los navegadores actuales. En palabras simples, puede convertir la última versión del código JavaScript en uno que el navegador entienda. La última versión estándar que sigue JavaScript es ES2020, que no es totalmente compatible con todos los navegadores y, por lo tanto, utilizamos una herramienta como ‘babel’ para que podamos convertirlo en el código que entiende el navegador actual.

¿Qué es un transpilador? 
Es una herramienta que se utiliza para convertir el código fuente en otro código fuente del mismo nivel. Por eso también se le conoce como compilador de fuente a fuente. Ambos códigos son de naturaleza equivalente, considerando el hecho de que uno funciona con la versión específica del navegador y el otro no. 

Nota: también es bueno tener en cuenta que un compilador es totalmente diferente de un transpilador, ya que el transpilador convierte el código fuente en otro código fuente con el mismo nivel de abstracción, mientras que el compilador convierte el código en un código de nivel inferior en general. Al igual que en Java, el código fuente se convierte en código de bytes, que es de nivel inferior y no equivalente.

¿Por qué necesitamos Babel? 
La razón principal por la que necesitamos babel es que nos da el privilegio de hacer uso de las últimas cosas que JavaScript tiene para ofrecer sin preocuparnos de si funcionará en el navegador o no. 

Características de Babel:

• Complementos de Babel: los complementos son detalles de configuración para que Babel transpile el código que admite una serie de complementos, que podrían usarse individualmente, siempre que se conozca el entorno.
• Preajustes de Babel: los preajustes de Babel tienen un conjunto de complementos que le indican a Babel que transpile en un modo específico. siempre que se conozca el entorno.
• Babel-Polyfills: en los casos en que los métodos y objetos no se pueden transpilar, podemos hacer uso de babel-polyfill para facilitar el uso de funciones en cualquier navegador.
• Babel-Polyfills: la interfaz de línea de comandos de Babel tiene muchos comandos en los que el código se puede compilar fácilmente en la línea de comandos. También tiene características como complementos y ajustes preestablecidos para usar junto con el comando, lo que facilita la transpilación del código a la vez.

Referencia: https://babeljs.io/docs/en/features-timeline 

Ejemplo simple 
Antes de instalar y hacer uso de todas las funciones de la herramienta Babel, veamos un código simple de la última versión estándar de ES2017 y veamos qué sucede cuando lo pasamos al motor babel. 

Código:  

// sample new version javascript code
const fun = (x) => {x*2};
 
const a = () => {};
 
const b = (x) => x;
 
[1, 2, 3].map((n)=> n+1);

Algunos de los códigos anteriores no son compatibles con algunos navegadores, por lo que después de transpilar a través de Babel obtendremos:  

// after transpiling
"use strict";
 
var fun = function fun(x) {
  x * 2;
};
 
var a = function a() {};
 
var b = function b(x) {
  return x;
};
 
[1, 2, 3].map(function (n) {
  return n + 1;
});

En el próximo artículo, aprenderemos cómo instalar Babel y también veremos más ejemplos de ello.