博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)

Posted on 2016-05-17 13:33  三块石头  阅读(11028)  评论(2编辑  收藏  举报

大家知道,将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的所有功能,同时还另外支持如下两个功能插件:

 

用过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个插件:

 

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