Babel - 当使用 transform-async-to-generator 插件时，regeneratorRuntime 未定义

Question

我无法正确设置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

- dendog

Answer 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'
]

我现在可以使用异步函数而没有出现错误，而且它并没有在产品构建中增加太多的代码。

- makkabi

---

使用时出现“require未定义”的错误。 - Batman

@makkabi，你能解释一下为什么你在开发环境中安装@babel/plugin[...]而不是@babel/runtime吗？ - Dan

@Daniel 我按照我上面链接的文档进行了操作，里面有更详细的解释。据我所知，plugin-transform-runtime 用于在构建时转译代码，因此它只是开发依赖项，不需要运行转译后的代码。 - makkabi

我在一个使用 TypeScript、esm 模块和 Jest 的项目中遇到了同样的问题。我将这个“plugins”数组放在 babel.config.json 中，问题得以解决。 - Adrián E.

谢谢，这也适用于Rollup配置。 - Ari Pratomo

Answer 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 来完成安装。

- goofballLogic

---

我需要执行 npm install -D babel-plugin-transform-runtime 命令，其中的区别在于添加了前缀 babel-plugin-。如果没有这个前缀，当添加 "transform-runtime" 插件时会出现错误信息 _ReferenceError: Unknown plugin "transform-runtime"_。 - Thomas Fauskanger