Utilisation d'ECMAScript 6

Je cherche un moyen d'exécuter du code ECMAScript 6 dans la console de mon navigateur, mais la plupart des navigateurs ne prennent pas en charge les fonctionnalités que je recherche. Par exemple, Firefox est le seul navigateur qui prend en charge les fonctions fléchées.

Existe-t-il un moyen (extension, usercript, etc.) d'exécuter ces fonctionnalités sur Chrome?

Dans Chrome, la plupart des fonctionnalités ES6 sont cachées derrière un indicateur appelé "Fonctionnalités JavaScript expérimentales". Visitez chrome://flags/#enable-javascript-harmony, activez cet indicateur, redémarrez Chrome et vous obtiendrez de nombreuses nouvelles fonctionnalités .

Les fonctions fléchées ne sont pas encore implémentées dans V8 / Chrome , donc ce drapeau ne «déverrouillera» pas les fonctions fléchées.

Les fonctions fléchées étant un changement de syntaxe, il n'est pas possible de prendre en charge cette syntaxe sans changer la façon dont JavaScript est analysé. Si vous aimez développer dans ES6, vous pouvez écrire du code ES6 et utiliser un compilateur ES6 vers ES5 pour générer un code JavaScript compatible avec tous les navigateurs (modernes) existants.

Par exemple, consultez https://github.com/google/traceur-compiler . Au moment de la rédaction, il prend en charge toutes les nouvelles fonctionnalités de syntaxe d'ES6 . Avec le drapeau mentionné en haut de cette réponse, vous serez très proche du résultat souhaité.

Si vous souhaitez exécuter la syntaxe ES6 directement à partir de la console, vous pouvez essayer d'écraser l'évaluateur JavaScript de la console (de sorte que le préprocesseur Traceur soit exécuté avant d'exécuter le code). Si vous avez envie de faire cela, jetez un œil à cette réponse pour savoir comment modifier le comportement des outils de développement.

Babel est un excellent transpilateur pour essayer ES6. Vous pouvez exécuter ES6 dans le navigateur dans la section «Essayer» de leur site Web. Il fonctionne de la même manière que jsfiddle.

Les flèches par exemple:

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

affiche le résultat 2 .

Babel "transpiles", c'est-à-dire traduire ES6 en javascript ES5 qui peut être exécuté par la technologie de navigateur actuelle. Vous pouvez installer Babel via npm install -g babel. Une fois installé, vous pouvez enregistrer l'exemple de flèches ci-dessus dans un fichier. Disons que nous appelons le fichier "ES6.js". En supposant que le nœud est installé, la ligne de commande dirige la sortie vers le nœud:

babel ES6.js | node

Et vous verrez la sortie 2. Vous pouvez enregistrer le fichier traduit de manière permanente avec la commande:

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);

Qui bien sûr peut être exécuté dans n'importe quel navigateur moderne.

Exemple d'utilisation de classes

ES6 est une cible en mouvement rapide. Reportez-vous au tableau de compatibilité pour trouver les fonctionnalités prises en charge par les transpileurs tels que Traceur et Babel et la prise en charge des navigateurs. Vous pouvez même développer le graphique pour voir le test utilisé pour vérifier la compatibilité:

Pour essayer ES6 de pointe dans un navigateur, essayez la version nocturne de Firefox ou les canaux de version Chrome

Vous recherchez probablement l'un des liens suivants:

Babel ( pour Webpack , pour Gulp , pour Grunt , pour d'autres frameworks et langages )

L'utilisation de Babel dans votre pipeline de développement transpilera (convertira) automatiquement votre JavaScript pour qu'il soit compatible avec plusieurs navigateurs. Ou, si vous utilisez TypeScript, vous pouvez être tranquille; votre code est déjà transpilé.

Vous ne voulez pas configurer un transpilateur (tel que Babel / Typescript), ou voulez-vous jouer avec des fonctionnalités qui ne sont pas encore prises en charge par votre transpilateur?

Vous pouvez activer les fonctionnalités expérimentales d'ECMAScript dans votre navigateur en accédant à chrome: // flags / # enable-javascript- Harmony et en activant l'indicateur JavaScript Harmony. Pour certaines fonctionnalités, vous devrez peut-être utiliser Chrome Canary avec l'indicateur JavaScript Harmony activé.

Les nouvelles API JavaScript ne sont généralement pas couvertes par Babel et auront leur propre drapeau Chrome.

Utilisation des fonctions fléchées

Cette question est spécifiquement mentionnée à l'aide des fonctions fléchées. Les fonctions de flèche sont désormais prises en charge nativement dans tous les navigateurs, à l'exception d'IE et d'Opera Mini. Voir caniuse .

C'était un peu difficile si vous vouliez jouer avec les fonctions fléchées. L'historique ci-dessous montre ce qu'il a fallu à différents moments pour jouer avec cette fonctionnalité.

1) Au début, les fonctions fléchées ne fonctionnaient que dans Chrome Canary avec l' chrome://flags/#enable-javascript-harmonyindicateur activé. Il semble que cette fonctionnalité ait été au moins partiellement implémentée par la version 39.

2) Ensuite, les fonctions fléchées étaient disponibles dans Google Chrome derrière le drapeau JavaScript Harmony.

3) Et enfin, dans Google Chrome 45 , les fonctions fléchées étaient activées par défaut.

Vous pouvez vous attendre à ce qu'un modèle similaire se produise avec d'autres nouvelles fonctionnalités ECMAScript.

Utilisez simplement le mode strict d'utilisation , dans une fermeture (pas nécessaire, mais c'est une excellente approche) et Chrome pourra exécuter votre code en tant qu'ES6 ...

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

Voici un exemple ... http://jsbin.com/tawubotama/edit?html,js,console,output essayez de supprimer la ligne de mode d' utilisation stric , et réessayez, une erreur sur la console sera enregistrée.

Depuis novembre 2015, Firefox et Edge sont en tête des courses ES6, utilisez-les si vous souhaitez expérimenter des fonctions qui manquent à Chrome. Edge a une classe / sous-classe et Firefox a un proxy ; entre eux, vous avez pratiquement toutes les fonctionnalités ES6 .

Si vous devez utiliser ES6 dans la console Chrome, il existe un moyen simple, éprouvé et vrai:

Sois patient.

Les navigateurs adoptent ES6 - même Safari, qui traîne les pieds sur la plupart des normes HTML5. Donnez du temps à Google et ils mettront en œuvre les fonctionnalités ES6 une par une. Par exemple, les fonctions fléchées sont désormais disponibles, dans le canal de production et sans indicateur.

Ne vous attendez pas à des extensions; vous ne pouvez pas traduire ES6 en ES5 ligne par ligne, nous ne pouvons donc pas simplement étendre la console avec Babel .

Il est vrai qu'il existe un drapeau js expérimental, mais il existe pour de bonnes raisons. V8 a Proxy mais dans une ancienne syntaxe (non standard) et a un problème de sécurité . Sa déstructuration est également incomplète: vous constaterez que dans certains cas cela fonctionne, dans certains cas non.

Si vous voulez juste jouer à ES6, jouez simplement avec Edge / Firefox. Ils couvrent tous les deux presque tout Babel, ont une console et un débogueur, et ont des fonctionnalités que Babel ne peut pas fournir.