Was ist Babel?

Babel ist ein JavaScript-Compiler

Babel ist eine Toolchain, die hauptsächlich verwendet wird, um ECMAScript 2015+ -Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen zu konvertieren. Hier sind die wichtigsten Dinge, die Babel für Sie tun kann:

• Transformationssyntax
• Polyfill-Funktionen, die in Ihrer Zielumgebung fehlen (durch @babel/polyfill)
• Quellcode-Transformationen (Codemods)
• Und mehr! (schauen Sie sich diese Videos zur Inspiration an)

// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});

Ein großartiges Tutorial zu Compilern finden Sie im -super-tiny-Compiler, der auch erklärt, wie Babel selbst auf hohem Niveau funktioniert.

ES2015 und darüber hinaus

Babel unterstützt die neueste Version von JavaScript durch Syntaxtransformatoren.

Mit diesen Plugins können Sie jetzt neue Syntax verwenden, ohne auf Browserunterstützung zu warten. Schauen Sie sich unsere Gebrauchsanweisung an, um loszulegen.

JSX und React

Babel kann JSX-Syntax konvertieren! Schauen Sie sich unser React-Preset an, um loszulegen. Verwenden Sie es zusammen mit dem babel-sublime-Paket, um die Syntaxhervorhebung auf eine ganz neue Ebene zu bringen.

Sie können dieses Preset mit

npm install --save-dev @babel/preset-react

installieren und @babel/preset-react zu Ihrer Babel-Konfiguration hinzufügen.

export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});

Erfahren Sie mehr über JSX

Typanmerkungen (Flow und TypeScript)

Babel kann Typanmerkungen entfernen! Schauen Sie sich entweder unsere Flow-Voreinstellung oder die TypeScript-Voreinstellung an, um loszulegen. Sie müssen weiterhin Flow oder TypeScript installieren und verwenden, um Typen zu überprüfen.

Sie können das Flow-Preset mit

npm install --save-dev @babel/preset-flow

// @flowfunction square(n: number): number { return n * n;}

oder das Typescript-Preset mit

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) { this.greeting = greeting;}

Erfahren Sie mehr über Flow und TypeScript

Pluggable

Babel besteht aus Plugins. Erstellen Sie Ihre eigene Transformationspipeline mit vorhandenen Plugins oder schreiben Sie Ihre eigenen. Verwenden Sie einfach eine Reihe von Plugins, indem Sie eine Voreinstellung verwenden oder erstellen. Erfahren Sie mehr →

Erstellen Sie ein Plugin on the fly mit astexplorer.net oder verwenden Sie generator-babel-plugin, um eine Plugin-Vorlage zu generieren.

// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}

Debuggable

Source Map-Unterstützung, damit Sie Ihren kompilierten Code problemlos debuggen können.

Spec-konform

Babel versucht, dem ECMAScript-Standard so weit wie möglich treu zu bleiben. Es kann auch spezifische Optionen geben, um als Kompromiss zur Leistung spezifikationskonformer zu sein.

Compact

Babel versucht, die geringstmögliche Menge an Code zu verwenden, ohne von einer sperrigen Laufzeit abhängig zu sein.

Dies kann in Fällen schwierig sein, und es gibt „lose“ Optionen für bestimmte Transformationen, die die Spezifikationskonformität in Bezug auf Lesbarkeit, Dateigröße und Geschwindigkeit beeinträchtigen können.