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

Je viens de commencer à construire une Extension Chrome et j'étais curieux de savoir si je pourrais utiliser ES6 avec elle.

Dans le tableau de compatibilité suivant, Chrome 41 montre qu'il a actuellement 41% de compatibilité. Quelques fonctionnalités clés comme class ne sont pas incluses dans ce 41% et j'étais donc curieux de savoir s'il y avait d'autres options, telles que transpiling.

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

Cependant, je trouve la construction traiter 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 "Load unpacked extension" 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, je voudrais être en mesure de mettre en place une sorte de tâche grunt qui se connecte à la tâche debug, puis transpile le code chaque fois qu'il change en une tâche séparée répertoire. De là, je pourrais charger le contenu de ce répertoire via l'option load unpacked extension. Cependant, je ne sais pas exactement comment faire cela ou s'il y a d'autres options à la place.

22
demandé sur John Kelly Ferguson 2015-03-21 20:16:23

1 réponses

Update Cette réponse a été écrite à l'origine en 2015. Le lien de la table 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 avoir besoin de transpiling.

Original

Je suis également en train de développer 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 après tableau de compatibilité , Chrome 41 montre qu'il a actuellement 41% compatibilité. Quelques fonctionnalités clés comme class sont non inclus dans ce 41% et donc j'étais curieux s'il y avait d'autres options, telles que transpiling.

C'est vrai. Vous pouvez facilement utiliser toutes les fonctionnalités ES6 existantes sans soucis et transpiling. Chaque nouvelle version de Chrome a quelques fonctionnalités supplémentaires, ce qui le rend très excitant d'attendre;) Chrome 44 couvre maintenant 48%, y compris class.

Cependant, si vous voulez go full ES6 alors un compilateur est toujours la meilleure option. Vous n'avez pas à vous soucier des fonctionnalités prises en charge et écrivez simplement du code ES6, qui sera compilé en code ES5 approprié.

Mon installation actuelle est Browserify (via grunt-browserify) à l'aide de Babelify comme compilateur. Browserify vous permet également d'utiliser des 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 L'Extension fonctionne toujours avec le code ES5, mais cela n'a pas beaucoup d'importance pour moi car je peux toujours écrire dans ES6.

Si vous voulez vraiment utiliser les fonctionnalités ES6 disponibles (ce que je faisais auparavant), cela peut être assez frustrant/ennuyeux car vous devez toujours rechercher ce qui est possible dans Chrome et surtout attendre une nouvelle version de Chrome.

Cependant, je trouve le processus de construction un peu différent lors du développement d'un extension chrome. Par exemple, lors du test d'une extension, je suis en développement, je le charge dans le navigateur via le " Load unpacked extension " option qui pointe directement vers le code source.

Eh bien, ce n'est pas vraiment différent de tout autre projet, je pense. Selon les fonctionnalités spécifiques à Chrome que vous utilisez, vous pouvez soit simplement développer votre projet et le tester plus tard en le chargeant dans le navigateur, soit simplement lier le chemin "Load unpacked extension" à votre dossier dist/build/public généré. Faire ça, c'est toujours l'état actuel. Cela fonctionne pour moi Wells.

J'espère que cela aide un peu:)

18
répondu morkro 2016-12-18 03:56:13