## babel
> Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。
> 通俗的说，就是我们可以用ES6, ES7等来编写代码，Babel会把他们统统转为ES5。
* [babel-core](https://github.com/babel/babel/tree/master/packages/babel-core) 调用Babel的API进行转码
* [babel-loader](https://github.com/babel/babel-loader) babel-loader加载器
* [babel-preset-es2015](https://github.com/babel/babel/tree/master/packages/babel-preset-es2015) 用于解析 ES6
* [babel-preset-react](https://github.com/babel/babel/tree/master/packages/babel-preset-react) 用于解析 JSX
* [babel-preset-stage-0](https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0) 用于解析 ES7 提案
1、安装`babel`。
`npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0`
2、新建babel配置文件`.babelrc`，新建文件名字后面再加一个. 就能创建这类型文件。
`touch .babelrc`
~~~
/* .babelrc */
{
"presets": [
"es2015", // es6
"react", // jsx
"stage-0" // es7
],
"plugins": [
"react-hot-loader/babel"
]
}
~~~
3、修改`webpack.dev.config.js`，增加`babel-loader`的配置！
~~~
'use strict'
const path = require('path')
module.exports = {
/*入口*/
entry: path.join(__dirname, 'src/index.js'),
/*输出到dist文件夹，输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, './dist'), /*输出目录*/
filename: 'bundle.js' /*输出文件名*/
}
// 新增：
/*include：包含，src文件夹下面的以.js结尾的文件，要使用babel解析*/
/*cacheDirectory是用来缓存编译结果，下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
}
}
~~~
现在就能正确转义ES6语法了。
4、修改`src/index.js`
~~~
/* 使用es6的箭头函数 箭头函数不需要配置也能用，大概是因为认可度比较高的关系吧哈哈~ */
let func = str => {
document.getElementById('app').innerHTML = str
/* 解构就需要配置babel */
var arr = [{name: 'zep'}, {age: 22}, {jog: 'Engineer'}]
var [first, ...age] = arr
console.log(age)
var obj = {name: 'zep', age: 22, job: 'Engineer'}
var {name, ...other} = obj
console.log(name) // 打印除了第一个属性外其他全部属性，解构的是数组就必须用数组包起来，对象同理
}
func('我现在在使用Babel!')
~~~
5、执行打包命令 `webpack --config webpack.dev.config.js`。
直接打开`index.html`，可以看到输出的效果。可以直接打开dist里面的`bundle.js`，看到被转换后的ES5代码。
Q: `babel-preset-state-0,babel-preset-state-1,babel-preset-state-2,babel-preset-state-3`有什么区别？
A: 每一级包含上一级的功能，比如 state-0包含state-1的功能，以此类推。state-0功能最全。具体可以看这篇文章：[babel配置-各阶段的stage的区别](https://www.vanadis.cn/2017/03/18/babel-stage-x/)
参考地址：
1. [https://segmentfault.com/a/1190000008159877](https://segmentfault.com/a/1190000008159877)
2. [http://www.ruanyifeng.com/blog/2016/01/babel.html](http://www.ruanyifeng.com/blog/2016/01/babel.html)
