Erste Schritte mit dem Erlernen von ES6

Wenn Sie ES6 verwenden möchten, werden Sie mit einer Liste von Fragen konfrontiert: Transpiler, Shims, Browserunterstützung … In diesem Artikel gebe ich Ihnen eine detaillierte Anleitung, wie Sie sicherstellen können, dass Sie mit ES6 richtig beginnen, und Anweisungen dazu wie Sie auf einfache Weise einen Workflow für die Verwendung von ES6 in der Produktion einrichten können.

Überlegungen vor der Entscheidung für ES6

Bevor Sie sich entscheiden, ES6 in Ihrer App zu verwenden, sollten Sie einige Überlegungen anstellen.
Ist es mir wichtig, dass sich die ES6-Spezifikation ändert?

  • Was sind meine Zielplattformen?
  • Muss ich auf älteren Geräten oder Browsern debuggen?
  • Entwickle ich eine leistungskritische Anwendung?
    Lassen Sie uns jedes davon ansprechen, bevor wir weiter gehen.

ES6-Spezifikationsänderungen

Die ES6-Spezifikation ist noch nicht abgeschlossen. Die Funktionsweise bestimmter Funktionen kann sich in zukünftigen Versionen ändern. Das bedeutet, dass sich die Tools, die Sie verwenden müssen, damit ES6-Funktionen in der aktuellen JavaScript-Version funktionieren, ebenfalls ändern und Ihren vorhandenen Code beschädigen können. Wenn Sie sich Sorgen über mögliche Änderungen an der Spezifikation und das Brechen Ihres Codes machen, sollten Sie es sich zweimal überlegen, bevor Sie auf den ES6-Wagen aufspringen.

Zielplattformen

Ihre Zielplattformen – Geräte, Browser usw. – sollten bei der Entscheidung, ob Sie ES6 verwenden oder nicht, im Auge behalten werden. Die Verwendung von ES6 erfordert entweder die Verwendung eines Transpilers oder eines Shims. Wir werden später in diesem Artikel mehr darüber sprechen, aber wenn Sie einen Transpiler verwenden müssen, wirkt sich dies sowohl auf Ihre Fähigkeit zum Debuggen des Codes als auch auf die Leistung des Codes aus. Wenn Sie einer der armen Leute sind, die sich immer noch mit IE6 oder sogar IE7 auseinandersetzen müssen, dann müssen Sie möglicherweise eine kleinere Teilmenge von ES6-Funktionen verwenden.

Debuggen

Wenn Sie am Ende einen Transpiler verwenden, generiert dieser kompilierte JS-Dateien für Sie. Manchmal kann es schwierig sein, dieser Ausgabe zu folgen, was das Debuggen erschweren kann. Glücklicherweise unterstützen moderne Browser Quellkarten, was bedeutet, dass Sie sich darüber nicht so viele Gedanken machen müssen. Eine Quellzuordnung ermöglicht es Ihnen, den ursprünglichen ES6-Code anstelle des kompilierten ES5-Codes anzuzeigen. Wenn Sie jedoch auf einige ältere Plattformen abzielen, unterstützen diese möglicherweise keine Quellkarten. Viele ältere Browser unterstützen ES5 problemlos, und der transpilierte Code funktioniert in ihnen, aber wenn Sie in diesen Browsern debuggen müssen, kann es sich als schwieriger erweisen. Dies ist weniger problematisch, wenn Sie eine Unterlegscheibe verwenden. Der Code in diesen wird von einem Menschen geschrieben und nicht generiert und sollte daher leichter verständlich sein.

Leistung

Dies ist auch eine primär transpilerbezogene Überlegung. Die ES6-Transpiler nehmen keine Leistungsoptimierungen basierend auf dem Browser vor, der den Code ausführt. In einigen Fällen kann dies zu Code führen, der nicht in allen Browsern so gut funktioniert. Wenn Sie an etwas arbeiten, das eine sehr hohe Leistung haben muss, wie z. B. Spiele, möchten Sie vielleicht bei „Standard“-JavaScript bleiben. Dies bedeutet jedoch nicht, dass Sie ES6 überhaupt nicht verwenden sollten – vermeiden Sie einfach die Verwendung von ES6-Funktionen in leistungskritischen Abschnitten Ihres Codes, wenn Sie damit Probleme haben.

Wahl: Verwenden Sie einen Transpiler oder verwenden Sie ein Shim?

Wenn Sie sich für ES6 entscheiden, müssen Sie sich entscheiden: Welche Funktionen von ES6 möchten Sie nutzen? ES6 bietet sowohl neue Syntax, wie z let oder das Baukastensystem, sondern stellt auch neue Objekte und Funktionen auf bestehenden Objekten zur Verfügung. Wenn Sie die neue Syntax verwenden möchten, benötigen Sie einen Transpiler. Wenn Sie nur die zusätzlichen Objekte und Funktionen wie Promises, die neuen String- oder Math-Funktionen oder ähnliches verwenden möchten, können Sie ein Shim verwenden. Shims sind einfacher und einfacher zu handhaben, da Sie sie nur vor anderen Skripts in Ihre Seiten- oder Knoten-App einfügen müssen. Ein Shim kann jedoch keine syntaktischen Merkmale unterstützen. Wenn Sie diese wollen, brauchen Sie einen Transpiler.

