在JDF项目中使用ES6新特性开发

[loveky]

Note: 目前虽然JDF已经支持使用ES6开发脚本，但线上使用还在前期摸索阶段，请大家根据自己项目实际情况评估使用情况

最近利用业余时间给JDF增加了ES6代码的支持。背后的原理是在项目构建阶段利用Babel将.babel文件转译成ES5代码。关于Babel的更多使用方法可以参考其官网的配置文档。

下面开始正式介绍在利用ES6特性开发前的准备工作:

• 升级JDF到最新版本（>= 1.8.2）
• 进入JDF项目目录，安装基本的Babel preset和plugin。关于preset和plugin的更多说明请参考文档

npm install babel-preset-es2015
npm install babel-plugin-transform-es3-member-expression-literals
npm install babel-plugin-transform-es3-property-literals

• 配置项目的.gitignore文件，忽略node_modules目录。在文件中添加以下内容：

**/node_modules/

• 引入es6-base.js(包含 es5-shim和babel-polyfill)

至此，所有的准备工作就完成了。接下来就可以利用ES6的各种新特性开发了。需要注意的是所有包含了ES6特性的脚本文件扩展名必须是.babel，否则JDF是不会对其进行编译的。

最后是一份简单的FAQ：

Q: ES6都有哪些新特性，有没有推荐的学习资料？
当然有，中文版的有阮一峰出品的ECMAScript 6入门。
英文的有：

• ES6 In Depth来自Mozilla团队博客的一系列文章，每篇讲解一个新特性。建议按时间顺序阅读。
• Understanding ECMAScript 6来自Nicholas C. Zakas大神的一本ES6小书。

Q: 我想使用额外的Babel plugin或preset该怎样配置？
只需在package.json中指定需要额外引入的plugin或preset，例如：

    "babel": {
        "plugins": ["syntax-async-functions","transform-regenerator"],
        "presets": ["stage-0"]
    }

并在JDF项目的目录中安装相关npm package即可。

Q: .babel文件编译出来的代码我看不懂，出了问题如何调试呢？
我们看到的经过Babel转译后的JS是这样的：

这里包含了大量的Babel生成的代码，非常不利于调试。不过不用担心，JDF在本地开发模式中启用了sourceMap，你只需在Chrome开发者工具中的Sources Tab中在你要调试的JS文件目录下找到同名的.babel文件即可。相关JS中的报错信息，都会被映射到转译前的.babel文件的对应位置。

关于sourceMap的更多信息请参考这里。

[keelii]

本地调试用 sourcemap 还好，像咱这种服务器 combo 的方案，线上调试就不太好做，一大堆 sourcemap 到底要不要传到 cdn 呢。

[loveky]

sourcemap肯定不能上cdn，这属于泄露源码了，虽然前端代码本来也什么秘密可言

其实是可以考虑上传到预发环境的 但是sourcemap是预生成的 而combo是在服务器上拼的 这块不是一一对应的