Babel 7 - ReferenceError: regeneratorRuntime 未定义

Posted 2023-03-07

【中文标题】Babel 7 - ReferenceError: regeneratorRuntime 未定义

【英文标题】：Babel 7 - ReferenceError: regeneratorRuntime is not defined

【发布时间】：2019-05-02 16:34:39

【问题描述】：

我有一个应用程序，它是一个节点后端和一个反应前端。

当我尝试构建/运行我的节点应用程序时出现以下错误。

节点：v10.13.0

错误：

dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) ^

ReferenceError: regeneratorRuntime 未定义

.babelrc

    "presets": [    [
        "@babel/preset-env", 
          "targets": 
            "node": "current"
          ,
        
      ], "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]

webpack.config.js

        mode: "development",
        entry: "./src/index.js",
        target: "node",
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
        stats: 
            colors: true
        ,
        devtool: "source-map",

        output: 
            path: path.resolve(__dirname, "dist"),
            filename: "index.js",
            sourceMapFilename: "index.js.map"
        ,
        module: 
            rules: [
                
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                ,
                
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: 
                        loader: "babel-loader",
                        options: 
                            presets: ["@babel/preset-env"]
                        
                    
                
            ],
        ,
        node: 
            __dirname: false,
            __filename: false,
        ,

        "plugins": [
            new CleanWebpackPlugin(),
            new WebpackShellPlugin(
                onBuildStart: [],
                onBuildEnd: ["nodemon dist/index.js"]
            ),

        ]

    ,

package.json

 "dependencies": 
    "connect": "^3.6.6",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "hellojs": "^1.17.1",
    "i18n-iso-countries": "^3.7.8",
    "morgan": "^1.9.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "request": "^2.88.0",
    "request-promise-native": "^1.0.5",
    "serve-static": "^1.13.2",
    "vhost": "^3.0.2"
  ,
  "devDependencies": 
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-config-google": "^0.10.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.11.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  

【参考方案1】：

更新答案：

如果你使用的是 Babel 7.4.0 或更新版本，那么@babel/polyfill 已经是deprecated。相反，您需要在主 js 文件（可能是 index.js 或类似文件）的顶部使用以下内容：

import "core-js/stable";
import "regenerator-runtime/runtime";

使用 npm 安装这些软件包：

npm install --save core-js
npm install --save regenerator-runtime    

或者用纱线：

yarn add core-js
yarn add regenerator-runtime

原答案：

我刚刚遇到这个问题，遇到了以下解决方案：

在 package.json 中，我将 @babel/polyfill 作为依赖项。但是，在我的 index.js（我的主 js 文件）中，我忽略了将以下行放在顶部：

import '@babel/polyfill'

导入后，一切正常。

我不需要像其他答案建议的那样安装 babel-runtime。

【讨论】：

你，我的朋友，应该得到一块饼干！我第二次不需要安装任何运行时

哇，这是整个互联网上关于此问题的唯一最新答案

知道为什么需要这个运行时仍然会很有趣。为什么它不能将异步函数转换为简单的 Promise？

通过import "core-js/stable"; 导入core-js/stable 会生成一个非常大的捆绑包。有没有办法告诉 Babel 只填充它需要的东西？

@ford04 的解决方案更深入，列出了所有可能的解决方案，并引用了来源。

【参考方案2】：

Babel 7.4.0 及更高版本

有两种主要配置 - 一种用于应用程序，另一种用于库。

选项 1：应用程序

何时使用： ✔ 用于应用程序 ✔ 全局 范围 polyfills ✔ 最小的包大小 ✔ 通过targets 选择性包含 ✔ 无需处理 node_modules 的 polyfills

"presets": [
  [
    "@babel/preset-env",
    
      "useBuiltIns": "usage", // alternative mode: "entry"
      "corejs": 3, // default would be 2
      "targets": "> 0.25%, not dead" 
      // set your own target environment here (see Browserslist)
    
  ]
]

安装依赖项：

npm i --save-dev @babel/preset-env

npm i regenerator-runtime core-js // run-time dependencies
// regenerator-runtime: transform (async) generators and `async`/`await`
// core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-env 选择性地包括targets的polyfills，由Browserslist查询指定。有两种模式 - 先尝试usage（更方便），否则尝试entry（更灵活和健壮）：

useBuiltIns 'usage'：无需手动 import 任何东西。所有的 polyfill 都会根据它们在文件中的代码使用情况自动添加。

useBuiltIns 'entry'：在您的应用中添加这些 import 条目一次 (!) - 类似于 @babel/polyfill：

import "regenerator-runtime/runtime";
import "core-js/stable"; // or more selective import, like "core-js/es/array"

扩展

对于高级情况，您可以将@babel/transform-runtime（开发）和@babel/runtime（运行时）仅用于Babel helpers，以进一步减小包大小 - 称为辅助别名。

选项 2：库

何时使用： ✔ 用于库 ✔ 没有 全局范围污染 ✔ 包括 所有 polyfill，没有选择性 ✔ 更大的包大小可以忽略 p>

"plugins": [
  [
    "@babel/plugin-transform-runtime",
    
      "regenerator": true,
      "corejs": 3
    
  ]
]

安装编译时和运行时依赖项：

npm i --save-dev @babel/plugin-transform-runtime // only for build phase

npm i @babel/runtime // runtime babel helpers + just regenerator runtime
// OR (choose one!)
npm i @babel/runtime-corejs3 
// also contains other JS polyfills (not only regenerator runtime)
// depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

请参阅@babel/plugin-transform-runtime、@babel/runtime、@babel/runtime-corejs。

扩展

您还可以将@babel/preset-env 仅用于语法转换，与useBuiltIns: false 一起使用。由于 library 选项不使用全局 polyfill，您可能还想转译 node_modules - 请参阅 absoluteRuntime 选项。

结束语

重大更改：@babel/polyfill 已弃用，以 Babel 7.4.0 开头。

旧版：如果您无法切换到core-js@3，请将corejs 选项设置为2（请参阅migrations）。在选项 2 (@babel/plugin-transform-runtime) 的情况下安装 @babel/runtime-corejs2。

Excellent summary in #9853 乔维卡·马尔科斯基

目前，库方法doesn't take selective targets into account - 这意味着您以更大的包大小（包括所有个polyfills）为代价采用本地范围的polyfills。

babel-polyfills 是一种新的实验性方法，可以用不同的策略注入不同的 polyfill（不仅仅是core-js）。

这也允许selectively include locally scoped polyfills。

【讨论】：

谢谢！在网格站点中运行玩笑时遇到了麻烦

应该被接受的答案。不知道为什么 babel 官方网站上没有包含这么详细的信息。

【参考方案3】：

已经有一个very good answer here（最初发布在 Babel6 问题上），我将把它翻译成 Yarn。基本上，您需要 babel 运行时（不作为开发依赖项）和插件 transform-runtime

yarn add @babel/runtime 
yarn add -D @babel/plugin-transform-runtime

并且，在 .babelrc 中，添加：

    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/transform-runtime"]

【讨论】：

这个提示实际上救了我。我正在尝试使用 DEV 依赖，但它没有用。您能否解释一下为什么它现在可以工作:)

