google-chrome - node - quando è nato javascript




Utilizzo di ECMAScript 6 (4)

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?


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 attivare le funzionalità sperimentali di ECMAScript nel tuo browser andando su chrome: // flags / # enable-javascript-harmony e abilitando il flag JavaScript Harmony. Per alcune funzionalità, potresti dover utilizzare Chrome Canary con quel flag abilitato.


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. Vedi caniuse

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 Chrome Canary con il chrome://flags/#enable-javascript-harmony abilitato. 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 JavaScript Harmony.

3) Infine, in Google Chrome 45 , le funzioni freccia sono abilitate per impostazione predefinita.

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


A partire dal 2015 Nov, Firefox e Edge hanno guidato le gare ES6, usandole se vuoi sperimentare le funzioni che mancano a Chrome. Edge ha class/subclass e Firefox ha Proxy ; tra loro hai praticamente tutte le funzionalità di 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 semplicemente extend console con Babel .

È vero che esiste un flag js di esperimento, ma esiste per buone ragioni. V8 ha Proxy ma nella vecchia sintassi (non standard) e ha problemi 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.


Babel è 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 tramite 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 alla tabella di compatibilità per trovare le funzionalità supportate da transporter 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 la versione nightly di Firefox oi canali di rilascio di Chrome


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 freccia non sono ancora state implementate in V8 / Chrome , quindi questo flag non "sbloccherà" le funzioni 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, consulta 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 vuoi farlo, dai un'occhiata a questa risposta per imparare come modificare il comportamento degli strumenti di sviluppo.





ecmascript-6