什么是 Generator 函数
Generator 函数是 ES6 中新增的一种异步编程解决方案，可以通过 function* 声明。执行 Generator 函数时不会立即执行函数体，而是返回一个遍历器对象，通过调用遍历器对象的 next() 方法，可以分步执行函数体中的代码，暂停执行和恢复执行，从而实现异步编程。
Babel 如何编译 Generator 函数
Babel 是一个广泛使用的 JavaScript 编译器，可以将 ES6+ 的代码转换成兼容性更好的 ES5 代码。在 Babel 中编译 Generator 函数需要用到 @babel/plugin-transform-regenerator 插件和 @babel/runtime 运行时。
@babel/plugin-transform-regenerator
@babel/plugin-transform-regenerator 插件可以将 Generator 函数转换成 ES5 代码。该插件中使用了 Regenerator 编译器，Regenerator 可以将 Generator 函数转换成纯 ES5 代码，并且可以实现异步的处理，从而使得生成的 ES5 代码可以在所有浏览器中执行。
@babel/runtime
@babel/runtime 运行时是一个工具库，其中包含了一些 Babel 编译器使用的工具函数和辅助函数，例如 _toConsumableArray、_asyncToGenerator 等等。在编译 Generator 函数时需要使用 @babel/runtime 运行时。
示例代码
下面是一个使用 Babel 编译 Generator 函数的示例代码：
-- -------------------- ---- -------
-- - ----- --- --- --------- --
-- -------- ------- ---------- ----------- ---------- ----------------------------------- ----------------- --------------
-- -------- ----- ------------ ---------- -----------
----- -------- ------ -
------ --- --------------- -- ------------------- -------
-
----- --------- ----------- -
----- --- - --- -- ---
--- ---- - -- ---- -
----- -------
----- --
-
-
------ ---------- -
--- ----- ---- - -- ------------ -
---------------
-
-----编译后的 ES5 代码如下：
-- -------------------- ---- -------
-- ----------------- --------------
---- --------
--- ------------------- - --------------------------------------
--- ----------------- - ---------------------------------------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
-------- ------ -
------ --- ---------------- --------- -
------------------- ------
---
-
-------- ----------- -
--- ----
--
---
--------------------------
------------------
---------------
----------
------
--
------ ---------------------------------- -------------------- -
----- --- -
------ -------------- - -------------- -
---- --
--- - --- -- ---
-- - -- ------------------------- - ----- ----------------- - ------ -------------- - ----------
------------- - --
--------- - -----------------------
---- --
-- -------------------------- - ------ - ----------------------- -
------------- - ---
------
-
- - ------------
------------- - --
------ ----------------------------------
---- --
- - --
---------------
---- ---
------------------------- - -----
------------- - --
------
---- ---
------------- - ---
------
---- ---
------------- - ---
----------- - ---------------------
----------------- - -----
-------------- - ------------
---- ---
------------- - ---
------------- - ---
-- --------------------------- -- ------------------- -- ----- -
----------------------
-
---- ---
------------- - ---
-- -------------------- -
------------- - ---
------
-
----- ---------------
---- ---
------ --------------------
---- ---
------ --------------------
---- ---
---- ------
------ ----------------
-
-
---
-
--- ------------------------------ ---------------------------------------------- --------- -
------ ---------------------------------- ------------------- -
----- --- -
------ --------------- - --------------- -
---- --
-------------- - --
------ ---------------------------------------
---- --
---- ------
------ -----------------
-
-
---
------总结
Babel 中编译 Generator 函数需要用到 @babel/plugin-transform-regenerator 插件和 @babel/runtime 运行时。@babel/plugin-transform-regenerator 插件可以将 Generator 函数转换成 ES5 代码，@babel/runtime 运行时则提供了一些工具函数和辅助函数。在实际开发中，我们可以使用 Babel 编译器将 ES6+ 的代码转换成 ES5 代码，从而实现向前兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c057b89e06631ab9cbe166