对于异步 JS 函数，在现代 Chrome 浏览器中出现错误“未定义 regeneratorRuntime”

如何解决对于异步 JS 函数，在现代 Chrome 浏览器中出现错误“未定义 regeneratorRuntime”

我正在构建一个应用程序，我和我的朋友正在相同的最新 Chrome 版本上测试该应用程序：87.0.4280.141。

对我来说，我的 Babel 转译异步“uploadFilesSerially”函数在我的浏览器中运行良好。

对于我的朋友，它抛出以下错误：

vue.min.js:6 ReferenceError: regeneratorRuntime is not defined
at a.uploadFilesSerially (FileUploader.vue:71)
at a.uploadFiles (FileUploader.vue:86)
at He (vue.min.js:6)
at HTMLInputElement.n (vue.min.js:6)
at HTMLInputElement.Yr.o._wrapper (vue.min.js:6)
Ue @ vue.min.js:6

我认为这可以在我更新的 Chrome 中运行而不是在他的 Chrome 中运行是相当奇怪的。但是，我发现我可以在 IE11 中重现此错误。

从 another issue 中，我了解到 rengeneratorRuntime 是异步函数的引擎。所以我可以想象为什么这个特定的异步函数在没有定义 regeneratorRuntime 时不会运行。

这显然是一种没有应用 polyfill 的情况，这使得它不起作用。我了解到我可以尝试使用 Babel 的预设环境的“useBuiltIns”和“corejs”设置。

对于“useBuiltIn”设置，您可以使用“entry”或“usage”。到目前为止，我还不擅长使用 Babel/Webpack，尽管阅读了文档，但我还是不明白其中的区别。

使用 'entry' 使一切仍然有效。使用 'usage' 会引发以下错误：

caught TypeError: __webpack_require__(...) is not a function

所以我在有问题的页面的入口点添加了corejs import语句以试图解决它。但我仍然遇到同样的错误。

所有这些使我的 Webpack 设置支持异步功能的尝试，在 IE 中完全破坏了它，这意味着我什至无法再使用 IE 来重现该问题。

而且我不知道这是否为我朋友的 Chrome 修复了它。每次我想测试它时，我都必须进行生产服务器部署。

此外，corejs import 语句几乎为页面初始化增加了一秒钟。

什么可能导致这个问题出现在一个人的 Chrome 87 上，而另一个人的却没有？

解决这个问题的最佳选择是什么？

这是我当前的 package.json 的样子：

{
  "dependencies": {
    "core-js": "^3.8.2","vue": "^2.6.12"
  },"devDependencies": {
    "@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","@ckeditor/ckeditor5-build-classic": "^15.0.0","@ckeditor/ckeditor5-image": "^15.0.0","@ckeditor/ckeditor5-vue": "^1.0.3","babel-loader": "^8.2.2","css-loader": "^3.6.0","vue-loader": "^15.9.6","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.12","webpack": "^4.46.0","webpack-cli": "^3.3.12"
  },"scripts": {
    "build:debug": "webpack --display-modules --colors --watch","build:release": "webpack --display-modules --colors --env RELEASE"
  },"-vs-binding": {
    "ProjectOpened": [
      "build:debug"
    ]
  }
}