前言
由于各大瀏覽器并對es6的并沒有完成支持皮迟，我們開發(fā)前端項目時需要使用Babel來將ES6代碼編譯為ES5慕嚷。 配置.babelrc文件時一般配置為如下：
{"presets":["es2015"榛了，"react","stage-0"],"plugins":[]}
這個配置文件的意思。首先，這個配置文件是針對babel 6的待秃。babel 6做了一系列模塊化居触，不像Babel 5一樣把所有的內(nèi)容都加載妖混。
如果需要編譯es6老赤，我們需要設(shè)置presets包含es2015，也就是預(yù)先加載es6編譯的模塊制市。
如果需要編譯jsx抬旺，我們需要設(shè)置presets包含react，也就是預(yù)先加載react編譯的模塊祥楣。
如果需要編譯es7开财，我們需要設(shè)置presets包含stage-0，也就是預(yù)先加載es7編譯的模塊误褪。
stage不同階段的區(qū)別
es7不同階段語法提案的轉(zhuǎn)碼規(guī)則模塊（共有4個階段）责鳍，分別是stage-0，stage-1兽间，stage-2历葛，stage-3。
stage-0
stage-0的功能范圍最廣大嘀略，包含stage-1, stage-2以及stage-3的所有功能啃洋，同時還另外支持如下兩個功能插件：
transform-do-expressions
這個插件是為了方便在 jsx寫if/else表達(dá)式而提出的.
眾所周知，react中jsx對條件表達(dá)式支持的不是太好屎鳍，你不能很方便的使用if/else表達(dá)式宏娄，要么你使用三元表達(dá)，要么用函數(shù)逮壁。例如你不能寫如下的代碼：
varApp=React.createClass({render(){let{color}=this.props;return({if(color=='blue'){;}elseif(color=='red'){;}else{;}}})}})
而只能這么寫孵坚，
varApp=React.createClass({render(){let{color}=this.props;constgetColoredComponent=color=>{if(color==='blue'){return;}if(color==='red'){return;}if(color==='green'){return;}}return({getColoredComponent(color)})}})
transform-function-bind
這個插件其實就是提供過::這個操作符來方便快速切換上下文this。
使用bind切換this代碼如下：
func1.bind(obj)func2.bind(this)
使用插件后窥淆，改寫代碼如下：
obj::func1::func2
stage-1
stage-1除了包含stage-2和stage-3卖宠，還包含了下面4個插件：
transform-class-constructor-call
transform-class-constructor-call
這個模塊已經(jīng)廢棄，不再使用了
transform-class-properties
這個插件可以支持解釋如下代碼
classBork{//Property initializer syntaxinstanceProperty="bork";boundFunction=()=>{returnthis.instanceProperty;}//Static class propertiesstaticstaticProperty="babelIsCool";staticstaticFunction=function(){returnBork.staticProperty;}}
transform-decorators
這個插件可以使如下代碼
classMyClassextendsComponent{constructor(props,context){this.onChange=this.onChange.bind(this)this.handleSubmit=this.handleSubmit.bind(this)this.state={isLoading:true}}onChange(){}handleSubmit(){}}
通過使用autobind裝飾器忧饭，改寫為如下代碼
classMyClassextendsComponent{state={isLoading:true}@autobindonChange(){}@autobindhandleSubmit(){}}
transform-export-extensions
這個插件支持將如下代碼：
import*asnsfrom'mod'exportdefaultnsimportvfrom'mod'exportdefaultv
改寫為如下代碼：
export*asnsfrom'mod'exportvfrom'mod'
stage-2
stage-2除了包含stage-3扛伍，還包含了下面2個插件：
syntax-trailing-function-commas
syntax-trailing-function-commas
這個插件可以支持函數(shù)的最后一個參數(shù)后面允許加逗號，代碼如下：
functionclownPuppiesEverywhere(param1,param2,// 最后一個參數(shù)加逗號词裤，以方便增加后面一個參數(shù)刺洒，以及優(yōu)化源代碼管理){/* ... */}
transform-object-reset-spread
這個插件支持解釋擴(kuò)展運(yùn)算符，代碼如下：
let{x,y,...z}={x:1,y:2,a:3,b:4};console.log(x);// 1console.log(y);// 2console.log(z);// { a: 3, b: 4 }
stage-3
stage-3包含了下面2個插件：
transform-exponentiation-operator
transform-async-to-generator
這個插件用來支持es7中的async和await吼砂，代碼如下：
constsleep=(timeout)=>{returnnewPromise((resolve,reject)=>{setTimeout(resolve,timeout)})}(async()=>{console.time("async");awaitsleep(3000);console.timeEnd("async");})()
transform-exponentiation-operator
這個插件可以支持**操作符進(jìn)行冪操作逆航，代碼如下：
letsquared=2**2;// same as: 2 * 2letcubed=2**3;// same as: 2 * 2 * 2
