BabelJS - Recursos do Transpile ES7 para ES5

Neste capítulo, aprenderemos como transpilar recursos do ES7 para o ES5.

ECMA Script 7 tem os seguintes novos recursos adicionados a ele -

Async-Await
Operador de exponenciação
Array.prototype.includes()

Iremos compilá-los no ES5 usando o babeljs. Dependendo dos requisitos do seu projeto, também é possível compilar o código em qualquer versão ecma, ou seja, ES7 a ES6 ou ES7 a ES5. Visto que a versão ES5 é a mais estável e funciona bem em todos os navegadores modernos e antigos, iremos compilar o código para ES5.

Async-Await

Async é uma função assíncrona, que retorna uma promessa implícita. A promessa foi resolvida ou rejeitada. A função assíncrona é igual a uma função padrão normal. A função pode ter a expressão de espera que pausa a execução até que ela retorne uma promessa e assim que a obtiver, a execução continua. Aguardar só funcionará se a função for assíncrona.

Aqui está um exemplo de trabalho em async e await.

Exemplo

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();

Resultado

Promise resolved after 5 seconds
hello after await

A expressão await é adicionada antes que a função timer seja chamada. A função de cronômetro retornará a promessa após 5 segundos. Portanto, o await interromperá a execução até que a função do timer da promessa seja resolvida ou rejeitada e, posteriormente, continue.

Vamos agora transpilar o código acima para ES5 usando o 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();

comando

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();

O Babeljs não compila objetos ou métodos; então aqui as promessas usadas não serão transpiladas e serão mostradas como estão. Para suportar promessas em navegadores antigos, precisamos adicionar código, que terá suporte para promessas. Por enquanto, vamos instalar o babel-polyfill da seguinte maneira -

npm install --save babel-polyfill

Deve ser salvo como uma dependência e não como uma dependência de desenvolvimento.

Para executar o código no navegador, usaremos o arquivo polyfill de node_modules \ babel-polyfill \ dist \ polyfill.min.js e o chamaremos usando a tag de script conforme mostrado abaixo -

<!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>

Ao executar a página de teste acima, você verá a saída no console, conforme mostrado abaixo

Operador de exponenciação

** é o operador usado para exponenciação em ES7. O exemplo a seguir mostra o funcionamento do mesmo no ES7 e o código é transpilado usando o babeljs.

Exemplo

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

Resultado

ES6 - Exponenciação

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

Para transpilar o operador de exponenciação, precisamos instalar um plugin a ser instalado da seguinte maneira -

comando

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

Adicione os detalhes do plugin para .babelrc arquivo da seguinte forma -

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

comando

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 ()

Este recurso fornece verdadeiro se o elemento passado para ele estiver presente na matriz e falso caso contrário.

Exemplo

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'));

Resultado

true
true
false

Temos que usar babel-polyfill novamente aqui como includesé um método em uma matriz e não será transpilado. Precisamos de etapas adicionais para incluir polyfill para fazê-lo funcionar em navegadores mais antigos.

ES6 - array.includes

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'));

comando

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 testá-lo em um navegador mais antigo, precisamos usar polyfill conforme mostrado abaixo -

<!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>

Resultado