Usando o ECMAScript 6

Estou procurando uma maneira de executar o código ECMAScript 6 no console do meu navegador, mas a maioria dos navegadores não suporta a funcionalidade que estou procurando. Por exemplo, o Firefox é o único navegador que suporta funções de seta.

Existe uma maneira (extensão, script de usuário etc.) de executar esses recursos no Chrome?

No Chrome, a maioria dos recursos do ES6 está oculta atrás de um sinalizador chamado "Recursos experimentais de JavaScript". Visite chrome://flags/#enable-javascript-harmony, ative esse sinalizador, reinicie o Chrome e você obterá muitos novos recursos .

As funções de seta ainda não foram implementadas no V8 / Chrome , portanto, esse sinalizador não "desbloqueia" as funções de seta.

Como as funções de seta são uma alteração de sintaxe, não é possível oferecer suporte a essa sintaxe sem alterar a maneira como o JavaScript é analisado. Se você gosta de desenvolver no ES6, pode escrever um código ES6 e usar um compilador de ES6 para ES5 para gerar código JavaScript compatível com todos os navegadores (modernos) existentes.

Por exemplo, consulte https://github.com/google/traceur-compiler . Até o momento, ele suporta todos os novos recursos de sintaxe do ES6 . Juntamente com a bandeira mencionada na parte superior desta resposta, você chegará muito perto do resultado desejado.

Se você deseja executar a sintaxe ES6 diretamente do console, tente sobrescrever o avaliador JavaScript do console (para que o pré-processador Traceur seja executado antes de executar o código). Se você gosta de fazer isso, dê uma olhada nesta resposta para aprender como modificar o comportamento das ferramentas do desenvolvedor.

Babel é um ótimo transpiler para experimentar o ES6. Você pode executar o ES6 no navegador na seção "Experimente" do site deles. Funciona de maneira semelhante ao jsfiddle.

Setas, por exemplo:

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

exibe o resultado 2 .

Babel "transpiles", que é converter o ES6 em javascript ES5, que pode ser executado pela tecnologia atual do navegador. Você pode instalar o Babel via npm install -g babel. Depois de instalado, você pode salvar o exemplo das setas acima em um arquivo. Digamos que chamamos o arquivo "ES6.js". Supondo que você tenha o nó instalado, na linha de comando, canalize a saída para o nó:

babel ES6.js | node

E você verá a saída 2. Você pode salvar o arquivo traduzido permanentemente com o 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);

O que, é claro, pode ser executado em qualquer navegador moderno.

Exemplo usando Classes

ES6 é um alvo em movimento rápido. Consulte a Tabela de Compatibilidade para encontrar recursos suportados por transpilers, como Traceur e Babel e suporte ao navegador. Você pode até expandir o gráfico para ver o teste usado para verificar a compatibilidade:

Para experimentar o ES6 de ponta em um navegador, experimente os canais noturnos de compilação do Firefox ou de lançamento do Chrome

Você provavelmente está procurando um dos seguintes links:

Babel ( para Webpack , Gulp , Grunt , outras estruturas e idiomas )

O uso do Babel em seu pipeline de desenvolvimento transpilará (converterá) automaticamente seu JavaScript para ser compatível com vários navegadores. Ou, se você estiver usando o TypeScript, pode ficar tranquilo; seu código já está sendo transpilado.

Você não deseja configurar um transpiler (como Babel / Typescript) ou deseja jogar com recursos ainda não suportados pelo seu transpiler?

Você pode ativar os recursos experimentais do ECMAScript em seu navegador acessando chrome: // flags / # enable-javascript-harmony e ativando o sinalizador JavaScript Harmony. Para alguns recursos, você pode precisar usar o Chrome Canary com o sinalizador JavaScript Harmony ativado.

As novas APIs JavaScript geralmente não são cobertas pelo Babel e terão seu próprio sinalizador do Chrome.

Usando as funções de Seta

Esta questão mencionou especificamente o uso de funções de seta. As funções de seta agora são suportadas nativamente em todos os navegadores, exceto o IE e o Opera Mini. Veja caniuse .

Costumava ser um pouco difícil se você queria brincar com as funções de seta. O histórico abaixo mostra o que foi preciso em diferentes momentos no tempo para jogar com esse recurso.

1) Inicialmente, as funções de seta funcionavam apenas no Chrome Canary com o chrome://flags/#enable-javascript-harmonysinalizador ativado. Parece que essa funcionalidade foi implementada pelo menos parcialmente pela versão 39.

2) Em seguida, as funções de seta foram disponibilizadas no Google Chrome por trás da sinalização JavaScript Harmony.

3) E, finalmente, no Google Chrome 45 , as funções de seta foram ativadas por padrão.

Você pode esperar que um padrão semelhante ocorra com outros novos recursos do ECMAScript.

Basta usar o modo de uso estrito em um fechamento (não é necessário, mas é uma ótima abordagem) e o Chrome poderá executar seu código como ES6 ...

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

Aqui está um exemplo ... http://jsbin.com/tawubotama/edit?html,js,console,output tente remover a linha use stric mode e tente novamente, será registrado um erro no console.

Desde novembro de 2015, o Firefox e o Edge lideravam as corridas ES6, use-as se desejar experimentar as funções que o Chrome não possui. O Edge possui classe / subclasse e o Firefox possui Proxy ; entre eles, você tem praticamente todos os recursos do ES6 .

Se você deve usar o ES6 no console do Chrome, existe uma maneira simples, testada e verdadeira:

Seja paciente.

Os navegadores estão adotando o ES6 - até o Safari, que está se arrastando na maioria dos padrões HTML5. Dê tempo ao Google e eles implementarão os recursos do ES6, um por um. Por exemplo, as funções de seta estão agora disponíveis, no canal de produção e sem sinalizador.

Não espere extensões; você não pode traduzir ES6 para ES5 linha por linha; portanto, não podemos apenas estender o console com Babel .

É verdade que existe um sinalizador de experimento js, ​​mas existe por boas razões. A V8 possui proxy, mas possui uma sintaxe antiga (não padrão) e possui um problema de segurança . Sua desestruturação também é incompleta: você descobrirá que, em alguns casos, funciona; em outros, não.

Se você quer apenas jogar o ES6, basta jogar com o Edge / Firefox. Ambos abrangem quase toda a Babel, possuem console e depurador e possuem recursos que a Babel não pode fornecer.