是否可以在Chrome扩展程序中使用ES6？ [英] Is it possible to use ES6 in a Chrome Extension?

问题描述

我刚刚开始构建Chrome扩展程序，并且很好奇，如果我能够使用ES6。

I've just started building a Chrome Extension and was curious if I'd be able to use ES6 with it.

在以下兼容性表，Chrome 41显示它目前具有41％的兼容性。这个41％的关键功能如 class 不包括在内，所以如果有其他选项，比如透析，我很好奇。

In the following compatibility table, Chrome 41 shows that it currently has 41% compatibility. A couple key features like class are not included in that 41% and so I was curious if there were other options, such as transpiling.

我已经使用Ember CLI使用了 Babel ，一个ES6的转换器，它已经很好用了。

I've already used Babel, an ES6 transpiler, with Ember CLI and it has worked great.

然而，在开发Chrome扩展时，我发现构建过程有些不同。例如，当测试我正在开发的扩展时，我通过直接指向源代码的加载解压扩展选项将其加载到浏览器中。

However, I find the build process a bit different when developing a chrome extension. For example, when testing an extension I'm developing, I load it into the browser via the "Load unpacked extension" option which points directly to the source code.

对于我正在构建的扩展，我使用 yeoman铬延伸生成器为基础。理想情况下，我希望能够设置一些挂钩到 debug 任务中的grunt任务，然后在将代码更改为单独的目录时，转移代码。从那里，我可以通过加载解压缩扩展名选项加载该目录的内容。但是，我不太清楚如何做到这一点，或者如果还有其他选项。

For the extension I am building, I am using the yeoman chrome extension generator as a base. Ideally, I'd like to be able to set up some sort of grunt task that hooks into the debug task and then transpiles the code any time it changes to a separate directory. From there, I could load the contents of that directory via the load unpacked extension option. However, I'm not exactly sure how to do this or if there are other options instead.

推荐答案

/ strong>这个答案最初是在2015年写的。兼容性表格链接显示，Chrome，FF，Edge和Safari与现在比Babel更兼容。

Update This answer was originally written in 2015. The compatibility table link shows Chrome, FF, Edge, and Safari are more compatible than Babel now.

Chrome 49+，FF 45+可能无法从Babel中受益。

Chrome 49+, FF 45+ may not benefit from Babel. Other browsers, may need transpiling.

原始

我目前正在开发ES6中的Chrome扩展程序。你的问题似乎比较普遍，所以我试着根据我的经验来回答这个问题。

I am also currently developing a Chrome Extension in ES6. Your questions seems to be more general so I try to answer this based on my experiences.

在下面的兼容性表，Chrome 41显示它
目前具有41％的兼容性。一些关键功能，如 class 是
不包括在41％中，所以我很好奇，如果有其他
选项，如透析。 / p>

In the following compatibility table, Chrome 41 shows that it currently has 41% compatibility. A couple key features like class are not included in that 41% and so I was curious if there were other options, such as transpiling.

这是真的。您可以轻松地使用所有现有的ES6功能，而不用担心和透明。每个新的Chrome版本都有一些更多的功能，这使得令人兴奋的等待;）Chrome 44现在涵盖了48％，包括类。

This is true. You can easily use all existing ES6 Features without worries and transpiling. Every new Chrome release has some more features, which makes it quite exciting to wait ;) Chrome 44 now covers 48%, including class.

但是，如果你想要完整的ES6，那么一个编译器仍然是最好的选择。您不必担心支持的功能，只需编写ES6代码即可编译成正确的ES5代码。

However, if you want go full ES6 then a compiler is still the best option. You don't have to worry about supported features and simply write ES6 code, which will be compiled to proper ES5 code.

我目前的设置是 Browserify （通过 grunt-browserify ）使用 Babelify 作为编译器。
通过浏览功能，您还可以使用ES6模块，该模块为您提供ES6的全部功能。

My current setup is Browserify (via grunt-browserify) using Babelify as compiler. Browserify enables you to also use ES6 Modules, which give you the full power of 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.

这意味着我的扩展仍然运行ES5代码，但这对我来说并不重要我仍然可以在ES6写。

That means my Extension still runs with ES5 code though, but that doesn't matters much for me as I still can write in ES6.

如果您真的想使用可用的ES6功能（以前使用过的），那么可能会非常令人沮丧/烦人，因为您必须先查看Chrome中的可用内容，主要是等待新的Chrome版本。

If you really want to use available ES6 features (which I did before), it can be quite frustrating/annoying as you always have to look up whats possible in Chrome and mostly it's waiting for a new Chrome release.

然而，在开发
chrome扩展时，我发现构建过程有所不同。例如，当测试扩展我是
开发，我通过Load unpacked
extension选项将其加载到浏览器中，该选项直接指向源代码。

However, I find the build process a bit different when developing a chrome extension. For example, when testing an extension I'm developing, I load it into the browser via the "Load unpacked extension" option which points directly to the source code.

那么与其他任何我想的项目并没有什么不同。根据您正在使用的Chrome特定功能，您可以开发项目，然后通过将其加载到浏览器中进行测试，或者将加载解压缩扩展路径链接到生成的 dist / build /公开文件夹。这样做，它总是当前的状态。这对我来说是最好的。

Well it's not really different to any other project I think. Depending on what Chrome specific features you are using, you could either just develop your project and later test it via loading it into the browser or just link the "Load unpacked extension" path to your generated dist/build/public folder. Doing that, it's always the current state. This works for me the best.

希望有所帮助：）

这篇关于是否可以在Chrome扩展程序中使用ES6？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！