Domanda Utilizzo di ECMAScript 6


Sto cercando un modo per eseguire il codice ECMAScript 6 nella console del mio browser, ma la maggior parte dei browser non supporta la funzionalità che sto cercando. Ad esempio, Firefox è l'unico browser che supporta le funzioni di freccia.

C'è un modo (estensione, userscript, ecc.) Posso eseguire queste funzionalità su Chrome?


145
2018-06-03 06:22


origine


risposte:


In Chrome, la maggior parte delle funzionalità di ES6 sono nascoste dietro un flag chiamato "Funzionalità JavaScript sperimentali". Visita chrome://flags/#enable-javascript-harmony, attiva questo flag, riavvia Chrome e otterrai molte nuove funzionalità.

Le funzioni della freccia sono non ancora implementato in V8 / Chrome, quindi questo flag non "sbloccherà" le funzioni di freccia.

Poiché le funzioni delle frecce sono una modifica della sintassi, non è possibile supportare questa sintassi senza modificare il modo in cui viene analizzato il codice JavaScript. Se ti piace lo sviluppo in ES6, puoi scrivere codice ES6 e utilizzare un compilatore ES6-to-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 all'inizio di questa risposta, ti avvicinerai molto al risultato desiderato.

Se si desidera eseguire la sintassi ES6 direttamente dalla console, è possibile provare a sovrascrivere l'analizzatore JavaScript della console (in modo tale che il preprocessore di Traceur venga eseguito prima dell'esecuzione del codice). Se ti va di farlo, dai un'occhiata questa risposta per imparare come modificare il comportamento degli strumenti di sviluppo.


145
2018-06-03 09:29



Babele è un ottimo transpiler per provare ES6. Puoi 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);

visualizza il risultato  2.

Babel "traspone", ovvero traduce ES6 in javascript ES5 che può essere eseguito dalla tecnologia corrente del browser. Puoi installare Babel via npm install -g babel. Una volta installato, puoi salvare l'esempio delle frecce sopra in un file. Diciamo che chiamiamo il file "ES6.js". Supponendo di aver installato il nodo, quindi nella riga di comando inserisci l'output nel nodo:

babel ES6.js | node

E vedrai l'output 2. Puoi salvare il file tradotto in modo permanente con il comando:

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);

Che, naturalmente, può essere eseguito in qualsiasi browser moderno.

Esempio utilizzando le classi

ES6 è un obiettivo in rapido movimento. Fare riferimento a Tabella di compatibilità per trovare funzionalità supportate da transpilers come Traceur e Babel e supporto browser. Puoi anche espandere il grafico per vedere il test utilizzato per verificare la compatibilità:

enter image description here

Per provare il bleeding edge ES6 in un browser, prova il Firefox nightly build o Canali di rilascio di Chrome


41
2018-03-07 04:05



Utilizzo di ECMAScript Next (ES6, ES7, ecc.)

Per garantire che le nuove funzioni funzionino per tutti i visualizzatori, ti consigliamo di utilizzare un transpiler. Un transpiler ti consente di utilizzare le più recenti funzionalità ECMAScript trasformando il tuo codice in un codice che è compatibile su tutti i browser. Di seguito sono riportati alcuni buoni transpilers.




Non vuoi impostare un transpiler o vuoi giocare con funzionalità non ancora supportate dal tuo transpiler?

Puoi abilitare le funzionalità sperimentali di ECMAScript nel tuo browser andando a chrome: // flags / # enable-javascript-armonia e abilitando il flag JavaScript Harmony. Per alcune funzioni, potrebbe essere necessario utilizzare Canarino cromato con quel flag abilitato.

JS harmony screenshot


Utilizzo delle funzioni freccia

Questa domanda specificamente menzionata utilizzando le funzioni di freccia. Le funzioni freccia sono ora supportate in modo nativo in tutti i browser eccetto IE e Opera Mini. Vedere posso usare.

Era un po 'difficile se volessi giocare con le funzioni delle frecce. La cronologia sottostante mostra ciò che è stato necessario in diversi momenti per giocare con questa funzione.

1) Inizialmente, le funzioni freccia funzionavano solo in Canarino cromato con il    chrome://flags/#enable-javascript-harmony flag abilitato. Sembra   come questa funzionalità era almeno parzialmente implementato di   versione 39.

2) Quindi, le funzioni di freccia sono state rese disponibili in Google Chrome   dietro il flag JavaScript Harmony.

3) E infine, in Google Chrome 45, funzioni freccia dove abilitato da   predefinito.

È possibile aspettarsi che un modello simile si verifichi con altre nuove funzionalità di ECMAScript.


9
2017-08-29 14:41



Basta usare il usare rigorosamente modalità, in una chiusura (non necessaria, ma è un ottimo approccio) e Chrome sarà in grado di eseguire il codice come ES6 ...

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

Ecco un esempio ... http://jsbin.com/tawubotama/edit?html,js,console,output prova a rimuovere il usare stric linea di modo, e riprova, verrà registrato un errore sulla console.


5
2017-12-20 21:25



A partire dal 2015 novembre, Firefox e Bordo hanno guidato le gare dell'ES6, li usano se vuoi sperimentare funzioni che Chrome non ha. Edge ha Classe / sottoclasse e Firefox ha delega; tra di loro hai praticamente tutto Caratteristiche 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. Offri ora a Google e implementeranno le funzionalità ES6 una per una. Ad esempio, le funzioni freccia sono ora disponibili, nel canale di produzione e senza contrassegno.

Non aspettarti estensioni; non puoi tradurre ES6 in ES5 riga per riga, quindi non possiamo estendere console con Babele.

È vero che esiste un flag js di esperimento, ma esiste per buone ragioni. V8 ha Proxy ma nella vecchia sintassi (non standard) e ha problema di sicurezza. Anche la sua destrutturazione è incompleta: scoprirai che in alcuni casi funziona, in alcuni casi no.

Se vuoi solo giocare con ES6, gioca semplicemente con Edge / Firefox.   Entrambi coprono quasi tutta Babele, hanno console e debugger e hanno caratteristiche che Babel non può fornire.


2
2017-11-24 08:40