Verwenden von ECMAScript 6

Ich suche nach einer Möglichkeit, ECMAScript 6-Code in der Konsole meines Browsers auszuführen, aber die meisten Browser unterstützen die von mir gesuchten Funktionen nicht. Zum Beispiel ist Firefox der einzige Browser, der Pfeilfunktionen unterstützt.

Gibt es eine Möglichkeit (Erweiterung, Userscript usw.), diese Funktionen in Chrome auszuführen?

In Chrome sind die meisten ES6-Funktionen hinter einem Flag namens "Experimentelle JavaScript-Funktionen" versteckt. Besuchen Sie chrome://flags/#enable-javascript-harmony, aktivieren Sie dieses Flag, starten Sie Chrome neu und Sie erhalten viele neue Funktionen .

Pfeilfunktionen sind in V8 / Chrome noch nicht implementiert , daher werden durch dieses Flag die Pfeilfunktionen nicht "entsperrt".

Da Pfeilfunktionen eine Syntaxänderung darstellen, ist es nicht möglich, diese Syntax zu unterstützen, ohne die Art und Weise zu ändern, wie JavaScript analysiert wird. Wenn Sie gerne in ES6 entwickeln, können Sie ES6-Code schreiben und mithilfe eines ES6-zu-ES5-Compilers JavaScript-Code generieren, der mit allen vorhandenen (modernen) Browsern kompatibel ist.

Siehe beispielsweise https://github.com/google/traceur-compiler . Zum Zeitpunkt des Schreibens werden alle neuen Syntaxfunktionen von ES6 unterstützt . Zusammen mit der oben in dieser Antwort genannten Flagge kommen Sie dem gewünschten Ergebnis sehr nahe.

Wenn Sie die ES6-Syntax direkt von der Konsole aus ausführen möchten, können Sie versuchen, den JavaScript-Evaluator der Konsole zu überschreiben (sodass der Traceur-Präprozessor ausgeführt wird, bevor der Code ausgeführt wird). Wenn Sie dies möchten, sehen Sie sich diese Antwort an, um zu erfahren, wie Sie das Verhalten der Entwicklertools ändern können.

Babel ist ein großartiger Transpiler zum Ausprobieren von ES6. Sie können ES6 im Browser im Abschnitt "Ausprobieren" der Website ausführen. Es funktioniert ähnlich wie jsfiddle.

Pfeile zum Beispiel:

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

zeigt das Ergebnis an 2 .

Babel "transpiles", dh ES6 in ES5-Javascript übersetzen, das von der aktuellen Browsertechnologie ausgeführt werden kann. Sie können Babel über installieren npm install -g babel. Nach der Installation können Sie das obige Pfeilbeispiel in einer Datei speichern. Angenommen, wir nennen die Datei "ES6.js". Angenommen, Sie haben den Knoten installiert, dann wird an der Befehlszeilenleitung die Ausgabe an den Knoten gesendet:

babel ES6.js | node

Und Sie werden die Ausgabe sehen 2. Sie können die übersetzte Datei dauerhaft mit dem folgenden Befehl speichern:

babel ES6.js --out-file output.js

output.js "transpiled":

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

Was natürlich in jedem modernen Browser ausgeführt werden kann.

Beispiel mit Klassen

ES6 ist ein sich schnell bewegendes Ziel. In der Kompatibilitätstabelle finden Sie Funktionen, die von Transpilern wie Traceur und Babel unterstützt werden, sowie Browserunterstützung. Sie können das Diagramm sogar erweitern, um den Test zur Überprüfung der Kompatibilität anzuzeigen:

Um das neueste ES6 in einem Browser auszuprobieren, probieren Sie die Firefox Nightly Build- oder Chrome Release-Kanäle

Sie suchen wahrscheinlich nach einem der folgenden Links:

Babel ( für Webpack , für Gulp , für Grunt , für andere Frameworks und Sprachen )

Wenn Sie Babel in Ihrer Entwicklungspipeline verwenden, wird Ihr JavaScript automatisch transpiliert (konvertiert), damit es browserübergreifend kompatibel ist. Wenn Sie TypeScript verwenden, können Sie sich auch einfach ausruhen. Ihr Code wird bereits transpiliert.

