人人知道，将ES6代码编译为ES5时，我们常用到Babel这个编译工具。人人参考一些网上的文章或者官方文档，内里常会建议人人在.babelrc中输入如下代码： 

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

我们现在来说明下这个配置文件是什么意思。首先，这个配置文件是针对babel 6的。Babel 6做了一系列模块化，不像Babel 5一样把所有的内容都加载。好比需要编译ES6，我们需要设置presets为"es2015"，也就是预先加载es6编译的相关模块，若是需要编译jsx，需要预先加载"react"这个模块。那问题来了，这个"stage-0"又代表什么呢？ 有了"react-0"，是否又有诸如"stage-1", "stage-2"等等呢？

事实上， ”stage-0"是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码。固然由于ES7没有定下来，以是这些功效随时肯能被废弃掉的。现在我们来逐一剖析内里都有什么。

1. 法力无边的stage-0

为什么说“stage-0” 法力无边呢，由于它包罗stage-1, stage-2以及stage-3的所有功效，同时还另外支持如下两个功效插件：

transform-do-expressions，transform-function-bind

用过React的同砚可能知道，jsx对条件表达式支持的不是太好，你不能很利便的使用if/else表达式，要么你使用三米表达，要么用函数。例如你不能写如下的代码：

var App = React.createClass({

    render(){
        let { color } = this.props;

        return (
            <div className="parents">
                {
                    if(color == 'blue') { 
                        <BlueComponent/>; 
                    }else if(color == 'red') { 
                        <RedComponent/>; 
                    }else { 
                        <GreenComponent/>; }
                    }
                }
            </div>
        )
    }
})

在React中你只能写成这样： 

var App = React.createClass({

    render(){
        let { color } = this.props;


        const getColoredComponent = color => {
            if(color === 'blue') { return <BlueComponent/>; }
            if(color === 'red') { return <RedComponent/>; }
            if(color === 'green') { return <GreenComponent/>; }
        }


        return (
            <div className="parents">
                { getColoredComponent(color) }
            </div>
        )
    }
})

 transform-do-expressions 这个插件就是为了利便在 jsx写if/else表达式而提出的，我们可以重写下代码。

var App = React.createClass({
    render(){
        let { color } = this.props;
        return (
            <div className="parents">
                {do {
                    if(color == 'blue') { 
                        <BlueComponent/>; 
                    }else if(color == 'red') { 
                        <RedComponent/>; 
                    }else { 
                        <GreenComponent/>; }
                    }
                }}
            </div>
        )
    }
})

再说说 transform-function-bind, 这个插件实在就是提供过 :: 这个操作符来利便快速切换上下文， 如下面的代码： 

obj::func
// is equivalent to:
func.bind(obj)

obj::func(val)
// is equivalent to:
func.call(obj, val)

::obj.func(val)
// is equivalent to:
func.call(obj, val)

// 再来一个复杂点的样例

const box = {
  weight: 2,
  getWeight() { return this.weight; },
};

const { getWeight } = box;

console.log(box.getWeight()); // prints '2'

const bigBox = { weight: 10 };
console.log(bigBox::getWeight()); // prints '10'

// Can be chained:
function add(val) { return this + val; }

console.log(bigBox::getWeight()::add(5)); // prints '15'

若是想更 *** 点，还可以写出更牛逼的代码： 

const { map, filter } = Array.prototype;

let sslUrls = document.querySelectorAll('a')
                ::map(node => node.href)
                ::filter(href => href.substring(0, 5) === 'https');
console.log(sslUrls);

2. 一应俱全的stage-1

stage-1除了包罗stage-2和stage-3，还包罗了下面4个插件：

• transform-class-constructor-call (Deprecated)
• transform-class-properties
• transform-decorators – disabled pending proposal update
• transform-export-extensions

今天就到这里了，改天我们接着剖析下"stage-2"和"stage-3", 它们又有什么新的特征呢，让我们拭目以待吧。

3.深藏不露的stage-2

为什么说stage-2深藏不露呢，由于它很低调，低调到你可以忽略它，但事实上，它很有内在的。它除了笼罩stage-3的所有功效，还支持如下两个插件：

• syntax-trailing-function-commas
• transform-object-reset-spread

syntax-trailing-function-commas

这个插件让人一看以为挺没趣的，让人甚至以为它有点鸡肋。因它不是对ES6功效的增添，而是为了增强代码的可读性和可修改性而提出的。如下面的代码所示：

// 假设有如下的一个函数，它有两个参数
function clownPuppiesEverywhere(
  param1,
  param2
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
  'bar'
);

// 有一天，它需要酿成3个参数，你需要这样修改
function clownPuppiesEverywhere(
  param1,
- param2
+ param2, // 这一行得加一个逗号
+ param3  // 增添参数param3
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
- 'bar'
+ 'bar', // 这里的修改为逗号
+ 'baz'  // 增添新的参数
);

// 看到没？ 我们修改了4行代码。。啊啊。修改了4行代码。