NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。
项目地址：https://github.com/future-challenger/petshop
现在开始Babel
在开始使用Babel之前，假设
1.你已经安装了nodejs，并且已经熟悉了Js。
2.你也可以使用npm安装各种依赖包。
3.而且你也对ES6（后来改为ES2015）有一定程度的熟悉。
同时假设你已经安装了yarn，并且也熟悉了yarn。Yarn最大的优点就是它比npm要快很多，因为yarn只把需要的库下载一次，之后用到的时候直接使用本地缓存的版本。npm每次都会下载这些库。这简直就是浪费生命。如果你还没有安装yarn，也没有关系，下面也会有npm的使用方法。
接下来开始安装配置Babel。安装babel-cli
yarn add babel-cli --dev // npm install --save-dev babel-cli</div>
安装babel的presets。
yarn add babel-preset-es2015 --dev // npm install --save-dev babel-preset-es2015</div>
这个时候你就可以使用ES2015的特性了。但是，这还不够，比如我不想用Promise我想用更加方便的async/await语法。只有es2015这个preset是不够的。
Babel的plugin和preset
Babel本身不处理语言特性的转码。这些功能都是由plugin和preset实现的（preset也是一个plugin的集合）。如上文所述，要使用es2015的内容就需要安装babel-preset-es2015这个preset。要使用async/await那么就需要安装对应的preset或者插件。为了简单我们安装preset：babel-preset-stage-0。preset stage-0包含了async/await相关的插件: babel-plugin-syntax-async-functions、babel-plugin-transform-regenerator。
yarn add babel-preset-stage-0 --dev // npm install --save-dev babel-preset-stage-0
</div>
这样还是不能在项目中使用es7的async/await了。还需要更多的配置，有两种方法可以达到目的：
1.使用babel-polyfill。有一个不好地地方，babel-polyfill会污染global对象，所以不适合于library之类的使用。仅适合于web app使用。
2.使用babel运行时转码工具，transform-runtime插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤其适合于library一类的项目使用。
分别介绍这两种方法。
安装babel-polyfill:
yarn add babel-polyfill --dev // npm install --save-dev babel-polyfill
</div>
之后，在你的项目的入口文件的最上方引入babel-polyfill。比如我现在有一个Express的Web App，那么的入口文件就是开启这个app的index.js文件。在这个文件的最上方引入polyfill，require('babel-polyfill')。或者你的入口文件已经是ES2015的写法了，那么就直接import，import 'babel-polyfill'。
使用transform-runtime也非常简单。安装：
yarn add babel-plugin-transform-runtime --dev // npm install --save-dev babel-plugin-transform-runtime
</div>
另外还需要安装babel-runtime:
yarn add babel-runtime // npm install --save babel-runtime</div>
之后在.babelrc文件中添加如下的配置，两个二选其一即可：
// without options
{
"plugins": ["transform-runtime"]
}
// with options
{
"plugins": [
["transform-runtime", {
"helpers": false, // defaults to true
"polyfill": false, // defaults to true
"regenerator": true, // defaults to true
"moduleName": "babel-runtime" // defaults to "babel-runtime"
}]
]
}
</div>
剩下的就是欢畅的使用async/await了。
另外如果要使用Object.assing这样的方法的话，也可以使用插件：babel-plugin-transform-object-assign，如果要使用解构赋值可以使用插件：babel-plugin-transform-object-rest-spread。当然这些都包含在了stage-0这个preset中。
现在就开始写ES2015的代码吧。在项目中安装ExpressJs，创建一个index.js文件。我们来试着创建一个小小的web app作为练习：
import Express from 'express'
let app = Express()
app.get('/', (req, res) => {
res.send('hello world')
})
app.listen(8080, () => console.log('server is running at http://localhost:8080'))
</div>
运行命令：
./node_modules/.bin/babel-node index.js --preset es2015, stage-0
</div>
使用命令*babel-node**就可以让代码运行起来，后面的参数指定了在转义js代码的时候使用的preset和plugin。
Babel官方推荐的方法是时候用.babelrc文件，这一方式可以更加灵活。在项目的更目录上创建.babelrc文件，在里面添加你安装的preset和plugin的描述：
{
"presets": ["es2015", "stage-0"]
}
</div>
这样可以直接使用babel-node来执行代码，或者使用命令babel来转义代码。如：
babel -w code/ -d build/</div>
babel命令会从配置文件中读取配置，来变异code/目录下的文件，并把转义之后的JavaScript文件导出到build/目录下。还有命令行里的参数-w，这个命令参数指定的是watch，每次code目录的文件修改后都会触发babel命令的再次执行。
在文件中使用Source Maps
上面看起来很不错了。但是还有一个问题，在你调试代码的时候，你调试的实际是babel命令转码之后的js，不是原来你编写的源代码所在的文件。调试的不是源文件，多少会有些不便。比如下面的文件会抛出一个异常：
async function errorAsyncFunc() {
try{
throw new Error('Async function error')
} catch(e) {
throw e
}
}
errorAsyncFunc()
</div>
在转码命令中加一个--source-maps可以解决这个问题：
babel code/ -d build/ --source-maps
最后在package.json里添加scripts节点：
"scripts": {
"build": "babel src -d build --source-maps",
"start": "node build/index.js"
},
</div>
接下来：
npm run build</div>
Gulp出场
上文讲述了如何使用Babel实现ES201x的开发。但是在正式的开发中，上面的这些配置还略显不足，尤其是你的项目包括web端、server端，尤其web端不仅处理ES201x的代码还需要处理。所以需要Gulp出场。
这玩意儿看起来很复杂，你定义了编译的过程。其实掌握了以后很好用，尤其是可以自动处理很多东西，节约大把时间。要使用Gulp，必须先安装NodeJS。这个基本是标配。然后你会用到它的命令行工具。
安装Gulp
在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以，如果你已经安装过gulp之前的版本需要先删除：
npm rm --global gulp</div>
安装gulp-cli