你们知道，将ES6代码编译为ES5时，咱们经常使用到Babel这个编译工具。你们参考一些网上的文章或者官方文档，里面常会建议你们在.babelrc中输入以下代码：javascript
{
"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"等等呢？html
事实上， ”stage-0"是对ES7一些提案的支持，Babel经过插件的方式引入，让Babel能够编译ES7代码。固然因为ES7没有定下来，因此这些功能随时肯能被废弃掉的。如今咱们来一一分析里面都有什么。java
1. 法力无边的stage-0node
为何说“stage-0” 法力无边呢，由于它包含stage-1, stage-2以及stage-3的全部功能，同时还另外支持以下两个功能插件：react
用过React的同窗可能知道，jsx对条件表达式支持的不是太好，你不能很方便的使用if/else表达式，要么你使用三元表达，要么用函数。例如你不能写以下的代码：webpack
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中你只能写成这样：git
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表达式而提出的，咱们能够重写下代码。es6
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, 这个插件其实就是提供过 :: 这个操做符来方便快速切换上下文， 以下面的代码：github
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'
若是想更屌点，还能够写出更牛逼的代码：web
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", 它们又有什么新的特性呢，让咱们拭目以待吧。
深藏不露的stage-2
为何说 stage-2深藏不露呢，由于它很低调，低调到你能够忽略它，但事实上，它颇有内涵的。它除了覆盖stage-3的全部功能，还支持以下两个插件：
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行代码。
修改了4行代码，嗯嗯嗯。。追求高效的程序猿想一想了，之后若是有更多参数了，我是否是要改等多行，得想一想，代码改的越少越好，因而有了下面的改动。。
// 咱们来从新定义一下函数 function clownPuppiesEverywhere( param1, param2, // 注意这里，咱们加了一个逗号哟 ) { /* ... */ } clownPuppiesEverywhere( 'foo', 'bar', // 这里咱们也加了一个逗号 ); // 如今函数须要三个参数，咱们来修改下 function clownPuppiesEverywhere( param1, param2, + param3, // 增长params3参数 ) { /* ... */ } clownPuppiesEverywhere( 'foo', 'bar', + 'baz', // 增长第三个参数 ); // 叮叮当，咱们只修改了两行代码就完成了，好开森
说实话吧，这个功能让人有点很无语。不过程序猿对干净代码的追求真的很让人感动，仍是值得鼓励的。这个就是stage-2中"尾逗号函数”功能。哈哈哈哈。
transform-object-rest-spread
再来讲transform-object-rest-spread， 其实它是对 ES6中解构赋值的一个扩展，由于ES6只支持对数组的解构赋值，对对象是不支持的。以下面的代码所示：
// 获取剩下的属性 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 } // 属性展开 let n = { x, y, ...z }; console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
大放异彩的stage3
为啥说stage3大放异彩呢？由于它支持大名鼎鼎的async和await, 这两个哥们但是解决(Ajax)回调函数的终极解决方法呀！管你什么异步，我均可以用同步的思惟来写，ES7里面很是强悍的存在。总的来讲，它包含以下两个插件:
transform-async-to-generator
transform-async-to-generator主要用来支持ES7中的async和await， 咱们能够写出下面的代码：
const sleep = (timeout)=>{ return new Promise( (resolve, reject)=>{ setTimeout(resolve, timeout) }) } (async ()=>{ console.time("async"); await sleep(3000); console.timeEnd("async"); })()
再来一个实际点的例子
const fetchUsers = (user)=>{ return window.fetch(`https://api.douban.com/v2/user/${user}`).then( res=>res.json()) } const getUser = async (user) =>{ let users = await fetchUsers(user); console.log( users); } console.log( getUser("flyingzl"))
提示： 因为asycn和await是ES7里面的内容，现阶段不建议使用。为了顺利运行上面的代码，建议用webpack进行编译。
transform-exponentiation-operator
transform-exponentiation-operator这个插件算是一个语法糖，能够经过**这个符号来进行幂操做，想当于Math.pow(a,b)。以下面的样例
// x ** y let squared = 2 ** 2; // 至关于: 2 * 2 let cubed = 2 ** 3; // 至关于: 2 * 2 * 2 // x **= y let a = 2; a **= 2; // 至关于: a = a * a; let b = 3; b **= 3; // 至关于: b = b * b * b;
很简单也很实用吧，哈。使用起来仍是蛮方便的。
总结
经过以上的两篇文章，咱们了解了stage-0,state-1，stage-2以及stage-3的区别。在进行实际开发时，能够更具须要来设置对应的stage。若是省事懒得折腾，通常设置为stage-0便可。若是为了防止开发人员使用某些太新的功能，咱们能够限制到某个特定的stage便可。若是有其余问题，欢迎你们留言 :-)。 更详细的请参考https://babeljs.io/docs/plugins/preset-stage-0/