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

Question

我刚刚开始构建 Chrome 扩展程序，很好奇是否能够使用 ES6。

如下compatibility table ，Chrome 41显示目前兼容性为41%。诸如 class 之类的几个关键功能并未包含在这 41% 中，因此我很好奇是否还有其他选项，例如转译。

我已经使用过Babel ，一个 ES6 转译器，带有 Ember CLI，效果非常好。

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

对于我正在构建的扩展，我使用 yeoman chrome extension generator作为基地。理想情况下，我希望能够设置某种与 debug 任务 Hook 的 grunt 任务，然后在代码更改到单独的目录时将其转译。从那里，我可以通过加载解压的扩展选项加载该目录的内容。但是，我不太确定如何执行此操作或是否有其他选择。

Answer 1

更新这个答案最初是在 2015 年写的。兼容性表链接显示 Chrome、FF、Edge 和 Safari 比现在的 Babel 更兼容。

Chrome 49+、FF 45+ 可能无法从 Babel 中受益。其他浏览器，可能需要转译。

原创

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

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 代码。

我当前的设置是使用 grunt-browserify Browserify (通过 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 功能(我之前就这样做过)，这可能会非常令人沮丧/烦人，因为您总是必须查找 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 特定功能，您可以仅开发项目，然后通过将其加载到浏览器中进行测试，或者仅将“加载解压的扩展程序”路径链接到生成的 dist/build/public 文件夹。这样做，它始终是当前状态。这对我来说是最好的。

希望能有所帮助:)