babel配置-各阶段的stage的区别

前言

由于各大浏览器并对es6的并没有完成支持，我们开发前端项目时需要使用Babel来将ES6代码编译为ES5。 配置.babelrc文件时一般配置为如下：

{"presets":["es2015"，"react","stage-0"],"plugins":[]}

这个配置文件的意思。首先，这个配置文件是针对babel 6的。babel 6做了一系列模块化，不像Babel 5一样把所有的内容都加载。

如果需要编译es6，我们需要设置presets包含es2015，也就是预先加载es6编译的模块。

如果需要编译jsx，我们需要设置presets包含react，也就是预先加载react编译的模块。

如果需要编译es7，我们需要设置presets包含stage-0，也就是预先加载es7编译的模块。

stage不同阶段的区别

es7不同阶段语法提案的转码规则模块（共有4个阶段），分别是stage-0，stage-1，stage-2，stage-3。

stage-0

stage-0的功能范围最广大，包含stage-1, stage-2以及stage-3的所有功能，同时还另外支持如下两个功能插件：

transform-do-expressions

transform-function-bind

transform-do-expressions

这个插件是为了方便在 jsx写if/else表达式而提出的.

众所周知，react中jsx对条件表达式支持的不是太好，你不能很方便的使用if/else表达式，要么你使用三元表达，要么用函数。例如你不能写如下的代码：

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-properties

transform-decorators

transform-export-extensions

transform-class-constructor-call

这个模块已经废弃，不再使用了

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

transform-object-reset-spread

syntax-trailing-function-commas

这个插件可以支持函数的最后一个参数后面允许加逗号，代码如下：

functionclownPuppiesEverywhere(param1,param2,// 最后一个参数加逗号，以方便增加后面一个参数，以及优化源代码管理){/* ... */}

transform-object-reset-spread

这个插件支持解释扩展运算符，代码如下：

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-async-to-generator

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

这个插件可以支持**操作符进行幂操作，代码如下：

letsquared=2**2;// same as: 2 * 2letcubed=2**3;// same as: 2 * 2 * 2

babel stage 文档