ES6-Shim einrichten

Wenn Sie nur die neuen Objekte und Funktionen nutzen möchten, können Sie einen Shim verwenden. Wenn Sie eine neue Syntax wünschen, fahren Sie mit dem Traceur -Teil fort. Dafür verwenden wir ES6 Shim.

ES6-Shim in nodejs

Das Einrichten des Shims im Knoten ist sehr einfach: Führen Sie npm install es6-shim aus. Fügen Sie dann ein require('es6-shim'); in Ihren Node-Skripten.

ES6-Shim im Browser

ES6 Shim hat eine ziemlich breite Browserunterstützung, sogar bis hinunter zu Internet Explorer 8. Der einfachste Weg, um mit dem Browser zu beginnen, besteht darin, einfach ein Skript-Tag in Ihre Seite einzufügen:

<script src="path/to/es6-shim.js"></script>

Sie können die Datei von herunterladen ES6 Shim GitHub-Seite. Sie können es auch mit einem der alternativen Ansätze installieren, die auf derselben Seite aufgeführt sind.

Unter Verwendung des Shims

Stellen Sie einfach sicher, dass die Shim-Datei vor allen Skripts geladen wird, die von den ES6-Funktionen abhängen. Die Verwendung in der Produktion erfordert keine Änderungen.

Einrichten des Traceur-Transpilers

Es gibt zwei Möglichkeiten, Traceur zu verwenden:

  1. Fügen Sie den Traceur-Compiler in Ihre Seite/Ihren Knoten ein
  • Kompilieren Sie den Code auf dem Server vor

Die erste Option eignet sich gut zum schnellen Testen von Dingen, ist jedoch mit einem Leistungseinbruch verbunden. Der JS-Code wird spontan auf der Seite kompiliert, daher ist er nicht so schnell wie das Ausführen von vorkompiliertem Code. Wenn Sie vorhaben, ES6-Code im Browser auszuführen, empfehle ich die Verwendung von Ansatz Nr. 2, aber Nr. 1 ist mit nodejs in Ordnung.

Traceur-Workflow mit nodejs

Im Knotenland sind die Dinge ziemlich einfach. Zuerst brauchen wir das Traceur-Transpiler-Modul: npm install –save traceur Wir haben zwei typische Szenarien für die Verwendung von ES6:

  1. Laden Sie die gesamte App mit ES6-Modulen, ein typischer Fall mit neuen Anwendungen
  • Kombinieren Sie Node-Module und ES6-Module, ein typischer Fall bei bestehenden Anwendungen
  • Warnung: Anstelle von Traceur könnten Sie versucht sein, die Flags –harmony* von node zu verwenden. Dies sind experimentelle Funktionen und werden nicht empfohlen.

Laden Sie die gesamte App als ES6

Wenn Ihre App hauptsächlich in ES6 geschrieben ist, werden Sie wahrscheinlich diese Methode verwenden wollen. Sie können weiterhin die eigenen Knoten verwenden require bei Bedarf damit laden! Diese Methode funktioniert so, dass Sie einen Einstiegspunkt für Ihre Anwendung als normales Knotenmodul schreiben. In diesem Einstiegspunkt laden Sie eine ES6-Datei, die Ihre Anwendung bootet. Zuerst erstellen wir die Bootstrap-Datei:


export function run() {
  console.log('Hi there');
}

Erstellen Sie als Nächstes die Einstiegspunktdatei. Dies ist, was wir verwenden werden node:


var traceur = require('traceur');
traceur.require.makeDefault(function(file) {
  return file.indexOf('node_modules') == -1;
});
 
require('./bootstrap').run();

Jetzt können wir den obigen Code mit node: node app.js ausführen.

Die zweite Codezeile macht Traceur’s require eigene Knoten überschreiben. Wir verwenden eine einfache Überprüfung des Dateipfads, um sicherzustellen, dass wir keine Dateien in node_modules über Traceur ausführen, da dies keinen Zweck erfüllen würde. Das Schöne daran ist, dass Traceur im Wesentlichen transparent wird: Wir können Node-Module innerhalb von ES6-Modulen verwenden, wir können require verwenden usw.

Verwenden von Knotenmodulen in ES6

Wir können dafür entweder die Importsyntax des erforderlichen oder des ES6-Moduls verwenden. Verwenden Sie beispielsweise require:


var express = require('express'); 
export function run() {
  console.log('Hi there');
  var app = express();
}

Oder mit ES6-Modulimporten:


import * as express from 'express'; 
export function run() {
  console.log('Hi there');
  var app = express();
}

Mischen und Anpassen von Knotenmodulen und ES6-Modulen

