## 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)
