是否可以在 Chrome 扩展中使用 ES6？

Question

我刚刚开始构建一个 Chrome 扩展，并且很好奇我是否能够将 ES6 与它一起使用。

在下面的compatibility table中，Chrome41表示目前有41%的兼容性。像 class 这样的几个关键功能不包括在这 41% 中，所以我很好奇是否还有其他选项，例如转译。

我已经使用了 Babel，一个带有 Ember CLI 的 ES6 转译器，并且效果很好。

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

对于我正在构建的扩展，我使用 yeoman chrome extension generator 作为基础。理想情况下，我希望能够设置某种挂钩到 debug 任务的 grunt 任务，然后在代码更改到单独的目录时随时转换代码。从那里，我可以通过 load unpacked extension 选项加载该目录的内容。但是，我不确定该怎么做，或者是否还有其他选择。

Answer 1

更新这个回答最初是2015年写的，兼容性tablelink说明Chrome，FF，Edge，Safari都是现在比 Babel 更兼容。

Chrome 49+, FF 45+ 未必受益于 Babel。其他浏览器，可能需要转译。

原创

我目前也在开发 Chrome ES6 扩展。你的问题似乎比较笼统，所以我试着根据我的经验来回答这个问题。

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%，包括 class.

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

我当前的设置是 Browserify（通过 grunt-browserify) using Babelify 作为编译器。 Browserify 使您还可以使用 ES6 模块，它为您提供 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 编写代码。

如果你真的想使用可用的 ES6 特性（我以前做过），它可能相当 frustrating/annoying 因为你总是必须在 Chrome 中查找可能的内容并且大部分时间都在等待新 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.

嗯，这与我认为的任何其他项目并没有什么不同。根据您使用的 Chrome 特定功能，您可以只开发您的项目，然后通过将其加载到浏览器中来测试它，或者只 link 您生成的 [=] 的 "Load unpacked extension" 路径14=] 文件夹。这样做，它始终是当前状态。这最适合我。

希望能有所帮助:)

是否可以在 Chrome 扩展中使用 ES6？

Is it possible to use ES6 in a Chrome Extension?

javascript

google-chrome

google-chrome-extension

gruntjs

ecmascript-6