Dieser Ansatz kann verwendet werden, wenn Sie eine vorhandene App haben, in der Sie mit der Verwendung von ES6-Modulen beginnen möchten. Bei diesem Ansatz binden wir einfach traceur in unser Modul ein und verwenden direkt die require-Funktion daraus:

var traceur = require('traceur'); 
var example = traceur.require('./example.js');

example.whatever();

Traceur-Workflow für Browser

Natürlich ist das Leben im Browser-Land nicht so einfach. Wir müssen Traceur als Befehlszeilentool installieren und benötigen auch eine andere Datei davon.

Konfiguration

Installieren Sie zuerst das Tool: npm install -g traceur Sie können es jetzt mit traceur von der Befehlszeile aus ausführen. Wir benötigen auch die Datei traceur-runtime.js. Sobald Sie Traceur installiert haben, finden Sie es in Ihrem npm-Verzeichnis. Diese befindet sich normalerweise in /usr/local/lib/node_modules/traceur/bin/traceur-runtime.js. Kopieren Sie die Datei, damit Sie sie in die HTML-Seite einfügen können. Wenn Sie die Datei nicht finden können, können Sie Traceur mit npm install traceur in einem lokalen node_modules installieren. Dann befindet sich die Datei im aktuellen Verzeichnis unter node_modules/traceur/bin/traceur-runtime.js

Einrichten eines ES6-Moduls auf einer Webseite

Nehmen wir eine einfache Projektstruktur an, bei der Quellcodedateien in src/ platziert werden und die Build-Ausgabe in build/ erfolgt. Es wird davon ausgegangen, dass sich die Traceur-Runtime-Datei in lib/traceur-runtime.js befindet. Zunächst erstellen wir eine einfache Beispieldatei:


export function run() {
  console.log('Hi there');
}

Als Nächstes können wir es mit Traceur in ES5 konvertieren: traceur –out build/bundle.js src/app.js Mit dem Flag –out weisen wir Traceur an, alle Abhängigkeiten unseres app.js-Skripts in die zu bündeln bundle.js-Datei. Abschließend der HTML-Code:

<!DOCTYPE html>
<html>
  <head>
    <script src="lib/traceur-runtime.js"></script>
    <script src="build/bundle.js"></script>
 
    <script>
      var m = System.get('src/app.js');
 
      
      m.run();
    </script>
  </head>
 
  <body>
  </body>
</html>

Wir müssen die Laufzeit und unser Bundle einschließen. Dann verwenden wir den Modullader des ES6-Systems, um Zugriff auf das Modul zu erhalten, und rufen die run Funktion, die wir darin exportiert haben.

Verwenden von Importen und anderen Bibliotheken

Wenn Sie mehrere ES6-Module erstellen, ist die Verwendung mit diesem Setup einfach:


import * as foo from 'foo';
 
export function run() {
  console.log('Hi there');
}

Sie können beliebige ES6-Module wie gewohnt importieren. Traceur verarbeitet die Abhängigkeiten und bündelt sie automatisch in der Ausgabedatei. Die Verwendung anderer Bibliotheken wie jQuery funktioniert genauso wie ohne ES6:

<script src="path/to/jquery.js"></script>
<script src="lib/traceur-runtime.js"></script>
<script src="build/bundle.js"></script>
 
<script>
  var m = System.get('src/app.js');
  m.run();
</script>
//src/app.js
export function run() {
  $(() => {
    $(document.body).html('hello world');
  });
}

Sie fügen einfach alle gewünschten Bibliotheken vor Ihre Skripts ein, und die von ihnen bereitgestellten Globals sind auch in Ihren ES6-Modulen verfügbar.

Quellkarten

Lassen Sie uns abschließend einen Blick darauf werfen, wie Sie Quellzuordnungen erhalten, um das Debuggen zu vereinfachen.

Quellzuordnungen für Knoten

Um Quellkarten mit Knoten zu aktivieren, npm install –save traceur-source-maps Und fügen Sie es in Ihr Skript ein:

var traceur = require('traceur');
require('traceur-source-maps').install(traceur);

Quellkarten für Browser

Bei Browsern müssen wir nur die Traceur-Befehlsparameter ein wenig anpassen: traceur –source-maps –out build/bundle.js src/app.js

Abschließend

Mit den richtigen Tools können wir bereits heute damit beginnen, die in zukünftigen Versionen von JavaScript verfügbaren Funktionen zu nutzen. Wie üblich ist es nicht ohne mögliche Nachteile, aber oft sind sie je nach Anwendungsfall nicht relevant. Wenn Sie mehr darüber erfahren möchten, wie ES6 Ihr JavaScript verbessern kann, habe ich auch darüber geschrieben die praktischen Vorteile der ES6-Funktionen. Bleibt die letzte Frage: Wann kann man auf Shims und Traceur verzichten? Diese Frage ist ziemlich schwer zu beantworten, aber höchstwahrscheinlich wird es mehrere Jahre dauern. Sie können kangax’s hilfreich verwenden ES6-Kompatibilitätstabellen um nach bestimmten Funktionen zu suchen, von denen einige bereits von mehr als einem Browser unterstützt werden.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *