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.
class
zum Beispiel die Syntax.--enable-javascript-harmony
Flag 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")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:
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":
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
quelle
sudo npm install -g --save-dev babel-cli babel-preset-es2015
und$(npm bin)/babel ES6.js --presets es2015
damit es funktioniert, rf: babeljs.io/docs/plugins/preset-es2015Sie 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.
Sie können erwarten, dass ein ähnliches Muster bei anderen neuen ECMAScript-Funktionen auftritt.
quelle
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 ...
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.
quelle
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:
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.
quelle