babel 中文官网,中文学习手册.
babel的作用：官网的解释是，Babel 是一个 JavaScript 编译器。简单的说，目前作用就是把es6转成浏览器支持的es5.
- 先创建个文件夹，随便去个名字
webpack吧
在webpack文件夹里右键Git Bash Here
$ npm init
- 要使用它就先安装：
$ cnpm install babel-cli -g //全局安装
$ cnpm install babel-cli --save-dev //本地安装并添加到开发环境
- 下载安装
babel,es6转es5插件
$ cnpm install babel-preset-es2015 --save-dev
- 配置
.babelrc文件，这个文件是要放在webpack文件夹中
因为我们是要把es6转为es5所以里面的值是es2015
{
"presets": ["es2015"]
}
- 配置完了，接下来就是操作了。在
webpack文件夹里创建es6.js
输入内容
//es6.js
let a=10;
- 测试，执行
$ babel es6.js
```
"use strict";
var a = 10;
```
就是说明我们配置成功了。
- 接下来我们可以以文件形式输出
执行
$ babel es6.js --out-file es5.js
`--out-file`可以简写为` -o`
这时候会发现webpack文件夹多出了es5.js;内容也是
```
"use strict";
var a = 10;
```
- 如果一个个的转太麻烦了可以设置批量转换，一个文件夹的转换
创建两个文件夹srcbundle,把es6.js放到src文件夹中.执行命令
$ babel src --out-dir bundle
--out-dir可以简写为-d
此时可以发现bundle文件夹里有编译后的es6.js了
- 每次输出命令太麻烦了，我们可以加
--watch，
$ babel src --out-dir bundle --watch
这样每次改变src文件夹里的内容，保存后，bundle的内容将自动转换。
- 如果觉得输出这么长的命令不方便还可以简化
打开package.json,设置
"scripts": {
"bundle": "babel src --out-dir bundle --watch"
},
这样只需运行
$ npm run bundle 就可以了
