Utilisation d'ECMAScript 6

162

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?

Spedwards
la source

Réponses:

158

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.

Rob W
la source
5
Il existe également un ScratchJS, un outil de développement pour Chrome: chrome.google.com/webstore/detail/scratch-js/…
pixel 67
8
Les fonctions de flèche sont désormais entièrement implémentées dans la dernière version de chrome. Cette astuce reste cependant utile pour d'autres fonctionnalités d'ES6. Comme la classsyntaxe, par exemple.
Adam Brown
7
Cette réponse est maintenant pour la plupart dépassée.
Michał Perłakowski
@Gothdo Les spécificités sont en effet dépassées (les fonctions fléchées sont bien supportées de nos jours), mais le conseil général pour activer les fonctions JS expérimentales est toujours vrai. Par exemple, les look-behind dans les expressions régulières sont toujours désactivés par défaut. Ce qui suit retournera false si l' --enable-javascript-harmonyindicateur est défini: /(?<!a)b/.test('ab')(et lèvera l'erreur suivante si l'indicateur n'est pas défini: "Uncaught SyntaxError: Invalid regular expression: / (? <! A) b /: Invalid group")
Rob W
Ce n'est pas obsolète, a eu le même problème avec arrow_functions pour un client avec une ancienne version de Windows. Le drapeau a fait l'affaire, merci!
Jaime Yule
47

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é:

entrez la description de l'image ici

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

P.Brian.Mackey
la source
Si vous n'en avez pas déjà entendu parler, consultez jspm. Il vous permet de consommer des modules CommonJS, AMD et ES6. Il s'appuie sur Traceur ou Babel pour "compiler" l'ES6 vers l'ES5 dans le navigateur avant l'exécution. L'un des avantages intéressants de jspm est la possibilité de consommer des modules npm ou (avec un peu de configuration) des modules de Github. D'autres référentiels de modules seront probablement ajoutés à l'avenir. jspm a également un support de navigateur assez décent. Pas testé, mais je crois que c'est IE9 +. (Votre compilateur ES6 affecte également cela.)
Kevin Dice
Dans Ubuntu 17.04, j'ai besoin de faire sudo npm install -g --save-dev babel-cli babel-preset-es2015et $(npm bin)/babel ES6.js --presets es2015de le faire fonctionner, rf: babeljs.io/docs/plugins/preset-es2015
Fruit
12

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é.

Capture d'écran d'harmonie JS

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.

wp-overwatch.com
la source
TypeScript est livré avec un excellent transpilateur. Babel est également un transpilateur JavaScript courant. Si vous transpilez votre code es6 en es5, vous n'aurez pas à attendre la prise en charge du navigateur pour commencer à utiliser la génialité d'es6!
wp-overwatch.com
6

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.

Miguel Lattuada
la source
3

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.

Sheepy
la source
2
Safari est en fait en avance sur tous les navigateurs de bureau et ios10 mobile est en avance sur Chrome pour Android dans la prise en charge d'ES6. kangax.github.io/compat-table/es6
Louis Duran
@Louis Avant iOS 10, Safari a négligé la technologie Web émergente . Même maintenant, six mois plus tard, 21% des anciens utilisateurs iOS sont bloqués avec ES5 car les anciens iOS ne peuvent pas mettre à niveau uniquement le navigateur, et sont toujours la force solo qui retient l'aboption d'ES6 dans le développement mobile (98% des androïdes peuvent exécuter le dernier Chrome). Je vais garder cette réponse inchangée car les questions Q et A sont obsolètes, mais si vous regardez un peu au-delà de ES6, Safari 10 est toujours à la traîne en manquant la fonction async ou en récupérant l'API.
Sheepy