BabelJS - Transpile ES7 fonctionnalités vers ES5

Dans ce chapitre, nous allons apprendre à transpiler les fonctionnalités ES7 vers ES5.

ECMA Script 7 a les nouvelles fonctionnalités suivantes ajoutées -

  • Async-Await
  • Opérateur d'exponentiation
  • Array.prototype.includes()

Nous les compilerons dans ES5 en utilisant babeljs. En fonction des exigences de votre projet, il est également possible de compiler le code dans n'importe quelle version d'ecma, c'est-à-dire ES7 à ES6 ou ES7 à ES5. La version ES5 étant la plus stable et fonctionnant correctement sur tous les navigateurs modernes et anciens, nous compilerons le code vers ES5.

Async-Attendre

Async est une fonction asynchrone, qui renvoie une promesse implicite. La promesse est soit résolue, soit rejetée. La fonction asynchrone est identique à une fonction standard normale. La fonction peut avoir une expression d'attente qui suspend l'exécution jusqu'à ce qu'elle retourne une promesse et une fois qu'elle l'obtient, l'exécution se poursuit. Await ne fonctionnera que si la fonction est asynchrone.

Voici un exemple de travail sur async et wait.

Exemple

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

Production

Promise resolved after 5 seconds
hello after await

L'expression d'attente est ajoutée avant l'appel de la fonction de minuterie. La fonction de minuterie renverra la promesse après 5 secondes. Attendre arrêtera donc l'exécution jusqu'à ce que la fonction de promesse sur le minuteur soit résolue ou rejetée, puis continuera.

Transpilons maintenant le code ci-dessus dans ES5 en utilisant 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();

commander

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 ne compile pas d'objets ou de méthodes; donc ici les promesses utilisées ne seront pas transpilées et seront montrées telles quelles. Pour prendre en charge les promesses sur les anciens navigateurs, nous devons ajouter du code, qui prendra en charge les promesses. Pour l'instant, installons babel-polyfill comme suit -

npm install --save babel-polyfill

Il doit être enregistré comme une dépendance et non comme une dépendance de développement.

Pour exécuter le code dans le navigateur, nous utiliserons le fichier polyfill de node_modules \ babel-polyfill \ dist \ polyfill.min.js et l'appellerons en utilisant la balise script comme indiqué ci-dessous -

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

Lorsque vous exécutez la page de test ci-dessus, vous verrez la sortie dans la console comme indiqué ci-dessous

Opérateur d'exponentiation

** est l'opérateur utilisé pour l'exponentiation dans ES7. L'exemple suivant montre le fonctionnement de la même chose dans ES7 et le code est transpilé à l'aide de babeljs.

Exemple

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

Production

81

ES6 - Exponentiation

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

Pour transpiler l'opérateur d'exponentiation, nous devons installer un plugin à installer comme suit -

commander

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

Ajoutez les détails du plugin à .babelrc fichier comme suit -

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

commander

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

Cette fonctionnalité donne true si l'élément qui lui est passé est présent dans le tableau et false dans le cas contraire.

Exemple

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

Production

true
true
false

Nous devons à nouveau utiliser babel-polyfill ici comme includesest une méthode sur un tableau et elle ne sera pas transpilée. Nous avons besoin d'une étape supplémentaire pour inclure polyfill pour le faire fonctionner dans les anciens navigateurs.

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

commander

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

Pour le tester dans un navigateur plus ancien, nous devons utiliser polyfill comme indiqué ci-dessous -

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

Production