在编写前端代码过程中，ES6 的 generator 函数（生成器函数）是一个非常实用的特性。它可以帮助我们更加优雅地处理异步操作，让代码更为简洁易懂。然而，当我们在配合 Babel 进行转译时，可能会遇到一些奇怪的问题。
在这篇文章中，我们将讨论一些可能的问题，并提供解决方案。
generator 函数转译问题
在使用 generator 函数时，我们可能会遇到两种主要的问题：
ReferenceError: regeneratorRuntime is not definedTypeError: Object(...) is not a function
这些问题的产生与 generator 函数使用了特定的函数示例对象 regeneratorRuntime 相关。该对象提供了 ES6 generator 函数的支持，但是它没有被自动声明和定义，需要手动引入。
解决方案
1. 安装 Babel 插件
我们可以通过安装 @babel/plugin-transform-runtime 插件来解决问题。这个插件将自动引入 regeneratorRuntime 对象。
-- -------------------- ---- -------
-
---------- -
-
----------------------------------
-
--------- -
-
-
-
-2. 引入 regenerator 运行时库
除了使用插件，我们还可以手动引入 regenerator 运行时库来解决问题。
import "regenerator-runtime/runtime";
先安装库：
npm install regenerator-runtime --save-dev
3. 了解 babel-polyfill
另外，还可以使用 babel-polyfill 库来解决问题。该库会引入一些 ES6 以及 ES7 的标准库，包括 regeneratorRuntime。
npm install babel-polyfill --save
利用官方文档的方式来使用：
import "babel-polyfill";
但是官方已经推荐使用 core-js 代替 polyfill。
4. 配置 CoreJS
如果使用了 Babel 7+ 和 core-js 版本 3，可以使用 @babel/preset-env 预设的 useBuiltIns 选项，它允许您选择 polyfill 的策略。
当你想象你的代码中使用的特定 core-js 版本时你也可以安装它。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-总结
当使用 generator 函数时，Babel 转译可能会出现一些问题。我们可以通过安装 @babel/plugin-transform-runtime 插件，手动引入 regenerator-runtime 库，或者使用 babel-polyfill 库解决这些问题。
在实际开发过程中，针对特定的业务需求和技术选型，我们需要认真选择和配置相应的方案，以达到最优的性能和体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486899248841e989451791c