Verwenden von ECMAScript 6

162

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?

Spedwards
quelle

Antworten:

158

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.

Rob W.
quelle
5
Es gibt auch ein ScratchJS, ein Entwicklertool für Chrome: chrome.google.com/webstore/detail/scratch-js/…
Pixel 67
8
Pfeilfunktionen sind jetzt in der neuesten Version von Chrome vollständig implementiert. Dieser Tipp bleibt jedoch für andere ES6-Funktionen nützlich. Wie classzum Beispiel die Syntax.
Adam Brown
7
Diese Antwort ist jetzt größtenteils veraltet.
Michał Perłakowski
@ Gothdo Die Details sind zwar veraltet (Pfeilfunktionen werden heutzutage gut unterstützt), aber die allgemeinen Ratschläge zum Aktivieren experimenteller JS-Funktionen sind immer noch wahr. Beispielsweise sind Look-Behinds im regulären Ausdruck standardmäßig weiterhin deaktiviert. Folgendes wird false zurückgeben, wenn das --enable-javascript-harmonyFlag gesetzt ist: /(?<!a)b/.test('ab')(und den nächsten Fehler auslösen, wenn das Flag nicht gesetzt ist: "Nicht erfasster Syntaxfehler: Ungültiger regulärer Ausdruck: / (? <! A) b /: Ungültige Gruppe")
Rob W
Es ist nicht veraltet, hatte das gleiche Problem mit arrow_functions für einen Client mit einer alten Version von Windows. Die Flagge hat es geschafft, danke!
Jaime Yule
47

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:

Geben Sie hier die Bildbeschreibung ein

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

P.Brian.Mackey
quelle
Wenn Sie noch nichts davon gehört haben, checken Sie jspm aus. Sie können CommonJS-, AMD- und ES6-Module verwenden. Es basiert auf Traceur oder Babel, um ES6 zu ES5 im Browser vor der Ausführung zu "kompilieren". Einer der netten Vorteile von jspm ist die Möglichkeit, npm-Module oder (mit ein wenig Konfiguration) Module von Github zu verwenden. Weitere Modul-Repositorys werden voraussichtlich in Zukunft hinzugefügt. jspm hat auch ziemlich gute Browser-Unterstützung. Nicht getestet, aber ich glaube, es ist IE9 +. (Ihr ES6-Compiler wirkt sich auch darauf aus.)
Kevin Dice
In Ubuntu 17.04 muss ich tun sudo npm install -g --save-dev babel-cli babel-preset-es2015und $(npm bin)/babel ES6.js --presets es2015damit es funktioniert, rf: babeljs.io/docs/plugins/preset-es2015
Fruit
12

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.

JS Harmony Screenshot

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.

wp-overwatch.com
quelle
TypeScript wird mit einem großartigen Transpiler geliefert. Babel ist ebenfalls ein gängiger JavaScript-Transpiler. Wenn Sie Ihren es6-Code auf es5 transpilieren, müssen Sie nicht auf die Browserunterstützung warten, um die Attraktivität von es6 zu nutzen!
wp-overwatch.com
6

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.

Miguel Lattuada
quelle
3

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.

Schafig
quelle
2
Safari ist tatsächlich allen Desktop-Browsern voraus und ios10 mobile ist Chrome für Android in der ES6-Unterstützung voraus. kangax.github.io/compat-table/es6
Louis Duran
@Louis Vor iOS 10 hat Safari die aufkommende Web-Technologie vernachlässigt . Selbst jetzt, ein halbes Jahr danach, stecken 21% der alten iOS-Benutzer mit ES5 fest, da ältere iOS nicht nur den Browser aktualisieren können und immer noch die einzige Kraft sind, die die ES6-Aboption in mobilen Entwicklern zurückhält (98% Androids können die neuesten Versionen ausführen) Chrom). Ich werde diese Antwort unverändert lassen, da sowohl Q als auch A veraltet sind. Wenn Sie jedoch nur ein wenig über ES6 hinausblicken, bleibt Safari 10 immer noch zurück, da die asynchrone Funktion fehlt oder die API abgerufen wird.
Sheepy