BabelJS - Übersicht

BabelJSist ein JavaScript-Transpiler, der neue Funktionen in alten Standard umwandelt. Damit können die Funktionen problemlos in alten und neuen Browsern ausgeführt werden. Sebastian McKenzie, ein australischer Entwickler, gründete BabelJS.

Warum BabelJS?

JavaScript ist die Sprache, die der Browser versteht. Wir verwenden verschiedene Browser, um unsere Anwendungen auszuführen - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC-Browser usw. ECMA-Skript ist die JavaScript-Sprachspezifikation. Das ECMA Script 2015 ES6 ist die stabile Version, die in allen neuen und alten Browsern einwandfrei funktioniert.

Nach ES5 hatten wir ES6, ES7 und ES8. ES6 wurde mit vielen neuen Funktionen veröffentlicht, die nicht von allen Browsern vollständig unterstützt werden. Gleiches gilt für ES7, ES8 und ESNext (nächste Version von ECMA Script). Es ist jetzt ungewiss, wann es möglich sein wird, dass alle Browser mit allen veröffentlichten ES-Versionen kompatibel sind.

Wenn wir planen, ES6-, ES7- oder ES8-Funktionen zum Schreiben unseres Codes zu verwenden, wird dies in einigen alten Browsern häufig nicht funktionieren, da die neuen Änderungen nicht unterstützt werden. Wenn wir also neue Funktionen von ECMA Script in unserem Code verwenden und es auf allen möglichen verfügbaren Browsern ausführen möchten, benötigen wir ein Tool, das unseren endgültigen Code in ES5 kompiliert.

Babelmacht das gleiche und es wird ein Transpiler genannt, der den Code in der gewünschten ECMA-Skriptversion transpiliert. Es verfügt über Funktionen wie Voreinstellungen und Plugins, die die ECMA-Version konfigurieren, die wir zum Transpilieren unseres Codes benötigen. Mit Babel können Entwickler ihren Code mithilfe der neuen Funktionen in JavaScript schreiben. Die Benutzer können die Codes mit Babel transpilieren lassen. Die Codes können später problemlos in jedem Browser verwendet werden.

The following table lists down the features available in ES6, ES7 and ES8 −

Eigenschaften	ECMA-Skriptversion
Lassen Sie + Const	ES6
Pfeilfunktionen	ES6
Klassen	ES6
Versprechen	ES6
Generatoren	ES6
Iteratoren	ES6
Module	ES6
Destrukturierung	ES6
Vorlagenliterale	ES6
Erweitertes Objekt	ES6
Standard-, Rest & Spread-Eigenschaften	ES6
Async - Warten	ES7
Potenzierungsoperator	ES7
Array.prototype.includes ()	ES7
String Padding	ES8

BabelJS verwaltet die folgenden zwei Teile -

transpiling
polyfilling

Was ist Babel-Transpiler?

Babel-Transpiler konvertiert die Syntax von modernem JavaScript in eine Form, die von älteren Browsern leicht verstanden werden kann. Zum Beispiel werden Pfeilfunktion, const, let-Klassen in Funktion, var usw. konvertiert. Hier wird die Syntax, dh die Pfeilfunktion, in eine normale Funktion konvertiert, wobei die Funktionalität in beiden Fällen gleich bleibt.

Was ist Babel-Polyfill?

In JavaScript wurden neue Funktionen wie Versprechen, Karten und Includes hinzugefügt. Die Funktionen können auf einem Array verwendet werden. Das gleiche gilt nicht, wenn es mit babel verwendet und transpiliert wird. Wenn es sich bei der neuen Funktion um eine Methode oder ein Objekt handelt, müssen wir Babel-polyfill zusammen mit dem Transpilieren verwenden, damit es in älteren Browsern funktioniert.

Hier ist die Liste der in JavaScript verfügbaren ECMA-Skriptfunktionen, die transpiliert und polygefüllt werden können:

Classes
Decorators
Const
Modules
Destructing
Standardparameter
Berechnete Eigenschaftsnamen
Objekt ruhen / verbreiten
Asynchrone Funktionen
Pfeilfunktionen
Ruheparameter
Spread
Vorlagenliterale

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

Eigenschaften von BabelJS

In diesem Abschnitt lernen wir die verschiedenen Funktionen von BabelJS kennen. Im Folgenden sind die wichtigsten Kernfunktionen von BabelJS aufgeführt:

Babel-Plugins

Plugins und Presets sind Konfigurationsdetails für Babel, um den Code zu transpilieren. Babel unterstützt eine Reihe von Plugins, die einzeln verwendet werden können, wenn wir die Umgebung kennen, in der der Code ausgeführt wird.

Babel-Presets

Babel-Voreinstellungen sind eine Reihe von Plugins, dh Konfigurationsdetails für den Babel-Transpiler, die Babel anweisen, in einem bestimmten Modus zu transpilieren. Wir müssen Voreinstellungen verwenden, die die Umgebung haben, in der der Code konvertiert werden soll. Beispielsweise konvertiert die Voreinstellung es2015 den Code in es5 .

Babel-Polyfills

Es gibt einige Funktionen wie Methoden und Objekte, die nicht transpiliert werden können. In solchen Fällen können wir babel-polyfill verwenden, um die Verwendung von Funktionen in jedem Browser zu erleichtern. Betrachten wir das Beispiel von Versprechungen. Damit die Funktion in älteren Browsern funktioniert, müssen Polyfüllungen verwendet werden.

Babel-Polyfills

Babel-cli enthält eine Reihe von Befehlen, mit denen der Code einfach über die Befehlszeile kompiliert werden kann. Es verfügt auch über Funktionen wie Plugins und Voreinstellungen, die zusammen mit dem Befehl verwendet werden können, sodass der Code auf einmal einfach transpiliert werden kann.

Vorteile der Verwendung von BabelJS

In diesem Abschnitt lernen wir die verschiedenen Vorteile kennen, die mit der Verwendung von BabelJS verbunden sind -

BabelJS bietet Abwärtskompatibilität zu allen neu hinzugefügten Funktionen von JavaScript und kann in jedem Browser verwendet werden.
BabelJS kann transpilieren, um die nächste kommende Version von JavaScript zu verwenden - ES6, ES7, ESNext usw.
BabelJS kann zusammen mit Gulp, Webpack, Flow, React, Typoskript usw. verwendet werden, was es sehr leistungsfähig macht und mit großen Projekten verwendet werden kann, um Entwicklern das Leben zu erleichtern.
BabelJS arbeitet auch mit der JSX-Syntax von react zusammen und kann in JSX-Form kompiliert werden.
BabelJS unterstützt Plugins, Polyfills und Babel-Cli, die die Arbeit mit großen Projekten vereinfachen.

Nachteile der Verwendung von BabelJS

In diesem Abschnitt lernen wir die verschiedenen Nachteile der Verwendung von BabelJS kennen -

BabelJS-Code ändert die Syntax während des Transpilierens, wodurch der Code bei Veröffentlichung in der Produktion schwer verständlich wird.
Der transpilierte Code ist im Vergleich zum ursprünglichen Code größer.
Nicht alle ES6 / 7/8 oder die kommenden neuen Funktionen können transpiliert werden, und wir müssen Polyfill verwenden, damit es in älteren Browsern funktioniert.

Hier ist die offizielle Seite von babeljs https://babeljs.io/.