Babel.js 巴别塔7 -参考错误:未定义regeneratorRuntime

iovurdzv  于 2022-12-08  发布在  Babel
关注(0)|答案(8)|浏览(180)

我有一个应用程序,它是一个节点后端和一个React前端。
当我尝试构建/运行我的节点应用程序时,出现以下错误。
节点:v10.13.0

错误:

js:314函数调用时的标记(函数_被调用方(产品ID){ ^
引用错误:未定义regeneratorRuntime

.babelrc

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

网页包.配置.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"]
            }),

        ]

    },

软件包.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"
  }
vql8enpb

vql8enpb1#

Updated Answer:

If you are using Babel 7.4.0 or newer, then @babel/polyfill has been deprecated . Instead, you will want to use the following at the top of your main js file (likely index.js or similar):

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

Install these packages either with npm:

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

or with yarn:

yarn add core-js
yarn add regenerator-runtime

Original Answer:

I just encountered this problem and came across the following solution:
In package.json I had @babel/polyfill as a dependency. However, in my index.js (My main js file) I had neglected to place the following line at the the top:
import '@babel/polyfill'
Once I imported it, everything worked fine.
I did not need to install babel-runtime as other answers are suggesting.

rur96b6h

rur96b6h2#

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的多边形填充,由Browserslist查询指定。有两种模式-首先尝试usage(更方便),否则尝试entry(更灵活、更可靠):

*useBuiltIns '用法':不需要手动import任何东西。所有的多边形填充都是根据它们在文件中的 * 代码使用 * 自动添加的。
*使用内建'项目':将这些import条目 * 一次性 *(!)添加到您的应用中-类似于@babel/polyfill

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

分机

对于高级情况,您可以使用@babel/transform-runtime(dev)和@babel/runtime(run-time)only用于Babel辅助对象,以进一步减少bundle大小-称为辅助对象别名。

选项2:图书馆

**当用途:**▶图书馆† * 无 * 全球范围污染†包括 * 所有 * polyfills,不是选择性†更大的束大小忽略

"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。由于库选项不使用全局多边形填充,因此您可能还需要平移node_modules-请参阅absoluteRuntime选项。

结束语

*重大变更:从Babel 7.4.0开始,@babel/polyfill已被弃用。
*旧版:如果无法切换到core-js@3,请将corejs选项设置为2(请参阅迁移)。如果是选项2(@babel/plugin-transform-runtime),请安装@babel/runtime-corejs2

  • Jovica Markoski在#9853中的出色总结
  • 目前,库方法doesn't take selective targets into account-这意味着您可以以更大的包大小(包括 all polyfill)为代价获得局部范围的polyfill。
  • X1 E6 F1 X是一种新的 * 实验性 * 方法,用于使用不同的策略注入不同的聚合填充(不仅仅是X1 M23 N1 X)。
  • 这也允许选择性地包括局部范围的多边形填充。
zy1mlcev

zy1mlcev3#

已经有一个very good answer here(最初发布在Babel 6问题上),我将把它翻译成Yarn。基本上,你需要Babel运行时(不是作为一个开发依赖)和插件transform-runtime

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

在.babelrc中,添加:

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

ekqde3dh4#

我在我的react项目中遇到了这个错误,这阻止了整个项目的渲染。
我是这样解决的:
安装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
  ]  
}
pod7payv

pod7payv5#

对我来说很管用:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}
gblwokeq

gblwokeq6#

当我将babel-polyfill直接导入到显示错误的文件中时,我刚刚解决了这个错误,例如,错误显示“ReferenceError:regeneratorRuntime没有在/dist/models/usersSchema. js”中定义,所以我在我的usersSchema.js文件中使用这个:
require("babel-polyfill");
(you也可以使用import "babel-polyfill";

zsohkypk

zsohkypk7#

您将需要具有再生器运行时
安装这两个软件包-babel-plugin-transform-regeneratorbabel-polyfill
通过.babelrc添加以下Babel配置

{
  "plugins": ["transform-regenerator"]
}
cxfofazt

cxfofazt8#

React.js用户

如果您在使用react时遇到此问题(特别是在尝试使用Async/Wait时),则Valentino Gagliardi提供了有关如何解决此问题的his blog详细方法

相关问题