很久很就以前就使用过webpack，觉得是一个很神奇的构建工具，当时是跟着坑爹的文档配置，很多的东西都不知其所以然，babel就是其中的一个，在不知其所以然的情况下，很多的东西都记不住，最近耐心的看了下相关文档，终于领悟到了那么一点点，为了方便以后配置和使用遂作记录。
- 全局配置babel-cli
npm install babel-cli -g //全局安装babel 这样的话，就可以在命令行中直接调用babel命令
为什么就可以用babel命令了呢？是因为在npm目录C:\Users\Administrator\AppData\Roaming\npm里面会生成一个babel.cmd文件，打开你会发现还有node.cmd文件。若是打开没有发现的话，是因为PC没有设置显示隐藏文件（做开发最好是显示隐藏文件名还有隐藏后缀）。
- 在项目的文件夹中安装babel需要的转码规则集
$ npm install --save-dev babel-preset-latest //最新的转码规则
#不同阶段的转码规则（根据需要安装）
$ 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
关于不同阶段的转码规则理解这个是要了解一段历史，简单来说就是ES6是2015年6月发布的，TC39协会决定每年的6月份升级下js语法规则，全球的每个人都可以向TC39提出议案，议案要经历4个阶段，TC39成员需要开会决定议案是否可行，基本上到了stage-2，这个议案几乎就毫无悬念的成为下一个版本。很多的人叫ES6叫做ES2015，这个没毛病，后面又听到什么ES2017，ES2018...也没有毛病；但是还有叫ES7，ES8，那就有点疯狂了，如果每年都升级一个版本的话，js这个语言更新的频率也就太快了，本人更愿意接受后面的版本叫做ES6.x的观点。
- 在项目的文件夹中配置.babelrc文件(.babelrc文件是一个json文件)
{
"presets":[
"latest",
"stage-2"
], //这里面配置选码规则
"plugins":[] //这里面配置一些插件，例如压缩代码等
}
- 命令行转码babel-cli
# 转码结果输出到标准输出
$ 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 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。解决办法是将babel-cli安装在项目之中。
# 安装
$ npm install --save-dev babel-cli
- 改写
package.json文件
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib" //src 和 lib表示需要转码的目录文件夹以及指定生成的文件夹
},
}
转码的时候，就执行下面的命令。
$ npm run build
完毕！~
