我刚刚开始构建一个Chrome扩展,我很好奇是否可以在它上使用ES6。
在下面的compatibility table中,Chrome41显示它目前有41%的兼容性。像class
这样的几个关键特性没有包括在这41%的数据中,所以我很好奇是否还有其他选择,比如转译。
我已经使用了Babel,一个带有Ember CLI的ES6转译器,它工作得很好。
然而,在开发chrome扩展时,我发现构建过程有点不同。例如,当测试我正在开发的扩展时,我通过“加载未打包的扩展”选项将其加载到浏览器中,该选项直接指向源代码。
对于我正在构建的扩展,我使用yeoman chrome extension generator作为基础。理想情况下,我希望能够设置某种类型的grunt任务,该任务与debug
任务挂钩,然后在代码更改到单独的目录时随时转换代码。在那里,我可以通过load unpacked extension
选项加载该目录的内容。然而,我不太确定如何做到这一点,或者是否有其他选择。
发布于 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
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
文件夹中。这样做,它始终是当前状态。这对我来说是最好的。
希望这会有一点帮助:)
https://stackoverflow.com/questions/29185601
复制相似问题