由于各大瀏覽器并對(duì)es6的并沒(méi)有完成支持灼卢，我們開(kāi)發(fā)前端項(xiàng)目時(shí)需要使用Babel來(lái)將ES6代碼編譯為ES5疏尿。 配置.babelrc文件時(shí)一般配置為如下：
{
"presets":[
"es2015"拴清，
"react",
"stage-0"
],
"plugins":[]
}
這個(gè)配置文件的意思蚜点。首先，這個(gè)配置文件是針對(duì)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編譯的模塊坷衍。
es7不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則模塊（共有4個(gè)階段）寝优，分別是stage-0，stage-1枫耳，stage-2乏矾，stage-3。
stage-0的功能范圍最廣大，包含stage-1, stage-2以及stage-3的所有功能钻心，同時(shí)還另外支持如下兩個(gè)功能插件：
transform-do-expressions
這個(gè)插件是為了方便在 jsx寫if/else表達(dá)式而提出的.
眾所周知凄硼，react中jsx對(duì)條件表達(dá)式支持的不是太好，你不能很方便的使用if/else表達(dá)式捷沸，要么你使用三元表達(dá)摊沉，要么用函數(shù)。例如你不能寫如下的代碼：
varApp=React.createClass({
render(){
let{color}=this.props;
return(
<divclassName="parents">
{
if(color=='blue'){
<BlueComponent/>;
}elseif(color=='red'){
<RedComponent/>;
}else{
<GreenComponent/>;}
}
}
</div>?)
}
})
而只能這么寫痒给，
varApp=React.createClass({
render(){
let{color}=this.props;
constgetColoredComponent=color =>{
if(color==='blue'){return<BlueComponent/>;}
if(color==='red'){return<RedComponent/>;}
if(color==='green'){return<GreenComponent/>;}
}
return(
<div className="parents">
{ getColoredComponent(color) }
</div>)
}
})
transform-function-bind
這個(gè)插件其實(shí)就是提供過(guò)::這個(gè)操作符來(lái)方便快速切換上下文this说墨。
使用bind切換this代碼如下：
func1.bind(obj)
func2.bind(this)
使用插件后，改寫代碼如下：
obj::func1
::func2
stage-1除了包含stage-2和stage-3苍柏，還包含了下面4個(gè)插件：
transform-class-constructor-call
transform-class-constructor-call
這個(gè)模塊已經(jīng)廢棄尼斧，不再使用了
transform-class-properties
這個(gè)插件可以支持解釋如下代碼
class Bork {
//Property initializer syntax
instanceProperty="bork";
boundFunction=() =>{
returnthis.instanceProperty;
}
//Static class properties
staticstaticProperty="babelIsCool";
staticstaticFunction=function() {
returnBork.staticProperty;
}
}
transform-decorators
這個(gè)插件可以使如下代碼
class MyClass extends Component {
constructor(props,context){
this.onChange=this.onChange.bind(this)
this.handleSubmit=this.handleSubmit.bind(this)
this.state={isLoading:true}
}
onChange(){}
handleSubmit(){}
}
通過(guò)使用autobind裝飾器，改寫為如下代碼
class MyClass extends Component {
state={isLoading:true}
@autobind
onChange(){}
@autobind
handleSubmit(){}
}
transform-export-extensions
這個(gè)插件支持將如下代碼：
import*asnsfrom'mod'
exportdefaultns
importvfrom'mod'
exportdefaultv
改寫為如下代碼：
export*asnsfrom'mod'
exportvfrom'mod'
stage-2除了包含stage-3试吁，還包含了下面2個(gè)插件：
syntax-trailing-function-commas
syntax-trailing-function-commas
這個(gè)插件可以支持函數(shù)的最后一個(gè)參數(shù)后面允許加逗號(hào)棺棵，代碼如下：
function clownPuppiesEverywhere(
param1,
param2,? //最后一個(gè)參數(shù)加逗號(hào)，以方便增加后面一個(gè)參數(shù)熄捍，以及優(yōu)化源代碼管理
) {/* ... */}
transform-object-reset-spread
這個(gè)插件支持解釋擴(kuò)展運(yùn)算符烛恤，代碼如下：
let{x,y,...z}={x:1,y:2,a:3,b:4};
console.log(x);// 1
console.log(y);// 2
console.log(z);// { a: 3, b: 4 }
stage-3包含了下面2個(gè)插件：
transform-exponentiation-operator
transform-async-to-generator
這個(gè)插件用來(lái)支持es7中的async和await，代碼如下：
constsleep=(timeout)=>{
returnnewPromise((resolve, reject)=>{
setTimeout(resolve,timeout)
})
}
(async()=>{
console.time("async");
awaitsleep(3000);
console.timeEnd("async");
})()
transform-exponentiation-operator
這個(gè)插件可以支持**操作符進(jìn)行冪操作余耽，代碼如下：
letsquared=2**2;
// same as: 2 * 2
letcubed=2**3;
// same as: 2 * 2 * 2
