大家知道，将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个插件：
- transform-class-constructor-call (Deprecated)
- transform-class-properties
-
transform-decorators– disabled pending proposal update - transform-export-extensions
今天就到这里了，改天我们接着分析下"stage-2"和"stage-3", 它们又有什么新的特性呢，让我们拭目以待吧。