BabelJS - Funzionalità Transpile ES7 su ES5

In questo capitolo impareremo come trasferire le funzionalità ES7 in ES5.

ECMA Script 7 include le seguenti nuove funzionalità aggiunte:

  • Async-Await
  • Operatore di esponenziazione
  • Array.prototype.includes()

Li compileremo su ES5 usando babeljs. A seconda dei requisiti del progetto, è anche possibile compilare il codice in qualsiasi versione ecma, ad esempio da ES7 a ES6 o da ES7 a ES5. Poiché la versione ES5 è la più stabile e funziona bene su tutti i browser moderni e vecchi, compileremo il codice per ES5.

Async-Await

Async è una funzione asincrona, che restituisce una promessa implicita. La promessa viene risolta o rifiutata. La funzione asincrona è uguale a una normale funzione standard. La funzione può avere un'espressione di attesa che interrompe l'esecuzione finché non restituisce una promessa e, una volta ottenuta, l'esecuzione continua. Await funzionerà solo se la funzione è asincrona.

Ecco un esempio funzionante su async e await.

Esempio

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

Produzione

Promise resolved after 5 seconds
hello after await

L'espressione await viene aggiunta prima della chiamata della funzione timer. La funzione timer restituirà la promessa dopo 5 secondi. Quindi, await interromperà l'esecuzione fino a quando la funzione Promessa sul timer non verrà risolta o rifiutata e successivamente continuerà.

Transpiliamo ora il codice sopra in 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();

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

Babeljs non compila oggetti o metodi; quindi qui le promesse usate non verranno trasplate e verranno mostrate così come sono. Per supportare le promesse sui vecchi browser, dobbiamo aggiungere del codice, che avrà il supporto per le promesse. Per ora, installiamo babel-polyfill come segue:

npm install --save babel-polyfill

Dovrebbe essere salvato come dipendenza e non come dipendenza dev.

Per eseguire il codice nel browser, useremo il file polyfill da node_modules \ babel-polyfill \ dist \ polyfill.min.js e lo chiameremo usando il tag script come mostrato di seguito -

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

Quando esegui la pagina di test sopra, vedrai l'output nella console come mostrato di seguito

Operatore di esponenziazione

** è l'operatore utilizzato per l'elevamento a potenza in ES7. L'esempio seguente mostra il funzionamento dello stesso in ES7 e il codice viene traspilato usando babeljs.

Esempio

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

Produzione

81

ES6 - Esponenziazione

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

Per trasferire l'operatore di esponenziazione, dobbiamo installare un plugin da installare come segue:

comando

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

Aggiungi i dettagli del plug-in a .babelrc file come segue -

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

Questa funzione restituisce true se l'elemento passato ad essa è presente nell'array e false in caso contrario.

Esempio

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

Produzione

true
true
false

Dobbiamo usare nuovamente babel-polyfill qui come includesè un metodo su un array e non verrà trasferito. Abbiamo bisogno di un passaggio aggiuntivo per includere il polyfill per farlo funzionare nei browser meno recenti.

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

Per testarlo nel browser più vecchio, dobbiamo utilizzare il polyfill come mostrato di seguito:

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

Produzione