台湾朋友盧承億投稿
因为前阵子接触了 ES7 的 async/await，习惯了之后觉得 ES6 的 Promise 很难用XD，于是想用 babel 来当转译器，构建 ES7 的开发环境来玩 async/await。
开发环境的构建
├── package.json
├── node_modules
├── gulpfile.js
├── index.js
├── src
│ ├── index.js
│ └── utils.js
├── build
├── index.js
└── utils.js
1、package.json 跟 node_modules 大家应该都很熟悉，不多做说明了。
2、gulpfile.js 是 gulp 的任务配置。
3、src 里面放 ES7 的 source code。
4、build 里面放被 babel 转译过后的 ES5 程序代码。
5、index.js 是整个程序的起点，什么都不做，只跑 build 里面的 index.js。
// index.js
require('./build/index');
开发流程
开发时只动 src 里面的代码，Gulp 会自动转译 src 里面的代码并放到 build，要执行时就跑最外层的 index.js，index.js 会自动跑 build/index.js。
Gulp 配置
Gulp 是个很好用的自动化工具，可以运用一些别人写好的套件来加速开发流程，如 compile、minify、uglify 等等。对 Gulp 不太熟悉的可以先看看Gulp 入门指南（https://github.com/nimojs/gulp-book）。
在 Gulp 内使用 babel
// gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babelify',function() { return gulp.src('src/**/*.js').pipe(babel({ presets: ['es2015', 'es2016', 'es2017'], plugins: [["transform-runtime", { "polyfill": false, "regenerator": true }]] })).pipe(gulp.dest(build)) });只要在 command line 输入 gulp babelify，gulp 就会把 src 中所有的 js 文件当做来源，接着用 babel 将他们全部转译成 ES5 的代码，最后再输出到 build 里面去。这部分需要用到这些模块：
{
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-es2016": "^6.11.3",
"babel-preset-es2017": "^6.14.0",
"gulp-babel": "^6.1.2"
}
错误处理
虽然上面那段配置已经可以把 code 转成 ES5，但如果在转译的过程中有错误(可能语法错误)，那就必须把错误输出，所以要在 babel 之后加上这一段：
.on('error', function(err){
console.log(err.stack);
this.emit('end');
})
如果有错误就会输出类似这样：
Source Map
有时候写程序会遇到错误需要 debug，如果程序发生错误，会告诉你发生在哪一行：
它告诉我们在 build/index.js 的第五行发生错误，但 build 内的程序代码是 babel 产生的，所以会很丑，转译过后的程序代码跟原本的有很大的差异。
举个例子，转译前：
// before.js
async function hello(){ return 'Hello World';}hello();转译后：
这样会让我们很难 debug。我们想知道的是他错在 source code 的第几行，这时候就要用 source map 了。
Source Map 会储存着转换前后程序代码的位置，可以自动做对应。我们只需要在里面加上 sourcemaps，现在的 gulpfile.js 长这样：
查看图片 这样 babel 在转译的过程中就会自动产生 source map 了。但还有一个问题就是 node 本身并不支持 source map，所以需要用模块 source-map-support 来加载 source map，用法很简单，只要在程序起点加上一行就可以了：
// index.js
require('source-map-support').install(); // 加上這一行
require('./build/index');
再跑一次已经可以显示出 source code 中错误发生地方：
查看图片 可以看出是在 src/index.js 的第三行发生错误，这部份会用到这两个模块：
{
"gulp-sourcemaps": "^1.6.0",
"source-map-support": "^0.4.2"
}
Watch
现在已经完成大部分功能了，但每次修改 src 中的档案都要重新 gulpbabelify 才能转译，所以想让 gulp 自动监控档案，有任何变化就进行转译。
要达到这个效果，使用的是 gulp 的 watch 功能，在 gulpfile.js 中加上这一段：
gulp.task('watch', function(){ return gulp.watch(['src/**/*.js'], ['babelify']);});gulp.task('default', ['babelify', 'watch']);这样 gulp 就会自动监控 src 中所有 js 文件，有任何变动就进行 babelify。
心得
感觉这个环境挺方便，只要在 command line 上跑 gulp，gulp 就会自动babelify 并且监控 js 文件。
如果觉得照上面的步骤慢慢做很麻烦，这边有现成的 github repo （https://github.com/Larry850806/nodejs-ES7-template），也欢迎任何意见或Pull Request。
【您可能感兴趣的文章】
八、[React启蒙系列] React和Babel的基本使用
前端圈--打造专业的前端技术会议
为web前端开发者提供技术分享和交流的平台
打造一个良好的前端圈生态，推动web标准化的发展
官网：http://fequan.com
微博：fequancom | QQ群：41378087
长按二维码关注我们
投稿：content@fequan.com
赞助合作：apply@fequan.com
