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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/50907975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 09:19:35  来源:igfitidea点击:

Babel - regeneratorRuntime is not defined, when using transform-async-to-generator plugin

javascriptwebpackasync-awaitbabeljsbabel

提问by dendog

I am not able to setup babel correctly for the usage of async / await.

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

I am using babel 7 and webpack 4.

我正在使用 babel 7 和 webpack 4。

I do not want to use babel-polyfill if possible!

如果可能的话,我不想使用 babel-polyfill!

My babelrc file:

我的 babelrc 文件:

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

Code:

代码:

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

And Error:

和错误:

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

回答by makkabi

The latest documentation here is pretty clear: https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

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

What worked for me is installing the two packages for build and for runtime (the final script for the browser):

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

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

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

npm install --save @babel/runtime

npm install --save @babel/runtime

In the plugin Array of my webpack configuration I just added '@babel/plugin-transform-runtime' without any options. (Please also have a look at the documentation linked above, since some options (that you might find in older tutorials or answers) have been removed.)

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

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

I now can use async functions without errors, and it didn't add much code in the production build.

我现在可以毫无错误地使用异步函数,并且它没有在生产版本中添加太多代码。

回答by goofballLogic

You also need the transform-runtimeplugin, so your .babelrc should ready:

你还需要这个transform-runtime插件,所以你的 .babelrc 应该准备好了:

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

Note that you'll also need to npm install --save-dev transform-runtime

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