Usando ECMAScript 6


162

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?

Respuestas:


158

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.


55
También hay un ScratchJS, una herramienta de desarrollo para Chrome: chrome.google.com/webstore/detail/scratch-js/…
pixel 67

8
Las funciones de flecha ahora están completamente implementadas en la última versión de Chrome. Sin embargo, este consejo sigue siendo útil para otras características de ES6. Como la classsintaxis, por ejemplo.
Adam Brown

77
Esta respuesta ahora está mayormente desactualizada.
Michał Perłakowski

@Gothdo Los detalles están desactualizados (las funciones de flecha están bien respaldadas en estos días), pero el consejo general para habilitar las funciones experimentales de JS sigue siendo cierto. Por ejemplo, los look-behind en expresiones regulares todavía están deshabilitados de manera predeterminada. Lo siguiente devolverá falso si el --enable-javascript-harmonyindicador está configurado: /(?<!a)b/.test('ab')(y arrojará el siguiente error si el indicador no está establecido: "Error de sintaxis no capturado: Expresión regular no válida: / (? <! A) b /: Grupo no válido")
Rob W

No está desactualizado, tuvo el mismo problema con arrow_functions para un cliente con una versión anterior de Windows. La bandera hizo el truco, ¡gracias!
Jaime Yule

47

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:

ingrese la descripción de la imagen aquí

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


Si aún no has oído hablar de él, paga jspm. Le permite consumir módulos CommonJS, AMD y ES6. Se basa en Traceur o Babel para "compilar" el ES6 a ES5 en el navegador antes de la ejecución. Una de las ventajas de jspm es la capacidad de consumir módulos npm o (con un poco de configuración) módulos de Github. Es probable que se agreguen otros repositorios de módulos en el futuro. jspm también tiene un soporte de navegador bastante decente. No probado, pero creo que es IE9 +. (Su compilador ES6 también afecta a esto.)
Kevin Dice

En Ubuntu 17.04, necesito hacer sudo npm install -g --save-dev babel-cli babel-preset-es2015y $(npm bin)/babel ES6.js --presets es2015hacerlo funcionar, rf: babeljs.io/docs/plugins/preset-es2015
Fruit

12

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.

Captura de pantalla de armonía JS

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.


TypeScript viene con un gran transpilador. Babel también es un transpilador de JavaScript común. Si transpila su código de es6 a es5, ¡no tendrá que esperar a que el soporte del navegador comience a usar la genialidad de es6!
wp-overwatch.com


3

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.


2
Safari está realmente por delante de todos los navegadores de escritorio y ios10 mobile está por delante de Chrome para Android en el soporte ES6. kangax.github.io/compat-table/es6
Louis Duran

@Louis Antes de iOS 10, Safari había descuidado la tecnología web emergente . Incluso ahora, medio año después, el 21% de los antiguos usuarios de iOS están atrapados con ES5, ya que los iOS más antiguos no pueden actualizar solo el navegador, y sigue siendo la fuerza que frena el abandono de ES6 en el desarrollo móvil (98% de los androides pueden ejecutar la última versión) Cromo). Mantendré esta respuesta sin cambios ya que tanto Q como A son obsoletas, pero si miras un poco más allá de ES6, Safari 10 todavía se queda atrás al perder la función asincrónica o buscar la API.
Sheepy
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.