如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（二）

2022-12-01 22:30:50

上一篇文章我们介绍了法力无边的stage-0 和 包罗万象的stage-1，现在我们来介绍下 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即可。如果有其他问题，欢迎大家留言

码农公寓