Est-il possible d'utiliser ES6 dans une extension Chrome?

Je viens de commencer à créer une extension Chrome et j'ai été curieux de pouvoir utiliser ES6 avec elle.

Dans le tableau de compatibilité suivant , Chrome 41 montre qu'il possède actuellement une compatibilité de 41%. Un couple de fonctionnalités clés comme la class ne sont pas inclus dans ce 41% et j'ai donc été curieux s'il y avait d'autres options, comme le transpilage.

J'ai déjà utilisé Babel , un transpiler ES6, avec Ember CLI et ça a bien fonctionné.

Cependant, je trouve le processus de construction un peu différent lors du développement d'une extension chrome. Par exemple, lors du test d'une extension que je développe, je la charge dans le navigateur via l'option "Charger l'extension déballée" qui pointe directement vers le code source.

Pour l'extension que je construis, j'utilise le générateur d'extension Yeoman chrome comme base. Idéalement, j'aimerais pouvoir configurer une sorte de tâche grunt qui s'accroche à la tâche de debug , puis transpile le code à tout moment dans un répertoire distinct. De là, je pourrais charger le contenu de ce répertoire via l'option d' load unpacked extension . Cependant, je ne sais pas exactement comment procéder ou s'il y a d'autres options.

Mise à jour Cette réponse a été initialement écrite en 2015. Le lien du tableau de compatibilité montre que Chrome, FF, Edge et Safari sont plus compatibles que Babel maintenant.

Chrome 49+, FF 45+ peut ne pas bénéficier de Babel. D'autres navigateurs, peuvent être transpirés.

Original

Je développe actuellement une extension Chrome dans ES6. Vos questions semblent être plus générales, alors j'essaie de répondre à cela en fonction de mes expériences.

Dans le tableau de compatibilité suivant , Chrome 41 montre qu'il possède actuellement une compatibilité de 41%. Un couple de fonctionnalités clés comme la class ne sont pas inclus dans ce 41% et j'ai donc été curieux s'il y avait d'autres options, comme le transpilage.

C'est vrai. Vous pouvez facilement utiliser toutes les fonctionnalités ES6 existantes sans soucis ni transpilage. Chaque nouvelle version de Chrome possède d'autres fonctionnalités, ce qui rend très excitant d'attendre;) Chrome 44 couvre maintenant 48%, y compris la class .

Cependant, si vous voulez aller ES6 complet, un compilateur est toujours la meilleure option. Vous ne devez pas vous soucier des fonctionnalités prises en charge et écrire simplement le code ES6, qui sera compilé avec un code ES5 approprié.

Mon configuration actuelle est Browserify (via grunt-browserify ) en utilisant Babelify en tant que compilateur. Browserify vous permet également d'utiliser les modules ES6, qui vous donnent toute la puissance de ES6.

Gruntfile.js

 browserify: { dist: { options: { transform: [ ['babelify', { loose: 'all' }] ], browserifyOptions: { debug: true }, exclude: '' }, files: { 'path/to/es5/app.js': ['path/to/es6/**/*.js'] } } } // Then it will be uglified and copied to dist.

Cela signifie que mon extension fonctionne encore avec le code ES5, mais cela ne compte pas beaucoup pour moi car je peux encore écrire dans ES6.

Si vous souhaitez vraiment utiliser les fonctionnalités ES6 disponibles (ce que j'ai fait auparavant), cela peut être très frustrant ou ennuyeux car il faut toujours rechercher ce qui est possible dans Chrome et surtout il attend une nouvelle version de Chrome.

Cependant, je trouve le processus de construction un peu différent lors du développement d'une extension chrome. Par exemple, lors du test d'une extension que je développe, je la charge dans le navigateur via l'option "Charger l'extension déballée" qui pointe directement vers le code source.

Bien, ce n'est pas vraiment différent de tout autre projet que je pense. Selon les fonctionnalités spécifiques à Chrome que vous utilisez, vous pouvez simplement développer votre projet et ensuite le tester en le chargeant dans le navigateur ou simplement lier le chemin d'accès "Charger l'extension décompressée" à votre dossier dist/build/public généré. En faisant cela, c'est toujours l'état actuel. Cela me convient le mieux.

J'espère que ça aidera un peu 🙂