Question

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

在以下compatibility table中，Chrome 41显示它目前具有41％的兼容性。像class这样的一些关键功能不包括在41％中，所以我很好奇是否有其他选项，例如转换。

我已经使用了Babel，一个ES6转换程序，使用了Ember CLI，它运行得很好。

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

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

Answer 1

更新此答案最初写于2015年。兼容性表格链接显示Chrome，FF，Edge和Safari 更多与Babel兼容。

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

<强>原始

我目前还在开发ES6中的Chrome扩展程序。你的问题似乎更为笼统，所以我试着根据自己的经验回答这个问题。

在以下compatibility table中，Chrome 41显示了它目前有41％的兼容性。 class等几个关键功能不包括在41％中，所以我很好奇是否有其他的选项，例如transpiling。

这是事实。您可以轻松使用所有现有的ES6功能，无需担心和转换。每个新的Chrome版本都有一些更多的功能，这使得等待非常令人兴奋;）Chrome 44现在占48％，包括class。

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

我当前的设置是 Browserify （通过grunt-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版本。

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

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

希望有所帮助：）

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

1 个答案: