[心得] 自己动手打造 ES7 开发环境

台湾朋友盧承億投稿

因为前阵子接触了 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入门及资源指引

三、利用ESLint检查代码质量

四、构建一个安全的 JavaScript 沙箱

五、入门Webpack，看这篇就够了

六、第三届CSS大会广州找场地啦～～求介绍～～

七、Web Components 是个什么样的东西

八、[React启蒙系列] React和Babel的基本使用

九、[React启蒙系列] 学习React前需要理解的名词

十、[React启蒙系列] 初探React

十一、JavaScript 被忽视的细节

十二、[心得] 如何提高 React App 的性能

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态，推动web标准化的发展

官网：http://fequan.com

微博：fequancom | QQ群：41378087

长按二维码关注我们

投稿：[e-mail]

赞助合作：[e-mail]