有可能在Chrome扩展中使用ES6吗

Is it possible to use ES6 in a Chrome Extension?

本文关键字：ES6 Chrome 扩展 有可能      更新时间：2023-09-26

我刚刚开始构建Chrome扩展，很好奇是否可以将ES6与它一起使用。

在下面的兼容性表中，Chrome 41显示它目前具有41%的兼容性。像class这样的几个关键功能不包括在这41%中，所以我很好奇是否还有其他选择，比如transpiling。

我已经在EmberCLI中使用了Babel，一个ES6转译器，它运行得很好。

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

对于我正在建设的扩展，我使用yeoman铬扩展生成器作为基础。理想情况下，我希望能够设置某种挂接到debug任务中的grunt任务，然后在代码更改到单独目录时随时转换代码。从那里，我可以通过load unpacked extension选项加载该目录的内容。然而，我不知道该怎么做，也不知道是否有其他选择。

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

Chrome 49+、FF 45+可能不会从巴别塔中受益。其他浏览器，可能需要转译。

原始

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

在下面的兼容性表中，Chrome 41显示目前具有41%的兼容性。像class这样的几个关键特性是不包括在这41%中，所以我很好奇是否还有其他选项，如运输。

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

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

我当前的设置是使用Babelify作为编译器的Browserify

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文件夹。这样做，它总是当前的状态。这对我来说效果最好。

希望这能有所帮助：）

相关文章：