首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >可以在Chrome扩展中使用ES6吗?

可以在Chrome扩展中使用ES6吗?
EN

Stack Overflow用户
提问于 2015-03-22 01:16:23
回答 1查看 10.7K关注 0票数 31

我刚刚开始构建一个Chrome扩展,我很好奇是否可以在它上使用ES6。

在下面的compatibility table中,Chrome41显示它目前有41%的兼容性。像class这样的几个关键特性没有包括在这41%的数据中,所以我很好奇是否还有其他选择,比如转译。

我已经使用了Babel,一个带有Ember CLI的ES6转译器,它工作得很好。

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-05 23:05:34

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

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

原始

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

在下面的compatibility table中,Chrome41显示它目前有41%的兼容性。像class这样的几个关键特性没有包括在这41%的数据中,所以我很好奇是否还有其他选择,比如转译。

这是真的。您可以轻松地使用所有现有的ES6功能,而无需担心和转换。每一个新的Chrome版本都有更多的功能,这使得等待变得非常令人兴奋;) Chrome44现在覆盖了48%,包括class

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

我当前的设置是Browserify (通过grunt-browserify),使用作为编译器。Browserify使您能够使用ES6模块,这些模块为您提供了ES6的全部功能。

Gruntfile.js

代码语言:javascript
运行
复制
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扩展时,我发现构建过程有点不同。例如,当测试我正在开发的扩展时,我通过“加载未打包的扩展”选项将其加载到浏览器中,该选项直接指向源代码。

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

希望这会有一点帮助:)

票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29185601

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档