webpack之babel学习笔记

babel 中文官网,中文学习手册.
babel的作用：官网的解释是，Babel 是一个 JavaScript 编译器。简单的说，目前作用就是把es6转成浏览器支持的es5.

1. 先创建个文件夹，随便去个名字webpack吧
   在webpack文件夹里右键Git Bash Here

$ npm init

2. 要使用它就先安装：

$ cnpm install babel-cli -g //全局安装
$ cnpm install babel-cli --save-dev //本地安装并添加到开发环境

3. 下载安装babel,es6转es5插件

$ cnpm install babel-preset-es2015 --save-dev

4. 配置.babelrc文件，这个文件是要放在webpack文件夹中
   因为我们是要把es6转为es5所以里面的值是es2015

{
  "presets": ["es2015"]
}

5. 配置完了，接下来就是操作了。在webpack文件夹里创建es6.js
   输入内容

//es6.js
let a=10;

6. 测试，执行

$ babel es6.js

  ```

"use strict";
var a = 10;
```
就是说明我们配置成功了。

7. 接下来我们可以以文件形式输出
   执行

$ babel es6.js --out-file es5.js

`--out-file`可以简写为` -o`

这时候会发现webpack文件夹多出了es5.js;内容也是

  ```
  "use strict";
  var a = 10;
  ```

8. 如果一个个的转太麻烦了可以设置批量转换，一个文件夹的转换
   创建两个文件夹src bundle,把es6.js 放到src文件夹中.执行命令

$ babel src --out-dir bundle

--out-dir可以简写为-d
此时可以发现bundle文件夹里有编译后的es6.js了

9. 每次输出命令太麻烦了，我们可以加--watch ，

$ babel src --out-dir bundle --watch

这样每次改变src文件夹里的内容，保存后，bundle的内容将自动转换。

10. 如果觉得输出这么长的命令不方便还可以简化
    打开package.json,设置

"scripts": {
    "bundle": "babel src --out-dir bundle --watch"
  },

这样只需运行

$ npm run bundle 就可以了