BabelJS - ES6-Codeausführung
BabelJSist ein JavaScript-Transpiler, der neue Funktionen, die JavaScript hinzugefügt wurden, in ES5 konvertiert oder basierend auf der angegebenen Voreinstellung oder dem angegebenen Plugin reagiert. ES5 ist eine der ältesten Formen von JavaScript und wird für die problemlose Ausführung in neuen und alten Browsern unterstützt. In den meisten Beispielen in diesem Tutorial haben wir den Code auf ES5 übertragen.
Wir haben viele Funktionen wie Pfeilfunktionen, Klassen, Versprechen, Generatoren, asynchrone Funktionen usw. gesehen, die zu ES6, ES7 und ES8 hinzugefügt wurden. Wenn eine der neu hinzugefügten Funktionen in alten Browsern verwendet wird, werden Fehler ausgegeben. BabelJS hilft beim Kompilieren des Codes, der mit älteren Browsern abwärtskompatibel ist. Wir haben gesehen, dass ES5 in älteren Browsern problemlos funktioniert. In Anbetracht der Details der Projektumgebung können wir, wenn es auf älteren Browsern ausgeführt werden muss, jede neue Funktion in unserem Projekt verwenden und den Code mit babeljs zu ES5 kompilieren und alle Browser ohne Probleme verwenden.
Betrachten wir das folgende Beispiel, um dies zu verstehen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>index.js Datei
var _foo = () => {
return "Hello World"
};
alert(_foo());Ausgabe
Wenn wir das obige HTML im Chrome-Browser ausführen, erhalten wir die folgende Ausgabe:
Wenn der HTML-Code in Firefox ausgeführt wird, wird die folgende Ausgabe generiert:
Wenn derselbe HTML-Code in Internet Explorer ausgeführt wird, wird der folgende Syntaxfehler generiert:
Wir haben die ES6-Pfeilfunktion verwendet. Das gleiche funktioniert nicht in allen Browsern wie oben gezeigt. Damit dies funktioniert, haben wir BabelJS, um den Code in ES5 zu kompilieren und in allen Browsern zu verwenden.
Kompiliert die js-Datei mit babeljs zu es5 und überprüft sie erneut in den Browsern.
In der HTML-Datei verwenden wir index_new.js wie unten gezeigt -
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());Chrome-Ausgabe
Firefox-Browser-Ausgabe
IE-Browser-Ausgabe
