Babel 7.4.0及更高版本

Question

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

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

节点：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"
  }

Answer 1

Babel 7.4.0及更高版本

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

选项1：应用

何时使用：✔适用于应用程序✔ global 范围的polyfills✔最小的包大小✔通过targets进行选择性包含✔无需处理{{1} }用于填充

node_modules

安装依赖项：

"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)
    }
  ]
]

@babel/preset-env 选择性地包括由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.的polyfill。有两种模式-首先尝试targets（更加方便），否则尝试usage（更加灵活和健壮）：

useBuiltIns 'usage' ：无需手动entry。所有polyfill会根据其代码使用情况自动添加到文件中。
useBuiltIns 'entry' ：将这些import项添加一次一次（！）-与import类似：
```
@babel/polyfill
```

扩展名

对于高级情况，您可以Babel helpers仅使用import "regenerator-runtime/runtime"; import "core-js/stable"; // or more selective import, like "core-js/es/array"（开发）和@babel/transform-runtime（运行时）{strong> 来减小捆绑包的大小-称为辅助别名。

选项2：库

何时使用：✔用于图书馆✔否全球范围内的污染✔包括所有填充物，而不是选择性的✔更大的捆束尺寸可以忽略不计

@babel/runtime

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

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

请参见@babel/plugin-transform-runtime，@babel/runtime，@babel/runtime-corejs。

扩展名

您还可以通过useBuiltIns: false将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)仅用于语法转换。由于库选项不使用全局polyfill，因此您可能还需要转换@babel/preset-env-请参见absoluteRuntime选项。

关闭笔记

重大更改：从@babel/polyfill开始不推荐使用Babel 7.4.0。
旧版：如果您无法切换到node_modules，请将corejs选项设置为core-js@3（请参见migrations）。如果有选件2（2），请安装@babel/runtime-corejs2。
Excellent summary in #9853
当前，库方法doesn't take selective targets into account-意味着您以更大的捆绑包价格（包括 all polyfills）来购买本地范围内的polyfill。
babel-polyfills是一种新的实验方法，可以通过不同的策略注入不同的polyfill（不仅仅是@babel/plugin-transform-runtime）。
这也允许selectively include locally scoped polyfills。

Answer 2

我在react的{{1}}项目中遇到此错误，这阻止了整个项目的渲染。

这是我解决的方法：

安装webpack 4：

plugin-transform-runtime

将npm install @babel/plugin-transform-runtime -D添加到plugin-transform-runtime文件中的插件列表中：

.babelrc

Answer 3

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

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

然后在.babelrc中添加：

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

Answer 4

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

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

import '@babel/polyfill'

一旦我导入了它，一切都会很好。

其他答案提示我不需要安装babel-runtime。

Answer 5

当我直接将babel-polyfill导入显示错误的文件中时，我刚刚解决了该错误，例如，错误显示“ ReferenceError：未在/dist/models/usersSchema.js中定义regeneratorRuntime”，因此我使用在我的usersSchema.js文件中：

require("babel-polyfill");

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

Answer 6

您将需要具有 regeneratorRuntime 。

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

通过val hBaseRDD: RDD[(ImmutableBytesWritable, Result)] = sparkSession.sparkContext.newAPIHadoopRDD( conf, classOf[TableInputFormat], classOf[ImmutableBytesWritable], classOf[Result] ) val resultRDD: RDD[Result] = hBaseRDD.map(tuple => tuple._2)

添加以下Babel配置

.babelrc

Answer 7

React.js用户

如果在使用React时（特别是在尝试使用 Async / Wait 时）遇到此问题，则 Valentino Gagliardi 在his blog上提供了有关以下方面的详细方法如何解决这个问题

Babel 7-ReferenceError：未定义regeneratorRuntime

7 个答案:

Babel 7.4.0及更高版本

选项1：应用

扩展名

选项2：库

扩展名

关闭笔记