Babel - 使用 transform-async-to-generator 插件时未定义 regeneratorRuntime答案

【问题标题】：Babel - regeneratorRuntime is not defined, when using transform-async-to-generator pluginBabel - 使用 transform-async-to-generator 插件时未定义 regeneratorRuntime
【发布时间】：2024-03-09 15:55:01
【问题描述】：

我无法正确设置 babel 以使用 async / await。

我正在使用 babel 7 和 webpack 4。

如果可能，我不想使用 babel-polyfill！

我的 babelrc 文件：

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-async-to-generator"
    ]
}

代码：

async function init() {
  const loaderData = await initLoader();
  initCmp(loaderData)
    .then(initApi(loaderData.key))
    .catch();
}
init();

还有错误：

refactor.main.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (refactor.main.js:18)
    at eval (refactor.main.js:47)
    at Object../client/refactor.main.js (cmp.bundle.js:312)
    at __webpack_require__ (cmp.bundle.js:62)
    at eval (main.js:6)
    at Object../client/main.js (cmp.bundle.js:300)
    at __webpack_require__ (cmp.bundle.js:62)
    at cmp.bundle.js:179
    at cmp.bundle.js:182

【问题讨论】：

标签： javascript webpack async-await babeljs

【解决方案1】：

这里的最新文档非常清楚： https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

对我有用的是安装用于构建和运行时的两个包（浏览器的最终脚本）：

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

在我的 webpack 配置的插件数组中，我只是添加了 '@babel/plugin-transform-runtime'，没有任何选项。（还请查看上面链接的文档，因为某些选项（您可能会在较旧的教程或答案中找到）已被删除。）

plugins: [
'@babel/plugin-transform-runtime'
]

我现在可以使用异步函数而不会出错，而且它并没有在生产构建中添加太多代码。

【讨论】：

当我使用它时，我收到一条错误消息require is not defined
@makkabi 你能解释一下为什么你在开发中安装@babel/plugin[...] 而不是@babel/runtime 吗？
@Daniel 我遵循了上面链接的文档，还有更多解释。据我了解，plugin-transform-runtime 用于在构建时转译代码，因此它只是一个开发依赖项，不需要运行转译代码。
我在一个使用打字稿、esm 模块和玩笑的项目中遇到了同样的问题。我把这个“插件”数组放在babel.config.json 里面，它工作了。

【解决方案2】：

你还需要 transform-runtime 插件，所以你的 .babelrc 应该准备好了：

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-runtime",
      "transform-async-to-generator"
    ]
}

请注意，您还需要npm install --save-dev transform-runtime

【讨论】：

我需要做npm install -D babel-plugin-transform-runtime，区别在于添加的前缀babel-plugin-。没有它，我在添加"transform-runtime"-plugin 时收到一个错误，提示 ReferenceError: Unknown plugin "transform-runtime"。