Usando o ECMAScript 6


162

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?

Respostas:


158

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.


5
Há também um ScratchJS, uma ferramenta dev para Chrome: chrome.google.com/webstore/detail/scratch-js/...
de pixel 67

8
As funções de seta agora estão totalmente implementadas na versão mais recente do chrome. Essa dica continua sendo útil para outros recursos do ES6. Como a classsintaxe, por exemplo.
Adam Brown

7
Esta resposta agora está desatualizada.
Michał Perłakowski

@Gothdo Os detalhes estão realmente desatualizados (as funções de seta são bem suportadas atualmente), mas o conselho geral para ativar funções experimentais de JS ainda é verdadeiro. Por exemplo, look-behinds na expressão regular ainda estão desativados por padrão. O seguinte retornará false se o --enable-javascript-harmonysinalizador estiver definido: /(?<!a)b/.test('ab')(e lançará o próximo erro se o sinalizador não estiver definido: "Untaught SyntaxError: Expressão regular inválida: / (? <! A) b /: grupo inválido")
Rob W

Não está desatualizado, teve o mesmo problema com arrow_functions para um cliente com uma versão antiga do Windows. A bandeira fez o truque, obrigado!
Jaime Yule

47

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:

insira a descrição da imagem aqui

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


Se você ainda não ouviu falar, verifique o jspm. Permite consumir módulos CommonJS, AMD e ES6. Ele conta com o Traceur ou o Babel para "compilar" o ES6 para o ES5 no navegador antes da execução. Um dos bons benefícios do jspm é a capacidade de consumir módulos npm ou (com um pouco de configuração) módulos do Github. É provável que outros repositórios de módulos sejam adicionados no futuro. O jspm também possui um suporte bastante decente ao navegador. Não testado, mas acredito que seja o IE9 +. (O seu compilador ES6 afeta isso também.)
Kevin Dice

No Ubuntu 17.04, preciso fazer sudo npm install -g --save-dev babel-cli babel-preset-es2015e $(npm bin)/babel ES6.js --presets es2015fazê-lo funcionar, rf: babeljs.io/docs/plugins/preset-es2015
Fruit

12

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.

Captura de tela da harmonia JS

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.


O TypeScript vem com um ótimo transpiler. Babel também é um transpilador JavaScript comum. Se você transpilar seu código es6 para es5, não precisará esperar que o suporte ao navegador comece a usar a grandiosidade do es6!
Wp-overwatch.com 25/02/16

6

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.


3

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.


2
O Safari está realmente à frente de todos os navegadores de desktop e o ios10 mobile está à frente do Chrome para Android no suporte ES6. kangax.github.io/compat-table/es6
Louis Duran

@ Louis Antes do iOS 10, o Safari negligenciava as tecnologias emergentes da web . Mesmo agora, meio ano depois, 21% dos usuários antigos do iOS estão presos ao ES5, já que o iOS mais antigo não pode atualizar apenas o navegador e ainda é a força de solo que retém a abopção do ES6 no desenvolvimento móvel (98% dos Androids podem executar a versão mais recente). Cromada). Manterei essa resposta inalterada, pois Q e A são obsoletas, mas se você olhar um pouco além do ES6, o Safari 10 ainda está atrasado por perder a função assíncrona ou buscar API.
Sheepy 17/03/17
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.