google-chrome - scripts - tampermonkey descargar

Usando ECMAScript 6

Question

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

¿Hay alguna forma (extensión, userscript, etc.) de ejecutar estas funciones en Chrome?

Answer 1

Usando ECMAScript Next (ES6, ES7, etc.)

Para asegurarse de que las nuevas funciones funcionen para todos los espectadores, querrá usar un transpiler. Un transpiler le permite utilizar las funciones más recientes de ECMAScript al transformar su código en código que es compatible con todos los navegadores. A continuación se encuentran algunos buenos transpilers.

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

• https://github.com/google/traceur-compiler ( para Gulp , para Webpack , para Grunt )

• Si usa TypeScript, TypeScript transporta el código por usted .

¿No quiere configurar un transpiler, o quiere jugar con características que aún no admite su transpiler?

Puede habilitar funciones experimentales de ECMAScript en su navegador yendo a chrome: // flags / # enable-javascript-harmony y habilitando el indicador Harmony de JavaScript. Para algunas funciones, es posible que tengas que utilizar Chrome Canary con esa marca habilitada.

Usando las 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 en 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-harmony activada. Parece que esta funcionalidad fue implementada al menos parcialmente por la versión 39.

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

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

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

Answer 2

A partir de 2015 Nov, Firefox y Edge han estado liderando las carreras de ES6, úsalas si quieres experimentar funciones que carecen Chrome. Edge tiene class/subclass y Firefox tiene Proxy ; entre ellos tienes virtualmente todas las características de ES6 .

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

Se paciente.

Los navegadores están adoptando ES6, incluso Safari, que ha estado arrastrando los pies en la mayoría de los estándares HTML5. Dale tiempo a Google e implementará las características 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 extend consola con Babel .

Es cierto que hay una bandera de experimento js, ​​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 algunos 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.

Answer 3

Simplemente use el modo estricto de uso , 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 output intenta eliminar la línea del modo stric de uso , y vuelve a intentar, se registrará un error en la consola.

Answer 4

Babel es un gran transpiler para probar ES6. Puede ejecutar ES6 en el navegador en la sección "Probarlo" 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 se puede ejecutar con la tecnología actual del navegador. Puede instalar Babel a través de npm install -g babel . Una vez instalado, puede guardar las flechas del ejemplo 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 "transpiled":

"use strict";

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

var result = add(1, 2);

console.log(result);

Por supuesto, se puede ejecutar en cualquier navegador moderno.

Ejemplo de uso de clases

ES6 es un objetivo en rápido movimiento. Consulte la Tabla de compatibilidad para encontrar funciones compatibles con Transpilers 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 el sangrado ES6 Edge en un navegador, pruebe la versión nocturna de Firefox o los canales de lanzamiento de Chrome.

Answer 5

En Chrome, la mayoría de las características de ES6 están ocultas detrás de una bandera llamada "Funciones de JavaScript experimentales". Visite chrome://flags/#enable-javascript-harmony , active este indicador, reinicie Chrome y obtendrá muchas características nuevas .

Las funciones de flecha aún no están implementadas 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 el JavaScript. Si te encanta desarrollar en ES6, entonces puedes escribir el código ES6 y usar un compilador de 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 . A partir de la redacción, 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 tratar de sobreescribir el evaluador de JavaScript de la consola (de forma que el preprocesador de Traceur se ejecute antes de ejecutar el código). Si le gusta hacer esto, eche un vistazo a esta respuesta para aprender a modificar el comportamiento de las herramientas de desarrollador.