在前端开发过程中，我们经常会使用 ECMAScript 6 (ES6) 所提供的一些新特性，如箭头函数、解构赋值、Promise 等等。但由于一些浏览器还不支持 ES6，因此我们需要使用 Babel 来将 ES6 转换成可以在这些浏览器中运行的 ES5 代码。而对于使用了 ES6 Generator 和 Async/Await 的代码则需要通过 Babel 处理 RegeneratorRuntime。那么，Babel 处理 RegeneratorRuntime 有什么好处呢？
什么是 RegeneratorRuntime
RegeneratorRuntime 是 ES6 Generator 和 Async/Await 的一个 polyfill，所以在一些不支持 ES6 Generator 和 Async/Await 的浏览器中，使用这些新特性的代码就需要依赖 RegeneratorRuntime。
例如，下面的代码是使用了 Async/Await 的：
(async function() {
const result = await fetch('/api/data');
console.log(result);
})();在不支持 Async/Await 的浏览器中，上面的代码会报错。
使用 Babel 处理 RegeneratorRuntime 就能使这段代码正常运行，Babel 会将 Async/Await 的代码转换成使用 RegeneratorRuntime 的代码。
Babel 处理 RegeneratorRuntime 的好处
支持 Async/Await
通过 Babel 处理 RegeneratorRuntime，我们可以在没有原生支持 Async/Await 的浏览器中使用这个语法，让我们可以方便地使用异步操作，提高开发效率。
减少 bundle 大小
使用了 Async/Await 和 Generator 后，会引入 RegeneratorRuntime，这会增加 bundle 的大小。但是，通过 Babel 处理 RegeneratorRuntime，可以将一些不必要的代码删除，从而减少 bundle 的大小。
例如，下面的代码：
async function getData() {
const result = await fetch('/api/data');
return result.json();
}
getData();经过 Babel 处理后，可以变成：
-- -------------------- ---- -------
--- ------------------- - -------------------------------------
--- -------------------- - --------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
-------- --------- -
------ ------------------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -------------------------------------------------------
---- --
----------- - --------------
------ ------------------------- --------------------
---- --
---- ------
------ ----------------
-
-
-- ----- ------
-
----------可以看到，经过 Babel 处理后，只有需要的代码被保留了下来，减少了不必要的代码，从而减少了 bundle 的大小。
如何使用 Babel 处理 RegeneratorRuntime
要使用 Babel 处理 RegeneratorRuntime，我们需要安装以下几个依赖：
npm install --save-dev babel-plugin-transform-runtime babel-runtime
安装完之后，在 Babel 的配置文件中添加以下代码：
{
"plugins": ["transform-runtime"]
}这样，在使用了 Async/Await 或 Generator 的代码经过 Babel 转换之后，就会引入 RegeneratorRuntime，从而可以在不支持这些新特性的浏览器中使用这些语法了。
示例代码
以下是一个使用了 Async/Await 的示例代码，通过 Babel 处理 RegeneratorRuntime 可以使其在不支持 Async/Await 的浏览器中正常运行。
(async function() {
const result = await fetch('/api/data');
console.log(result);
})();经过 Babel 处理后的代码：
-- -------------------- ---- -------
--- ------------------- - -------------------------------------
--- -------------------- - --------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
--------- -- -
--- ------ - -------- -- -
--- ---- - ------------------ ------------------------------------------------------- ------------ -
--- ---------
------ ------------------------------------------ ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------
---- --
-------- - --------------
------ ------------------------- ----------
---- --
---- ------
------ ----------------
-
-
-- -------- ------
----
------ -------- ---------- -
------ ---------------- -----------
--
----
-------- --------------------- -
------ -------- -- -
--- --- - -------------- -----------
------ --- ---------------- --------- ------- -
-------- --------- ---- -
--- -
--- ---- - --------------
--- ----- - -----------
- ----- ------- -
--------------
-------
-
-- ----------- -
---------------
- ---- -
------ ------------------------------------ ------- -
------------ -------
-- -------- ----- -
------------- -----
---
-
-
------ -------------
---
--
-
------ ------------------ ---------------------------- -------- -
--------------------
----------------- --- -
---------------
---
-----总结一下，通过 Babel 处理 RegeneratorRuntime 可以使我们在不支持 ES6 Generator 和 Async/Await 的浏览器上使用这些语法，提高开发效率，同时减少不必要的代码，减小 bundle 的大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a28ad348841e9894ef41bb