Sie möchten keinen Transpiler (wie Babel / Typescript) einrichten oder mit Funktionen spielen, die Ihr Transpiler noch nicht unterstützt?

Sie können experimentelle ECMAScript-Funktionen in Ihrem Browser aktivieren, indem Sie zu chrome: // flags / # enable-javascript-harmony gehen und das JavaScript Harmony-Flag aktivieren. Für einige Funktionen müssen Sie möglicherweise Chrome Canary mit aktiviertem JavaScript Harmony-Flag verwenden.

Neue JavaScript-APIs werden normalerweise nicht von Babel abgedeckt und haben ein eigenes Chrome-Flag.

Verwenden von Pfeilfunktionen

Diese Frage wurde speziell mit Pfeilfunktionen erwähnt. Pfeilfunktionen werden jetzt in allen Browsern außer IE und Opera Mini nativ unterstützt. Siehe caniuse .

Früher war es etwas schwierig, mit Pfeilfunktionen zu spielen. Der folgende Verlauf zeigt, was zu verschiedenen Zeitpunkten erforderlich war, um mit dieser Funktion zu spielen.

1) Pfeilfunktionen funktionierten zunächst nur in Chrome Canary mit chrome://flags/#enable-javascript-harmonyaktiviertem Flag. Es sieht so aus, als ob diese Funktionalität zumindest teilweise von Version 39 implementiert wurde.

2) Dann wurden Pfeilfunktionen in verfügbar gemacht Google Chrome hinter dem JavaScript Harmony-Flag .

3) Und schließlich wurden in Google Chrome 45 die Pfeilfunktionen standardmäßig aktiviert.

Sie können erwarten, dass ein ähnliches Muster bei anderen neuen ECMAScript-Funktionen auftritt.

Verwenden Sie einfach den strikten Modus " Verwenden" für einen Abschluss (nicht erforderlich, aber ein großartiger Ansatz), und Chrome kann Ihren Code als ES6 ausführen ...

(function(){
  'use strict';
  //your ES6 code...
})();

Hier ein Beispiel ... http://jsbin.com/tawubotama/edit?html,js,console,output Versuchen Sie, die Zeile " Stric- Modus verwenden" zu entfernen , und versuchen Sie es erneut. Ein Fehler auf der Konsole wird protokolliert.

Seit November 2015 führen Firefox und Edge die ES6-Rennen an. Verwenden Sie sie, wenn Sie Funktionen ausprobieren möchten, die Chrome nicht bieten. Edge hat Klasse / Unterklasse und Firefox hat Proxy ; dazwischen haben Sie praktisch alle ES6-Funktionen .

Wenn Sie ES6 in der Chrome-Konsole verwenden müssen, gibt es einen einfachen, bewährten Weg:

Sei geduldig.

Browser setzen auf ES6 - sogar auf Safari, der die meisten HTML5-Standards in den Griff bekommen hat. Geben Sie Google Zeit und sie werden die ES6-Funktionen nacheinander implementieren. Beispielsweise sind jetzt Pfeilfunktionen im Produktionskanal und ohne Flag verfügbar.

Erwarten Sie keine Erweiterungen. Sie können ES6 nicht zeilenweise in ES5 übersetzen, daher können wir die Konsole nicht einfach mit Babel erweitern .

Es ist wahr, dass es ein Experiment js Flag gibt, aber es existiert aus guten Gründen. V8 hat Proxy, aber in alter (nicht standardmäßiger) Syntax und hat Sicherheitsprobleme . Die Destrukturierung ist ebenfalls unvollständig: Sie werden feststellen, dass es in einigen Fällen funktioniert, in einigen Fällen nicht.

Wenn Sie nur ES6 spielen möchten, spielen Sie einfach mit Edge / Firefox. Beide decken fast das gesamte Babel ab, verfügen über eine Konsole und einen Debugger sowie über Funktionen, die Babel nicht bereitstellen kann.