Babel ist ein JavaScript-Compiler (Transpiler). Er übersetzt modernen Code — etwa ES2015+ oder JSX — in eine Form, die auch ältere Browser und Laufzeitumgebungen verstehen. Entwickelt wurde Babel 2014 von Sebastian McKenzie unter dem Namen 6to5; heute ist es ein Standardwerkzeug in JavaScript-Build-Ketten.
Warum ein Transpiler?
Neue Sprachfeatures wie Pfeilfunktionen, Klassen oder async/await sind bequem, aber nicht jede Umgebung unterstützt sie sofort. Babel zerlegt den Quellcode in einen Syntaxbaum, wendet Transformationen an und gibt älteres, kompatibles JavaScript aus:
// Vorher (modern)
const doppelt = (n) => n * 2;
// Nachher (kompatibel)
var doppelt = function (n) { return n * 2; };Plugins und Presets
Babel ist modular: Jede Transformation ist ein Plugin. Gebündelte Gruppen heißen Presets. Das wichtigste ist @babel/preset-env, das automatisch die nötigen Transformationen für die gewünschten Ziel-Browser aktiviert. Für React kommt @babel/preset-react hinzu (JSX-Transformation), für TypeScript @babel/preset-typescript.
// babel.config.json
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}Syntax und Polyfills
Babel unterscheidet zwei Aufgaben: Syntax-Transformation (neue Schreibweise wird in alte übersetzt) und Polyfills (fehlende Funktionen wie Array.includes werden nachgerüstet, klassisch über core-js). Die Konfiguration liegt in babel.config.json oder .babelrc. Installiert wird Babel über npm.
Babel in der Praxis
In einer modernen Build-Kette läuft Babel meist als Loader innerhalb von Webpack (babel-loader) oder Vite. Es ist ein zentraler Teil des Build-Schritts: Quellcode mit modernen Features hinein, kompatibles JavaScript hinaus — bereit fürs Deployment.
Verwandte Begriffe: React, JSX, Webpack, Build, JavaScript-Befehle, Framework.