BabelJS - Transpile ES7-Funktionen auf ES5

In diesem Kapitel erfahren Sie, wie Sie ES7-Funktionen auf ES5 übertragen.

ECMA Script 7 enthält die folgenden neuen Funktionen:

Async-Await
Potenzierungsoperator
Array.prototype.includes()

Wir werden sie mit babeljs zu ES5 kompilieren. Abhängig von Ihren Projektanforderungen ist es auch möglich, den Code in jeder ecma-Version zu kompilieren, dh ES7 bis ES6 oder ES7 bis ES5. Da die ES5-Version die stabilste ist und auf allen modernen und alten Browsern einwandfrei funktioniert, werden wir den Code in ES5 kompilieren.

Async-Await

Async ist eine asynchrone Funktion, die ein implizites Versprechen zurückgibt. Das Versprechen wird entweder gelöst oder abgelehnt. Die asynchrone Funktion entspricht einer normalen Standardfunktion. Die Funktion kann auf einen Ausdruck warten, der die Ausführung pausiert, bis sie ein Versprechen zurückgibt, und sobald sie es erhält, wird die Ausführung fortgesetzt. Warten wartet nur, wenn die Funktion asynchron ist.

Hier ist ein funktionierendes Beispiel für Async und Warten.

Beispiel

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

Ausgabe

Promise resolved after 5 seconds
hello after await

Der Warten-Ausdruck wird hinzugefügt, bevor die Timer-Funktion aufgerufen wird. Die Timer-Funktion gibt das Versprechen nach 5 Sekunden zurück. Warten Sie also, um die Ausführung anzuhalten, bis das Versprechen zur Timer-Funktion aufgelöst oder abgelehnt wurde, und fahren Sie später fort.

Lassen Sie uns nun den obigen Code mit babel auf ES5 übertragen.

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

Befehl

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 kompiliert keine Objekte oder Methoden. Daher werden hier verwendete Versprechen nicht umgesetzt und so angezeigt, wie sie sind. Um Versprechen in alten Browsern zu unterstützen, müssen wir Code hinzufügen, der Versprechen unterstützt. Lassen Sie uns vorerst babel-polyfill wie folgt installieren:

npm install --save babel-polyfill

Es sollte als Abhängigkeit und nicht als Dev-Abhängigkeit gespeichert werden.

Um den Code im Browser auszuführen, verwenden wir die Polyfill-Datei aus node_modules \ babel-polyfill \ dist \ polyfill.min.js und rufen sie mit dem unten gezeigten Skript-Tag auf.

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

Wenn Sie die obige Testseite ausführen, wird die Ausgabe in der Konsole wie unten gezeigt angezeigt

Potenzierungsoperator

** ist der Operator, der für die Potenzierung in ES7 verwendet wird. Das folgende Beispiel zeigt die Funktionsweise in ES7 und der Code wird mit babeljs transpiliert.

Beispiel

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

Ausgabe

ES6 - Potenzierung

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

Um den Potenzierungsoperator zu transpilieren, müssen wir ein Plugin installieren, das wie folgt installiert werden soll:

Befehl

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

Fügen Sie die Plugin-Details zu hinzu .babelrc Datei wie folgt -

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

Befehl

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

Diese Funktion gibt true an, wenn das übergebene Element im Array vorhanden ist, und false, wenn dies nicht der Fall ist.

Beispiel

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

Ausgabe

true
true
false

Wir müssen hier wieder babel-polyfill als verwenden includesist eine Methode für ein Array und wird nicht transpiliert. Wir benötigen einen zusätzlichen Schritt, um Polyfill einzuschließen, damit es in älteren Browsern funktioniert.

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

Befehl

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

Um es in einem älteren Browser zu testen, müssen wir Polyfill wie unten gezeigt verwenden -

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

Ausgabe