web-dev-qa-db-fra.com

Utilisation d'ECMAScript 6

Je cherche un moyen d'exécuter le 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 de flèche.

Existe-t-il un moyen (extension, script utilisateur, etc.) de pouvoir utiliser ces fonctionnalités sur Chrome?

google-chromegoogle-chrome-extensionuserscriptsecmascript-6
156
Spedwards

Dans Chrome, la plupart des fonctionnalités de l'ES6 sont masquées derrière un drapeau 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 de flèche sont pas encore implémentées dans V8/Chrome , donc cet indicateur ne "déverrouille" pas les fonctions de flèche.

Les fonctions de flèche étant un changement de syntaxe, il n'est pas possible de prendre en charge cette syntaxe sans modifier 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 à ES5 pour générer du code JavaScript compatible avec tous les navigateurs existants (modernes).

Par exemple, voir https://github.com/google/traceur-compiler . Au moment de l'écriture, il prend en charge toutes les nouvelles fonctionnalités de syntaxe de ES6 . Avec le drapeau mentionné en haut de cette réponse, vous vous rapprocherez du résultat souhaité.

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

153
Rob W

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

Flèches par exemple:

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

affiche le résultat2.

Babel "transpile", c’est-à-dire traduire ES6 en javascript ES5 qui peut être exécuté par la technologie de navigation actuelle. Vous pouvez installer Babel via npm install -g babel. Une fois installé, vous pouvez enregistrer l’exemple ci-dessus dans un fichier. Disons que nous appelons le fichier "ES6.js". En supposant que vous ayez un noeud installé, sur la ligne de commande, dirigez la sortie vers noeud:

babel ES6.js | node

Et vous verrez le résultat 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);

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

Exemple en utilisant des classes

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

enter image description here

Pour essayer de maîtriser Edge ES6 dans un navigateur, essayez le type Firefox nightly build ou canaux de version de Chrome

44
P.Brian.Mackey

Utilisation d'ECMAScript Next (ES6, ES7, etc.)

Pour vous assurer que les nouvelles fonctionnalités fonctionnent pour tous les téléspectateurs, vous souhaiterez utiliser un transpiler. Un transpiler vous permet d’utiliser les dernières fonctionnalités d’ECMAScript aujourd’hui en transformant votre code en code compatible avec tous les navigateurs. Vous trouverez ci-dessous de bons transposeurs.



Vous ne voulez pas installer un transpiler ou voulez-vous jouer avec des fonctionnalités qui ne sont pas encore supportées par votre transpiler?

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 Harmonie JavaScript. Pour certaines fonctionnalités, vous devrez peut-être utiliser Chrome Canary avec cet indicateur activé.

JS harmony screenshot


Utiliser les fonctions fléchées

Cette question mentionnait spécifiquement l'utilisation des fonctions de flèche. Les fonctions de flèches sont maintenant supportées nativement dans tous les navigateurs à l'exception de IE et Opera Mini. Voir caniuse .

Auparavant, 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 de flèche ne fonctionnaient que dans Chrome Canary avec le drapeau chrome://flags/#enable-javascript-harmony activé. Il semble que cette fonctionnalité était au moins partiellement implémentée par la version 39.

2) Ensuite, les fonctions de flèche étaient disponibles dans Google Chrome derrière le drapeau Harmonie JavaScript.

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

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

10
Mr. Me

Utilisez simplement le , utilisez le mode strict , dans une fermeture (inutile, mais c'est une excellente approche) et Chrome pourra Exécutez votre code en tant que ES6 ...

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

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

6
Miguel Lattuada

Depuis novembre 2015, Firefox et Edge menaient les courses de l'ES6, utilisez-les si vous souhaitez expérimenter des fonctions qui ne disposent pas de Chrome. Edge a classe/sous-classe et Firefox a Proxy ; entre eux, vous avez pratiquement tous fonctionnalités de l'ES6 .

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

Sois patient.

Les navigateurs adoptent ES6 - même Safari, qui s’est traîné sur la plupart des normes HTML5. Donnez du temps à Google et ils implémenteront les fonctionnalités ES6 une par une. Par exemple, les fonctions de flèche sont maintenant disponibles, dans le canal de production et sans indicateur.

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

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

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

3
Sheepy