Babel für JavaScript (Node.js): vollständige Anleitung mit Beispielen

Was ist Babel und wozu wird es benötigt?

\n\n

Babel ist ein leistungsstarker Transpiler (Compiler) für JavaScript, der es Entwicklern ermöglicht, Code in den modernsten Versionen von ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 und höher) zu schreiben und ihn in abwärtskompatibles JavaScript umzuwandeln, das in älteren Browsern und Laufzeitumgebungen (z. B. Node.js-Versionen unter 12) ausgeführt werden kann.

\n\n

Das Hauptproblem, das Babel löst, ist die Kluft zwischen neuen Sprachfunktionen (Pfeilfunktionen, async/await, Destrukturierung, Klassen, Module, optionale Verkettung usw.) und der Unterstützung dieser Funktionen in realen Laufzeitumgebungen. Babel fungiert als Brücke und ermöglicht es Entwicklern, alle Vorteile von modernem JavaScript zu nutzen, ohne darauf warten zu müssen, dass alle Browser aktualisiert werden.

\n\n

Babel besteht aus drei Hauptkomponenten:

\n

\n
• Kern (@babel/core) — die Haupt-Engine, die Code parst, transformiert und neuen Code generiert.
\n
• Plugins — separate Module, die jeweils für die Transformation einer bestimmten syntaktischen Konstruktion verantwortlich sind (z. B. ein Plugin für Pfeilfunktionen, für async/await).
\n
• Presets — vorkonfigurierte Sammlungen von Plugins (z. B. @babel/preset-env, @babel/preset-react).
\n

\n\n

Babel wird auch für die Transpilierung von TypeScript, JSX (React), Flow und anderen JavaScript-Erweiterungen verwendet.

\n\n

Installation von Babel

\n\n

Babel wird über npm (Node Package Manager) installiert. Für den Einstieg benötigen Sie Node.js Version 12 oder höher.

\n\n

Erstellen Sie ein neues Projekt und initialisieren Sie es:

\n

mkdir my-babel-project\ncd my-babel-project\nnpm init -y

\n\n

Installieren Sie die grundlegenden Babel-Pakete:

\n

npm install --save-dev @babel/core @babel/cli @babel/preset-env

\n\n

Lassen Sie uns erklären, was wir installiert haben:

\n

\n
• @babel/core — der Kern von Babel. Ohne ihn funktioniert nichts.
\n
• @babel/cli — die Befehlszeilenschnittstelle, mit der Sie Babel vom Terminal aus ausführen können.
\n
• @babel/preset-env — das wichtigste Preset, das automatisch ermittelt, welche Plugins basierend auf den Ziel-Laufzeitumgebungen (Browser oder Node.js-Versionen) benötigt werden.
\n

\n\n

Für die Arbeit mit React installieren Sie zusätzlich:

\n

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

\n\n

Für TypeScript:

\n

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

\n\n

Schnellstart mit einem Codebeispiel

\n\n

Erstellen Sie eine Babel-Konfigurationsdatei (babel.config.json oder .babelrc) im Projektstammverzeichnis:

\n

{\n  "presets": [\n    ["@babel/preset-env", {\n      "targets": {\n        "node": "current"\n      }\n    }]\n  ]\n}

\n\n

Erstellen Sie eine Datei src/index.js mit modernem Code:

\n

// src/index.js\nconst greet = (name) => {\n  return `Hello, ${name}!`;\n};\n\nconst users = ['Alice', 'Bob', 'Charlie'];\nconst greetings = users.map(user => greet(user));\n\nconsole.log(greetings);\n\n// Verwenden von async/await\nconst fetchData = async () => {\n  const data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Kompilieren Sie nun den Code mit Babel:

\n

npx babel src --out-dir dist

\n\n

Nach der Ausführung des Befehls erscheint im Ordner dist die Datei index.js mit dem transformierten Code:

\n

// dist/index.js\n"use strict";\n\nvar greet = function greet(name) {\n  return "Hello, ".concat(name, "!");\n};\n\nvar users = ['Alice', 'Bob', 'Charlie'];\nvar greetings = users.map(function (user) {\n  return greet(user);\n});\n\nconsole.log(greetings);\n\nvar fetchData = async function fetchData() {\n  var data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Beachten