ES6出来很久了，项目中没有用到，我也一直没仔细去看。一直抱着先把ES5打扎实再说，然后时间在不知不觉中过去了。我还是了解地太少太少了。终于，开始踏出接触新知识的第一步了。
Babel的作用就是将ES6代码转译成现代浏览器基本都支持的ES5代码。本文简单记录Babel的入门。
文章较水，就是以自己的理解整理网上现有的一些资源教程，供自己参考。
安装
先把安装Babel命令行工具和预设置：
npm install --save-dev babel-cli babel-preset-env
可能的转码规则：
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
其他可能用到的npm包：
"babel-core" // Babel的API代码
"babel-node" // 直接运行ES6脚本
"babel-loader" // 在webpack中使用的加载器
"babel-register" // 自动对require的.js .jsx .es .es6进行转码
"babel-polyfill" // 支持ES6的一些新特性，比如Generator，Promise
"babel-plugin-transform-runtime" // 运行时按需加载polyfill
配置
在项目根目录下创建一个.babelrc文件，配置相关属性如下。
{
"presets": [ //预设置的语法
"es2015",
"stage-2"
],
"plugins": ["transform-runtime"], //插件
"comments": false, //除掉脚本中的注释
}
也可以在package.json文件中配置：
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// babel相关属性配置
}
}
使用
利用npm script的形式，在package.json中编写脚本：
{
// ...
"scripts": {
"build": "babel src -d lib"
},
}
运行时执行以下命令：
npm run build
Babel命令行的语法如下：
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
这样就可以简单地运行Babel了。
参考资料：