stage-0 && stage-1 && stage-2

stage-0

包含stage-1、stage-2、stage-3的所有功能，同时还支持如下2个插件

transform-do-expressions (方便在jsx写if/else表达式)
transform-function-bind (https://www.npmjs.com/package/babel-plugin-transform-function-bind)

//transform-function-bind
const { map, filter } = Array.prototype;
let sslUrls = document.querySelectorAll('a')
                ::map(node => node.href)
                ::filter(href => href.substring(0, 5) === 'https');
console.log(sslUrls);

//转换为
const { map, filter } = Array.prototype;
let sslUrls = document.querySelectorAll('a');
sslUrls = map.call(sslUrls, node => node.href);
sslUrls = filter.call(sslUrls, href => href.substring(0, 5) === 'https');
console.log(sslUrls);

$('.some-link').on('click', ::view.reset);
//转换为
$('.some-link').on('click', view.reset.bind(view));

//via CLI
//babel --plugins transform-function-bind script.js

//via node
require("babel-core").transform("code", {
  plugins: ["transform-function-bind"]
});

stage-1

包含stage-2、stage-3的所有功能，同时还支持如下4个插件

transform-class-constructor-call (弃用)
transform-class-properties
transform-export-extensions

stage-2

包含stage-3的所有功能，同时还支持如下2个插件

syntax-trailing-function-commas(尾逗号函数)
transform-object-reset-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 }

stage-3

支持了async & await，包含2个插件

transform-async-to-generator
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即可