BabelJS - Ejecución de código ES6
BabelJSes un transpilador de JavaScript, que convierte las nuevas funciones agregadas a JavaScript en ES5 o para reaccionar según el ajuste preestablecido o el complemento proporcionado. ES5 es una de las formas más antiguas de JavaScript y es compatible para ejecutarse en navegadores nuevos y antiguos sin ningún problema. En la mayoría de los ejemplos de este tutorial, hemos transpilado el código a ES5.
Hemos visto muchas características como funciones de flecha, clases, promesas, generadores, funciones asíncronas, etc. agregadas a ES6, ES7 y ES8. Cuando cualquiera de las funciones recién agregadas se usa en navegadores antiguos, arroja errores. BabelJS ayuda a compilar el código, que es compatible con los navegadores más antiguos. Hemos visto que ES5 funciona perfectamente bien en navegadores antiguos sin problemas. Entonces, considerando los detalles del entorno del proyecto, si se requiere que se ejecute en navegadores más antiguos, podemos usar cualquier característica nueva en nuestro proyecto y compilar el código en ES5 usando babeljs, y usarlo en cualquier navegador sin ningún problema.
Consideremos el siguiente ejemplo para entender esto.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>archivo index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());Salida
Cuando ejecutamos el html anterior en el navegador Chrome, obtenemos el siguiente resultado:
Cuando el HTML se ejecuta en Firefox, genera el siguiente resultado:
Y cuando se ejecuta el mismo HTML en Internet Explorer, genera el siguiente error de sintaxis:
Hemos utilizado la función de flecha ES6; lo mismo no funciona en todos los navegadores como se ve arriba. Para que esto funcione, tenemos BabelJS para compilar el código en ES5 y usarlo en todos los navegadores.
Compilará el archivo js en es5 usando babeljs y lo verificará nuevamente en los navegadores.
En el archivo html, usaremos index_new.js como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());Salida de Chrome
Salida del navegador Firefox
Salida del navegador IE
