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

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

在下文中，Chrome41显示它目前具有41%的兼容性。这41%中没有包括一些关键特性，如

class

，因此我很好奇是否还有其他选择，比如传输

我已经使用了ES6 transpiler和Ember CLI，它工作得非常好

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

---

对于我正在构建的扩展，我将使用作为基础。理想情况下，我希望能够设置某种grunt任务，将其挂接到

debug

任务中，然后随时将代码传输到单独的目录中。从那里，我可以通过

loadunpacketextension

选项加载该目录的内容。然而，我不确定该怎么做，或者是否还有其他选择。

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

铬49+、FF 45+可能不会受益于巴别塔。其他浏览器，可能需要传输

原创

我目前还在ES6中开发一个Chrome扩展。你的问题似乎更一般，所以我试着根据我的经验来回答这个问题

在下文中，Chrome 41显示 目前有41%的兼容性。一些关键特性，如

class

，如下所示： 不包括在这41%之内，所以我很好奇是否还有其他原因 选项，例如传输

这是真的。您可以轻松地使用所有现有的ES6功能，而无需担心和传输。每一个新的Chrome版本都有更多的功能，这让等待变得非常激动人心；）Chrome44现在覆盖了48%，包括

class

然而，如果您想使用完整的ES6，那么编译器仍然是最好的选择。您不必担心支持的特性，只需编写ES6代码，即可将其编译为正确的ES5代码

我当前的设置是使用as编译器进行浏览。 Browserify使您还可以使用ES6模块，这为您提供了ES6的全部功能

grunfile.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版本

然而，我发现在开发一个 铬延伸。例如，在测试扩展时，我 在开发过程中，我通过“LoadUnpacket”按钮将其加载到浏览器中 “扩展”选项，该选项直接指向源代码

嗯，我认为这和其他任何项目都没有什么不同。根据您使用的Chrome特定功能的不同，您可以只开发项目，然后将其加载到浏览器中进行测试，或者只将“Load Unpacket extension”路径链接到生成的

dist/build/public

文件夹。这样做，它始终是当前状态。这对我最有效

---

希望这有点帮助：）

我使用Babel将ES6传输到ES5，以便使用Grunt任务实现Chrome扩展。我唯一没有做到的就是异步加载模块——我不得不将它们合并到一个文件中。虽然我不能提供一个更完整的答案，因为我不使用约曼坦。您能否提供Grunfile相关部分的示例？另外，我认为我在chrome扩展中使用yeoman并不重要。我刚才提到，因为它使用Grunt。Chrome49将提供对类的完全支持，cf.。我使用Chrome59，我可以使用几乎所有的功能es6@onmyway133火狐也是