BabelJS - Transpile las características de ES7 a ES5

En este capítulo, aprenderemos cómo transpilar las características de ES7 a ES5.

ECMA Script 7 tiene las siguientes características nuevas agregadas:

Async-Await
Operador de exponenciación
Array.prototype.includes()

Los compilaremos en ES5 usando babeljs. Dependiendo de los requisitos de su proyecto, también es posible compilar el código en cualquier versión de ecma, es decir, ES7 a ES6 o ES7 a ES5. Dado que la versión ES5 es la más estable y funciona bien en todos los navegadores modernos y antiguos, compilaremos el código en ES5.

Async-Await

Async es una función asincrónica que devuelve una promesa implícita. La promesa se resuelve o se rechaza. La función asíncrona es la misma que una función estándar normal. La función puede tener una expresión de espera que pausa la ejecución hasta que devuelve una promesa y, una vez que la obtiene, la ejecución continúa. Await solo funcionará si la función es asíncrona.

Aquí hay un ejemplo práctico sobre async y await.

Ejemplo

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

Salida

Promise resolved after 5 seconds
hello after await

La expresión de espera se agrega antes de que se llame a la función de temporizador. La función de temporizador devolverá la promesa después de 5 segundos. Así que await detendrá la ejecución hasta que se resuelva o rechace la promesa de la función del temporizador y luego continuará.

Transpilemos ahora el código anterior a ES5 usando babel.

ES7 - Async-Await

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

mando

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljs no compila objetos ni métodos; por lo que aquí las promesas utilizadas no se transpilarán y se mostrarán como están. Para admitir promesas en navegadores antiguos, necesitamos agregar código, que tendrá soporte para promesas. Por ahora, instalemos babel-polyfill de la siguiente manera:

npm install --save babel-polyfill

Debe guardarse como una dependencia y no como una dependencia de desarrollo.

Para ejecutar el código en el navegador, usaremos el archivo polyfill de node_modules \ babel-polyfill \ dist \ polyfill.min.js y lo llamaremos usando la etiqueta de script como se muestra a continuación:

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

Cuando ejecute la página de prueba anterior, verá la salida en la consola como se muestra a continuación

Operador de exponenciación

** es el operador utilizado para exponenciación en ES7. El siguiente ejemplo muestra el funcionamiento del mismo en ES7 y el código se transpila usando babeljs.

Ejemplo

let sqr = 9 ** 2;
console.log(sqr);

Salida

ES6 - Exponenciación

let sqr = 9 ** 2;
console.log(sqr);

Para transpilar el operador de exponenciación, necesitamos instalar un complemento que se instalará de la siguiente manera:

mando

npm install --save-dev babel-plugin-transform-exponentiation-operator

Agregue los detalles del complemento a .babelrc archivo de la siguiente manera:

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

mando

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes ()

Esta característica da verdadero si el elemento que se le pasa está presente en la matriz y falso en caso contrario.

Ejemplo

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Salida

true
true
false

Tenemos que usar babel-polyfill nuevamente aquí como includeses un método en una matriz y no se transpilará. Necesitamos un paso adicional para incluir polyfill para que funcione en navegadores más antiguos.

ES6 - array.incluye

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

mando

npx babel array_include.js --out-file array_include_es5.js

Babel-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Para probarlo en un navegador más antiguo, necesitamos usar polyfill como se muestra a continuación:

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

Salida

↰ Previous page Next page ↱