Usando ECMAScript 6

Estoy buscando una manera de ejecutar el código ECMAScript 6 en la consola de mi navegador, pero la mayoría de los navegadores no admiten la funcionalidad que estoy buscando. Por ejemplo, Firefox es el único navegador que admite funciones de flecha.

¿Hay alguna forma (extensión, script de usuario, etc.) que pueda ejecutar estas funciones en Chrome?

En Chrome, la mayoría de las funciones de ES6 están ocultas detrás de una bandera llamada "Funciones experimentales de JavaScript". Visita chrome://flags/#enable-javascript-harmony, habilita esta marca, reinicia Chrome y obtendrás muchas funciones nuevas .

Las funciones de flecha aún no se implementan en V8 / Chrome , por lo que este indicador no "desbloqueará" las funciones de flecha.

Dado que las funciones de flecha son un cambio de sintaxis, no es posible admitir esta sintaxis sin cambiar la forma en que se analiza JavaScript. Si le encanta desarrollar en ES6, puede escribir código ES6 y usar un compilador ES6 a ES5 para generar código JavaScript que sea compatible con todos los navegadores existentes (modernos).

Por ejemplo, consulte https://github.com/google/traceur-compiler . Al momento de escribir, es compatible con todas las nuevas características de sintaxis de ES6 . Junto con la bandera mencionada en la parte superior de esta respuesta, se acercará mucho al resultado deseado.

Si desea ejecutar la sintaxis de ES6 directamente desde la consola, puede intentar sobrescribir el evaluador de JavaScript de la consola (de modo que se ejecute el preprocesador Traceur antes de ejecutar el código). Si te apetece hacer esto, mira esta respuesta para aprender cómo modificar el comportamiento de las herramientas de desarrollador.

Babel es un gran transpilador para probar ES6. Puede ejecutar ES6 en el navegador en la sección "Pruébelo" de su sitio web. Funciona de manera similar a jsfiddle.

Flechas por ejemplo:

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

Muestra el resultado 2 .

Babel "transpila", es decir, traduce ES6 a ES5 javascript que puede ser ejecutado por la tecnología actual del navegador. Puede instalar Babel a través de npm install -g babel. Una vez instalado, puede guardar el ejemplo de flechas anterior en un archivo. Digamos que llamamos al archivo "ES6.js". Suponiendo que tiene un nodo instalado, en la línea de comando canalice la salida al nodo:

babel ES6.js | node

Y verá la salida 2. Puede guardar el archivo traducido permanentemente con el comando:

babel ES6.js --out-file output.js

output.js "transpilado":

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

Que, por supuesto, se puede ejecutar en cualquier navegador moderno.

Ejemplo usando clases

ES6 es un objetivo de rápido movimiento. Consulte la Tabla de compatibilidad para encontrar funciones compatibles con los transpiladores, como Traceur y Babel, y compatibilidad con el navegador. Incluso puede expandir el gráfico para ver la prueba utilizada para verificar la compatibilidad:

Para probar ES6 de última generación en un navegador, pruebe los canales de lanzamiento nocturno de Chrome o de Firefox

Probablemente esté buscando uno de los siguientes enlaces:

Babel ( para Webpack , para Gulp , para Grunt , para otros frameworks e idiomas )

El uso de Babel en su canal de desarrollo transpilará (convertirá) automáticamente su JavaScript para que sea compatible con todos los navegadores. O, si está utilizando TypeScript, puede descansar tranquilo; su código ya se está transpilando.

¿No quieres configurar un transpiler (como Babel / Typecript) o quieres jugar con características que tu transpiler aún no admite?

Puede habilitar las características experimentales de ECMAScript en su navegador yendo a chrome: // flags / # enable-javascript-harmony y habilitando el indicador JavaScript Harmony. Para algunas funciones, es posible que deba usar Chrome Canary con la marca JavaScript Harmony habilitada.

Las nuevas API de JavaScript generalmente no están cubiertas por Babel, y tendrán su propia bandera de Chrome.

Usar funciones de flecha

Esta pregunta mencionó específicamente el uso de funciones de flecha. Las funciones de flecha ahora son compatibles de forma nativa en todos los navegadores, excepto IE y Opera Mini. Ver caniuse .

Solía ​​ser un poco difícil si querías jugar con las funciones de flecha. El siguiente historial muestra lo que se necesitó en diferentes momentos para jugar con esta función.

1) Al principio, las funciones de flecha solo funcionaban en Chrome Canary con la chrome://flags/#enable-javascript-harmonybandera habilitada. Parece que esta funcionalidad fue implementada al menos parcialmente por la versión 39.

2) Luego, las funciones de flecha están disponibles en Google Chrome detrás de la bandera de JavaScript Harmony.

3) Y finalmente, en Google Chrome 45 , las funciones de flecha estaban habilitadas de forma predeterminada.

Puede esperar que ocurra un patrón similar con otras características nuevas de ECMAScript.

Simplemente use el modo de uso estricto , en un cierre (no es necesario, pero es un gran enfoque) y Chrome podrá ejecutar su código como ES6 ...

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

Aquí un ejemplo ... http://jsbin.com/tawubotama/edit?html,js,console,output intente eliminar la línea use stric mode, e intente nuevamente, se registrará un error en la consola.

A partir de noviembre de 2015, Firefox y Edge han liderado las carreras ES6, utilícelas si desea experimentar las funciones que Chrome carece. Edge tiene clase / subclase y Firefox tiene Proxy ; entre ellos tienes prácticamente todas las funciones de ES6 .

Si debe usar ES6 en la consola de Chrome, hay una manera simple, probada y verdadera:

Se paciente.

Los navegadores están adoptando ES6, incluso Safari, que ha estado arrastrando sus pies en la mayoría de los estándares HTML5. Dale tiempo a Google e implementarán las funciones de ES6 una por una. Por ejemplo, las funciones de flecha ahora están disponibles, en el canal de producción y sin bandera.

No esperes extensiones; no puede traducir ES6 a ES5 línea por línea, por lo que no podemos simplemente extender la consola con Babel .

Es cierto que hay un experimento js flag, pero existe por buenas razones. V8 tiene Proxy pero en sintaxis antigua (no estándar) y tiene un problema de seguridad . Su desestructuración también es incompleta: encontrará que en algunos casos funciona, en otros casos no.

Si solo quieres jugar ES6, simplemente juega con Edge / Firefox. Ambos cubren casi todo Babel, tienen consola y depurador, y tienen características que Babel no puede proporcionar.