前言

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

1.   {
2.   "presets": [
3.   "es2015"，
4.   "react",
5.   "stage-0"
6.   ],
7.   "plugins": []
8.   }

这个配置文件的意思。首先，这个配置文件是针对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表达式，要么你使用三元表达，要么用函数。例如你不能写如下的代码：

1.   var App = React.createClass({
2.    
3.   render(){
4.   let { color } = this.props;
5.    
6.   return (
7.   <div className="parents">
8.   {
9.   if(color == 'blue') {
10.   <BlueComponent/>;
11.   }else if(color == 'red') {
12.   <RedComponent/>;
13.   }else {
14.   <GreenComponent/>; }
15.   }
16.   }
17.   </div>  )
18.   }
19.   })

而只能这么写，

1.   var App = React.createClass({
2.    
3.   render(){
4.   let { color } = this.props;
5.    
6.    
7.   const getColoredComponent = color => {
8.   if(color === 'blue') { return <BlueComponent/>; }
9.   if(color === 'red') { return <RedComponent/>; }
10.   if(color === 'green') { return <GreenComponent/>; }
11.   }
12.    
13.    
14.   return (
15.   <div className="parents">
16.   { getColoredComponent(color) }
17.   </div>  )
18.   }
19.   })

transform-function-bind

这个插件其实就是提供过 :: 这个操作符来方便快速切换上下文this。

使用bind切换this代码如下：

1.   func1.bind(obj)
2.   func2.bind(this)

使用插件后，改写代码如下：

1.   obj::func1
2.   ::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

这个插件可以支持解释如下代码

1.   class Bork {
2.   //Property initializer syntax
3.   instanceProperty = "bork";
4.   boundFunction = () => {
5.   return this.instanceProperty;
6.   }
7.    
8.   //Static class properties
9.   static staticProperty = "babelIsCool";
10.   static staticFunction = function() {
11.   return Bork.staticProperty;
12.   }
13.   }

transform-decorators

这个插件可以使如下代码

1.   class MyClass extends Component {
2.   constructor(props, context) {
3.   this.onChange = this.onChange.bind(this)
4.   this.handleSubmit = this.handleSubmit.bind(this)
5.    
6.   this.state = {isLoading: true}
7.   }
8.    
9.   onChange() {}
10.   handleSubmit() {}
11.   }

通过使用autobind装饰器，改写为如下代码

1.   class MyClass extends Component {
2.   state = {isLoading: true}
3.    
4.   @autobind
5.   onChange() {}
6.    
7.   @autobind
8.   handleSubmit() {}
9.   }

transform-export-extensions

这个插件支持将如下代码：

1.   import * as ns from 'mod'
2.   export default ns
3.   import v from 'mod'
4.   export default v

改写为如下代码：

1.   export * as ns from 'mod'
2.   export v from 'mod'

stage-2

stage-2除了包含stage-3，还包含了下面2个插件：

• syntax-trailing-function-commas

• transform-object-reset-spread

syntax-trailing-function-commas

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

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

transform-object-reset-spread

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

1.   let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
2.   console.log(x); // 1
3.   console.log(y); // 2
4.   console.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，代码如下：

1.   const sleep = (timeout)=>{
2.   return new Promise( (resolve, reject)=>{
3.   setTimeout(resolve, timeout)
4.   })
5.   }
6.    
7.   (async ()=>{
8.   console.time("async");
9.   await sleep(3000);
10.   console.timeEnd("async");
11.   })()

transform-exponentiation-operator

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

1.   let squared = 2 ** 2;
2.   // same as: 2 * 2
3.    
4.   let cubed = 2 ** 3;
5.   // same as: 2 * 2 * 2