@babel/runtime 需要作为你的代码运行的依赖项 @babel/plugin-transform-runtime 在 babel 编译你的代码时需要

考虑到结果，你的方法和接受的答案有什么区别吗？

【参考方案4】：

我刚刚将babel-polyfill直接导入到显示错误的文件中时解决了这个错误，例如错误说“ReferenceError：regeneratorRuntime is not defined at /dist/models/usersSchema.js”，所以我使用这在我的 usersSchema.js 文件中：

require("babel-polyfill");

（你也可以使用import "babel-polyfill";）

【讨论】：

babel-polyfill 已弃用。

【参考方案5】：

我的 react 项目中出现了这个错误，webpack 4 导致整个项目无法渲染。

我就是这样解决的：

安装plugin-transform-runtime:

npm install @babel/plugin-transform-runtime -D

将plugin-transform-runtime 添加到.babelrc 文件中的插件列表中：

  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  

【参考方案6】：

React.js 用户

如果您在使用 react 时遇到此问题（特别是在尝试使用 Async/Wait 时），那么 Valentino Gagliardi 在 his blog 上提供了有关如何处理的详细方法解决这个问题

【参考方案7】：

您需要有 regeneratorRuntime。

安装这两个包 - babel-plugin-transform-regenerator 和 babel-polyfill

通过.babelrc添加如下Babel配置

  "plugins": ["transform-regenerator"]

【讨论】：

我认为另一件事是安装babel-polyfill 并在应用程序的最顶层要求它-import 'babel-polyfill';

使用 babel 7 和 yarn add -D @babel/polyfill @babel/transform-regenerator 并将 "@babel/transform-regenerator" 添加到我的 babelrc 插件中不起作用