Sto cercando un modo per eseguire il codice ECMAScript 6 nella console del mio browser, ma la maggior parte dei browser non supporta le funzionalità che sto cercando. Ad esempio, Firefox è l'unico browser che supporta le funzioni freccia.
Esiste un modo (estensione, script utente, ecc.) Che posso eseguire queste funzioni su Chrome?
Risposte:
In Chrome, la maggior parte delle funzioni ES6 sono nascoste dietro un flag chiamato "Funzioni JavaScript sperimentali". Visita chrome://flags/#enable-javascript-harmony, abilita questo flag, riavvia Chrome e otterrai molte nuove funzionalità .
Le funzioni freccia non sono ancora implementate in V8 / Chrome , quindi questo flag non "sblocca" le funzioni freccia.
Poiché le funzioni freccia sono un cambiamento di sintassi, non è possibile supportare questa sintassi senza cambiare il modo in cui JavaScript viene analizzato. Se ti piace sviluppare in ES6, potresti scrivere codice ES6 e utilizzare un compilatore da ES6 a ES5 per generare codice JavaScript compatibile con tutti i browser (moderni) esistenti.
Ad esempio, vedi https://github.com/google/traceur-compiler . Al momento della scrittura, supporta tutte le nuove funzionalità di sintassi di ES6 . Insieme alla bandiera menzionata nella parte superiore di questa risposta, ti avvicinerai molto al risultato desiderato.
Se si desidera eseguire la sintassi ES6 direttamente dalla console, è possibile provare a sovrascrivere il programma di valutazione JavaScript della console (in modo che il preprocesor di Traceur venga eseguito prima di eseguire il codice). Se ti va di farlo, dai un'occhiata a questa risposta per sapere come modificare il comportamento degli strumenti di sviluppo.
classsintassi, per esempio.
--enable-javascript-harmonyflag è impostato: /(?<!a)b/.test('ab')(e genera l'errore successivo se il flag non è impostato: "Sintassi non rilevataErrore: espressione regolare non valida: / (? <! A) b /: gruppo non valido")
Babel è un ottimo transpiler per provare ES6. È possibile eseguire ES6 nel browser nella sezione "Provalo" del loro sito Web. Funziona in modo simile a jsfiddle.
Frecce per esempio:
let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);Babel "traspila", ovvero traduce ES6 in javascript ES5 che può essere eseguito con l'attuale tecnologia del browser. Puoi installare Babel tramite npm install -g babel. Una volta installato, è possibile salvare l'esempio di frecce sopra in un file. Supponiamo di chiamare il file "ES6.js". Supponendo che tu abbia installato il nodo, quindi nella riga di comando invia l'output al nodo:
babel ES6.js | node
E vedrai l'output 2. È possibile salvare il file tradotto in modo permanente con il comando:
babel ES6.js --out-file output.js
output.js "traspilato":
"use strict";
var add = function (x, y) {
return x + y;
};
var result = add(1, 2);
console.log(result);Che ovviamente può essere eseguito in qualsiasi browser moderno.
ES6 è un obiettivo in rapido movimento. Fare riferimento alla Tabella di compatibilità per trovare le funzionalità supportate da Transpiler come Traceur e Babel e il supporto del browser. Puoi anche espandere il grafico per vedere il test utilizzato per verificare la compatibilità:
Per provare il bleeding edge ES6 in un browser, prova i canali notturni di Firefox o Chrome
sudo npm install -g --save-dev babel-cli babel-preset-es2015e $(npm bin)/babel ES6.js --presets es2015farlo funzionare, rf: babeljs.io/docs/plugins/preset-es2015
Probabilmente stai cercando uno dei seguenti link:
L'uso di Babel nella pipeline di sviluppo traspila automaticamente (converte) il tuo JavaScript per renderlo compatibile con più browser. Oppure, se stai usando TypeScript, puoi riposare facilmente; il tuo codice è già stato traspilato.
Non vuoi configurare un transpiler (come Babel / Typescript) o vuoi giocare con funzionalità non ancora supportate dal tuo transpiler?
Puoi abilitare le funzioni sperimentali di ECMAScript nel tuo browser andando su chrome: // flags / # enable-javascript-harmony e abilitando il flag Harmony JavaScript. Per alcune funzioni, potrebbe essere necessario utilizzare Chrome Canary con il flag Harmony JavaScript abilitato.
Le nuove API JavaScript di solito non sono coperte da Babel e avranno il loro flag Chrome.
Questa domanda menzionava specificamente l'uso delle funzioni freccia. Le funzioni freccia sono ora supportate in modo nativo in tutti i browser tranne IE e Opera Mini. Vedi caniuse .
Un tempo era un po 'difficile se si voleva giocare con le funzioni freccia. La storia di seguito mostra cosa ci è voluto in diversi punti nel tempo per giocare con questa funzione.
1) Inizialmente, le funzioni freccia funzionavano solo in Chrome Canary con la
chrome://flags/#enable-javascript-harmonybandiera abilitata. Sembra che questa funzionalità sia stata almeno parzialmente implementata dalla versione 39.2) Quindi, le funzioni freccia sono state rese disponibili in Google Chrome dietro il flag Harmony JavaScript.
3) Infine, in Google Chrome 45 , le funzioni freccia erano abilitate per impostazione predefinita.
Puoi aspettarti che un modello simile accada con altre nuove funzionalità di ECMAScript.
Usa semplicemente la modalità rigorosa , in una chiusura (non necessaria, ma è un ottimo approccio) e Chrome sarà in grado di eseguire il tuo codice come ES6 ...
(function(){
'use strict';
//your ES6 code...
})();Ecco un esempio ... http://jsbin.com/tawubotama/edit?html,js,console,output prova a rimuovere la riga della modalità stric use e riprova, verrà registrato un errore sulla console.
A partire dal 2015 novembre, Firefox e Edge hanno guidato le gare ES6, usali se vuoi sperimentare funzioni che mancano a Chrome. Edge ha classe / sottoclasse e Firefox ha Proxy ; tra loro hai praticamente tutte le funzionalità ES6 .
Se devi utilizzare ES6 nella console di Chrome, esiste un modo semplice, provato e vero:
Essere pazientare.
I browser stanno adottando ES6, persino Safari, che ha trascinato i piedi sulla maggior parte degli standard HTML5. Dai tempo a Google e implementeranno le funzionalità ES6 una per una. Ad esempio, le funzioni freccia sono ora disponibili, nel canale di produzione e senza flag.
Non aspettarti estensioni; non puoi tradurre ES6 in ES5 riga per riga, quindi non possiamo semplicemente estendere la console con Babel .
È vero che esiste un esperimento js flag, ma esiste per buoni motivi. V8 ha proxy ma nella vecchia sintassi (non standard) e presenta problemi di sicurezza . Anche la sua destrutturazione è incompleta: scoprirai che in alcuni casi funziona, in alcuni casi non funziona.
Se vuoi semplicemente giocare a ES6, gioca semplicemente con Edge / Firefox. Entrambi coprono quasi interamente Babel, hanno console e debugger e hanno funzionalità che Babel non può fornire.