JavaScript
Transpiling

Einführung

Bemerkungen

Einführung in das Transpiling

Beispiele

ES6 / ES2015 bis ES5 (über Babel ) :

Diese ES2015-Syntax

// ES2015 arrow function syntax 
[1,2,3].map(n => n + 1); 

wird interpretiert und in diese ES5-Syntax übersetzt:

// Conventional ES5 anonymous function syntax 
[1,2,3].map(function(n) {   
    return n + 1; 
});

CoffeeScript zu Javascript (über den integrierten CoffeeScript-Compiler) :

Dieses CoffeeScript

# Existence:
alert "I knew it!" if elvis?

wird interpretiert und in Javascript übersetzt:

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

Wie kann ich transilieren?

Die meisten Compile-to-Javascript-Sprachen haben einen eingebauten Transpiler (wie in CoffeeScript oder TypeScript). In diesem Fall müssen Sie möglicherweise nur den Transpiler der Sprache über die Konfigurationseinstellungen oder ein Kontrollkästchen aktivieren. Erweiterte Einstellungen können auch in Bezug auf den Transpiler festgelegt werden.

Beim Transpiling von ES6 / ES2016-zu-ES5 ist der bekannteste Transpiler Babel .

Warum soll ich durchspulen?

Die am häufigsten genannten Vorteile sind:

• Die Möglichkeit, neuere Syntax zuverlässig zu verwenden
• Kompatibilität unter den meisten, wenn nicht allen Browsern
• Verwendung fehlender / noch nicht nativer Funktionen für Javascript über Sprachen wie CoffeeScript oder TypeScript

Beginnen Sie mit ES6 / 7 mit Babel

Die Browser-Unterstützung für ES6 wächst, aber um sicherzugehen, dass Ihr Code in Umgebungen funktioniert, die ihn nicht vollständig unterstützen, können Sie Babel , den Transpiler ES6 / 7 bis ES5 verwenden. Probieren Sie es aus!

Wenn Sie ES6 / 7 in Ihren Projekten verwenden möchten, ohne sich um die Kompatibilität kümmern zu müssen, können Sie die Knoten- und Babel-CLI verwenden

Schnelles Einrichten eines Projekts mit Babel für die Unterstützung von ES6 / 7

1. Laden Sie Node herunter und installieren Sie ihn
2. Wechseln Sie zu einem Ordner und erstellen Sie ein Projekt mit Ihrem bevorzugten Befehlszeilenprogramm

~ npm init

3. Installieren Sie die Babel-CLI

~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015

4. Erstellen Sie einen scripts zum Speichern Ihrer .js Dateien und anschließend einen Ordner dist/scripts in dem die vollständig kompatiblen Dateien gespeichert werden.
5. Erstellen Sie eine .babelrc Datei im Stammordner Ihres Projekts und schreiben Sie diese darauf

{
    "presets": ["es2015"]
}

6. Bearbeiten Sie Ihre package.json Datei (die beim package.json npm init ), und fügen Sie das build Skript zur scripts Eigenschaft hinzu:

{
    ...
    "scripts": {
    ... ,
    "build": "babel scripts --out-dir dist/scripts"
    },
    ...
}

7. Viel Spaß beim Programmieren in ES6 / 7
8. Führen Sie die folgenden Schritte aus, um alle Ihre Dateien auf ES5 zu verschieben

~ npm run build

Für komplexere Projekte sollten Sie sich Gulp oder Webpack ansehen