【问题标题】：Babel 6 regeneratorRuntime is not definedBabel 6 regeneratorRuntime 未定义
【发布时间】：2016-02-05 06:57:18
【问题描述】：

我正在尝试在 Babel 6 上从头开始使用 async/await，但我得到 regeneratorRuntime 未定义。

.babelrc 文件

{
    "presets": [ "es2015", "stage-0" ]
}

package.json 文件

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

.js 文件

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

在没有 async/await 的情况下正常使用它就可以了。任何想法我做错了什么？

【问题讨论】：

你加入了再生器吗？
babel-polyfill 是你所需要的。
babel-polyfill 自 7.4 起已贬值； this updated so post 描述了迁移。
对于那些使用较新版本的 babel 和 node 的人：stackoverflow.com/a/62254909/8169904

标签： javascript node.js babeljs

【解决方案1】：

babel-polyfill（deprecated 从 Babel 7.4 开始）是必需的。您还必须安装它才能使 async/await 正常工作。

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js 与 async/await（示例代码）

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

在启动文件中

require("babel-core/register");
require("babel-polyfill");

如果你使用 webpack，你需要将它作为 entry 数组的第一个值放在你的 webpack 配置文件中（通常是 webpack.config.js），根据@Cemen 评论：

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

如果您想使用 babel 运行测试，请使用：

mocha --compilers js:babel-core/register --require babel-polyfill

【讨论】：

在 webpack 中使用 babel 时的重要提示：不要使用不起作用的 require("babel-polyfill")，而是将 "babel-polyfill" 添加到配置中的 entry 中，如下所示：entry: ["babel-polyfill", "src/main.js"]。这对我有用，包括在带有 HMR 的 webpack-dev-server 中使用。
我试图让我的 mocha 测试与 babel6 和 async 一起运行，我不得不将 --require babel-polyfill 添加到 npm 测试运行器配置中
babel-register 有什么用？
@Lloyd devDependency 如果您使用的是 webpack，因为它会在运行之前“编译”文件。 dependency 如果你没有使用 webpack 并且你需要 babel。
这会使输出文件变得巨大...最好只使用你需要的而不是直接需要 babel-polyfill。

【解决方案2】：

注意如果您使用的是 babel 7，则该包已重命名为 @babel/plugin-transform-runtime。

除了 polyfill，我使用babel-plugin-transform-runtime。该插件描述为：

外部化对助手和内置函数的引用，自动填充代码而不污染全局变量。这实际上意味着什么？基本上，您可以使用 Promise、Set、Symbol 等内置插件，也可以无缝使用所有需要 polyfill 的 Babel 功能，而不会造成全局污染，非常适合库。

它还包括对 async/await 以及 ES 6 的其他内置功能的支持。

$ npm install --save-dev babel-plugin-transform-runtime

在.babelrc，添加运行时插件

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

【讨论】：

我不需要babel-runtime 来获得异步等待工作。那是对的吗？编辑：我正在运行代码服务器端。 :)
如果你能够在没有 babel-runtime 的情况下使用它，那是因为它已经在你的依赖树中了。所以请注意，如果您正在编写一个库，并且 babel-runtime 作为开发依赖项出现，那么您的用户可能不存在它。您必须将其作为正常的分发依赖项包含在内。
只需要babel-plugin-transform-runtime。像魅力一样工作。
此解决方案不可行，因为它需要额外的 Browserify 或 Webpack 作业来扩展由 transform-runtime 插件添加的 require 调用。
请注意，对于 Babel 7，您需要运行 npm install --save-dev @babel/plugin-transform-runtime

【解决方案3】：

Babel 7 用户

我在解决这个问题时遇到了一些麻烦，因为大多数信息都是针对以前的 babel 版本的。对于 Babel 7，安装这两个依赖项：

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

并且，在 .babelrc 中，添加：

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

【讨论】：

我们如何在没有 .babelrc 的情况下做到这一点（仅使用 webpack 配置文件）
文档将用法显示为"plugins": ["@babel/plugin-transform-runtime"]，而不是此处的"plugins": [ ["@babel/transform-runtime"] ]。不同的插件名称。两者都有效。但是哪一个是正确的呢？..
我得到 require is not defined 当遵循这个方法时
@kyw 最好始终遵循文档 - 除了约定之外没有区别。
将@babel/transform-runtime 添加到插件对我来说导致“未定义导出”错误。我把它改成了这个，让 async 在 Babel7 中工作：["@babel/plugin-transform-runtime", { "regenerator": true } ]

【解决方案4】：

更新

如果您将目标设置为 Chrome，它会起作用。但可能不适用于其他目标，请参考：https://github.com/babel/babel-preset-env/issues/112

所以这个答案不非常适合原始问题。我会把它留在这里作为对babel-preset-env的参考。

一个简单的解决方案是在代码开头添加import 'babel-polyfill'。

如果你使用webpack，一个快速的解决方案是添加babel-polyfill，如下所示：

entry: {
    index: ['babel-polyfill', './index.js']
}

我相信我已经找到了最新的最佳做法。

查看此项目：https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

使用以下作为你的 babel 配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

那么您的应用应该可以在最近 2 个版本的 Chrome 浏览器中运行。

您也可以将Node设置为目标或根据https://github.com/ai/browserslist微调浏览器列表

告诉我什么，不要告诉我怎么做。

我真的很喜欢babel-preset-env 的理念：告诉我你想支持哪个环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处。

我已经测试了 async await 并且它们确实有效。我不知道它们是如何工作的，我真的不想知道。我想把时间花在自己的代码和业务逻辑上。感谢babel-preset-env，它把我从 Babel 配置地狱中解放出来。

【讨论】：

这确实有效。唯一的缺点是babel-preset-env 拉取了一堆依赖项，但我认为这是值得的。也喜欢声明式的风格。 yarn install 现在也是 yarn add
@gargantuan 是的。
如果您想要针对较旧的浏览器或节点版本，这并不是真正的解决方案。
以防万一它不是很明显......如果您需要您的代码在 IE11 中工作，这个推荐的解决方案将不起作用
为什么会有这么多赞成票？这只有效，因为它不再转换 async/await，因此不再需要 regeneratorRuntime，并且因为它没有被转换，所以它不会在不支持它的浏览器上工作。

【解决方案5】：

更新：Babel 7 post 也有更深入的回答。

Babel 7.4.0 或更高版本（core-js 2 / 3）

截至Babel 7.4.0、@babel/polyfillis deprecated。

一般来说，安装 polyfills/regenerator 有两种方式：通过全局命名空间（选项 1）或作为 ponyfill（选项 2，没有全局污染）。

选项 1：`@babel/preset-env`

presets: [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3, // or 2,
    "targets": {
        "firefox": "64", // or whatever target to choose .    
    },
  }]
]

会根据你的target自动使用regenerator-runtime和core-js。无需手动导入任何内容。不要忘记安装运行时依赖项：

npm i --save regenerator-runtime core-js

或者，设置useBuiltIns: "entry" 并手动导入：

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

选项 2：`@babel/transform-runtime` 和 `@babel/runtime`

此替代方案没有全局范围污染，适用于库。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        "corejs": 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

安装它：

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

如果使用了corejs polyfill，则将@babel/runtime 替换为@babel/runtime-corejs2（对于"corejs": 2）或@babel/runtime-corejs3（对于"corejs": 3）。

【讨论】：

{ "presets": [ [ "@babel/preset-env", { "targets": { "esmodules": true } } ] ] } 这有助于我构建 node.js
我的意思是我已经知道了，但是为了帮助别人，这应该是正确的答案。最好的问候！
请注意，如果使用 corejs 选项的值分别为 2 或 3，则应使用 @babel/runtime-corejs2 或 @babel/runtime-corejs3。这在文档中提到：babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
感谢@Robin-Hoodie，我更新了答案的最后一部分，以便更清楚地了解这个主题。

【解决方案6】：

或者，如果您不需要 babel-polyfill 提供的所有模块，您可以在 webpack 配置中指定 babel-regenerator-runtime：

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

当使用带有 HMR 的 webpack-dev-server 时，这样做可以大大减少每次构建时必须编译的文件数量。这个模块是作为babel-polyfill 的一部分安装的，所以如果你已经安装了它就可以了，否则你可以使用npm i -D babel-regenerator-runtime 单独安装它。

【讨论】：

这似乎是最方便的解决方案。但是，大多数浏览器都支持生成器，因此这种解决方案可能不是最佳解决方案。见：blogs.candoerz.com/question/213492/…
如果你不使用 webpack 怎么办？

【解决方案7】：

我的简单解决方案：

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

【讨论】：

您在插件中缺少“transform-async-to-generator”。我还必须添加它以使其正常工作
@GabrielBB 我已经编辑了帖子，所以这是一个完整的例子。
需要loose: true吗？
当使用它时，它会在我的文件中添加 require 并且 require 在浏览器中是未定义的。
loose: true 不需要。您在 .babelrc 中真正需要的是： { "presets": ["es2015", "react", "stage-2"], "plugins": [ "transform-runtime", "transform-async-to-generator " ] }

【解决方案8】：

当async/await 函数在没有适当的 Babel 插件的情况下使用时会导致此错误。自 2020 年 3 月起，您只需要做以下事情。（@babel/polyfill 和许多公认的解决方案在 Babel 中已被弃用。在Babel docs. 中阅读更多信息）

在命令行中输入：

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

在您的babel.config.js 文件中，添加此插件@babel/plugin-transform-runtime。注意：下面的示例包括我最近从事的一个小型 React/Node/Express 项目的其他预设和插件：

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

【讨论】：

总是让我吃惊的是开发人员是多么的懒惰。 Babel 开发人员决定弃用功能，他们可能认为这会成为一个问题。为什么不让人们知道最可能的意图是什么，以及他们应该如何解决它。但是不，让我们只显示一些对新手来说绝对没用的信息。
对我来说效果很好。我的非反应项目.babelrc 看起来像这样：``` { "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-transform-runtime" ] } `` `
我收到属性预设无效的错误
它告诉我Uncaught ReferenceError: require is not defined
谢谢！最后一个答案不使用已弃用的@babel/polyfill。在我的测试中尝试使用 async/await 时，这对我有用。

【解决方案9】：

babel-regenerator-runtime 现在是deprecated，而应该使用regenerator-runtime。

将运行时生成器与webpack 和babel v7 一起使用：

安装regenerator-runtime：

npm i -D regenerator-runtime

然后在 webpack 配置中添加：

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

【讨论】：

这应该是公认的答案，babel-polyfill 添加了太多其他东西
非常适合我...非常感谢
这个方法总是包含运行时。我相信它违背了@babel/preset-env 的useBuiltIns 基于目标浏览器动态插入运行时的目的。
这对我有用，你。

【解决方案10】：

根据以下示例更新您的.babelrc 文件，它将起作用。

如果您使用的是@babel/preset-env 包

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

【讨论】：

能解释一下你的答案吗？ "node": "current" 做什么
我也想知道它的作用以及它是否是推荐的解决方案 - 即它不会危及任何东西并且是“面向未来的”（目前尽可能多） . targets 似乎是指 this : the environments you support/target for your project，而 targets.node 是 this: if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
FWIW，我使用了答案中定义的第二个块（并在此过程中删除了"stage-0"）并且再生器错误消失了。
@BunkerBoy 为方便起见，您可以使用 "node": "current" 仅包含用于运行 Babel 的 Node.js 版本的必要 polyfill 和转换
所以我不需要安装 polyfills 吗？

【解决方案11】：

截至 2019 年 10 月，这对我有用：

将此添加到预设中。

 "presets": [
      "@babel/preset-env"
    ]

然后使用 npm 安装 regenerator-runtime。

npm i regenerator-runtime

然后在您的主文件中使用：（此导入仅使用一次）

import "regenerator-runtime/runtime";

这将使您能够在文件中使用async awaits 并删除regenerator error

【讨论】：

不为useBuiltIns 设置值将默认为false。这不会根据目标环境自动导入任何 polyfill，这有点破坏了"@babel/preset-env" 的目的。 Here 也是其中一位 babel 开发者的相关评论。

【解决方案12】：

小心提升函数

我的“polyfill 导入”和“异步函数”都在同一个文件中，但是我使用的函数语法将它提升到 polyfill 上方，这会给我带来 ReferenceError: regeneratorRuntime is not defined 错误。

更改此代码

import "babel-polyfill"
async function myFunc(){ }

到这个

import "babel-polyfill"
var myFunc = async function(){}

以防止它被提升到 polyfill 导入上方。

【讨论】：

a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad 我疯了，你救了我我爱你

【解决方案13】：

如果使用babel-preset-stage-2，则只需使用--require babel-polyfill 启动脚本。

在我的情况下，这个错误是由Mocha 测试引发的。

解决了这个问题

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

【讨论】：

【解决方案14】：

我在 Chrome 中遇到了这个问题。类似于 RienNeVaPlu͢s 的回答，这为我解决了这个问题：

npm install --save-dev regenerator-runtime

然后在我的代码中：

import 'regenerator-runtime/runtime';

很高兴避免来自babel-polyfill 的额外 200 kB。

【讨论】：

这个答案被低估了，它是最简单的解决方案。但是在 dev 依赖中安装它是行不通的，你需要在依赖中安装它。我的用例是部署到 firebase 函数 nodejs 14

【解决方案15】：

您收到错误是因为 async/await 使用了生成器，这是 ES2016 的功能，而不是 ES2015。解决此问题的一种方法是为 ES2016 (npm install --save babel-preset-es2016) 安装 babel 预设并编译为 ES2016 而不是 ES2015：

"presets": [
  "es2016",
  // etc...
]

正如其他答案所提到的，您也可以使用polyfills（尽管在运行任何其他代码之前请确保您使用load the polyfill first）。或者，如果您不想包含所有 polyfill 依赖项，可以使用 babel-regenerator-runtime 或 babel-plugin-transform-runtime。

【讨论】：

【解决方案16】：

将我的项目转换为打字稿项目后，我开始收到此错误。据我了解，问题源于 async/await 未被识别。

对我来说，通过在我的设置中添加两件事来修复错误：

如上所述，我需要将 babel-polyfill 添加到我的 webpack 入口数组中：
... 条目：['babel-polyfill', './index.js'], ...
我需要更新我的 .babelrc 以允许将 async/await 编译到生成器中：
{ “预设”：[“es2015”]， “插件”：[“将异步转换为生成器”] }

开发依赖：

我还必须在我的 package.json 文件中的 devDependencies 中安装一些东西。也就是说，我缺少 babel-plugin-transform-async-to-generator、babel-polyfill 和 babel-preset-es2015：

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

完整代码要点：

我从一个非常有用且简洁的 GitHub gist 获得代码，您可以找到 here。

【讨论】：

最好使用预设env 而不是es2015。 env 已经包含 es2015。

【解决方案17】：

我通过安装 babel-polyfill 修复了这个错误

npm install babel-polyfill --save

然后我将它导入我的应用入口点

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

为了测试，我在测试脚本中包含了 --require babel-polyfill

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

【讨论】：

【解决方案18】：

我使用了来自https://github.com/babel/babel/issues/9849#issuecomment-592668815 的提示并将targets: { esmodules: true,} 添加到我的babel.config.js。

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

【讨论】：

【解决方案19】：

新答案你为什么要听我的回答？

Ans:因为我会用最新的更新版本 npm project 给你一个答案。

2017 年 4 月 14 日

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

如果您使用此版本或更多 UP 版本的 Npm 和所有其他... 所以只需要改变：

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

更改 webpack.config.js 文件后只需将此行添加到代码顶部。

import "babel-polyfill";

现在检查一切正常。 Reference LINK

也感谢@BrunoLM 的精彩回答。

【讨论】：

如果是后端服务，他为什么要使用 webpack？你的回答暗示他必须使用 webpack？
@Spock，我确实考虑过。我面临同样的问题，我用这种简单的方式解决了我的问题。我认为这对 Webpack 用户来说是肯定的答案，而且野兔有更多的正确答案，所以你可以关注任何其他人。
为什么你需要按下投票！！！！如果你想帮助我，你能说出原因吗？

【解决方案20】：

我需要支持的目标浏览器已经支持 async/await，但是在编写 mocha 测试时，如果没有正确设置，我仍然会出现此错误。

我用谷歌搜索的大多数文章都已过时，包括此处接受的答案和高票数的答案，即您不需要polyfill、babel-regenerator-runtime、babel-plugin-transform-runtime。等等如果你的目标浏览器已经支持 async/await（当然如果不是你需要 polyfill）

我也不想使用webpack。

Tyler Long 的回答实际上是在正确的轨道上，因为他建议了babel-preset-env（但我先省略了它，因为他在开头提到了 polifill）。一开始我仍然得到ReferenceError: regeneratorRuntime is not defined，然后我意识到这是因为我没有设定目标。为节点设置目标后，我修复了 regeneratorRuntime 错误：

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

【讨论】：

【解决方案21】：

上面有这么多答案，我会发布我的答案以供参考。我使用 webpack 并做出反应，这是我的解决方案没有 .babelrc 文件

我将在 2020 年 8 月进行这项工作

安装 react 和 babel

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom @babel/plugin-transform-runtime --save-dev

然后在我的 webpack.config.js 中

// other stuff
module.exports = {
// other stuff

   module: {
   rules: [
  
   {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env',"@babel/preset-react"],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
        //npm install --save-dev @babel/plugin-transform-runtime
          }
        }
      },
    ],
  },

};

我只是不知道为什么我暂时不需要安装异步包

【讨论】：

【解决方案22】：

1 - 安装 babel-plugin-transform-async-to-module-method， babel-polyfil，bluebird，babel-preset-es2015，babel-core：

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - 添加你的 js babel polyfill：

import 'babel-polyfill';

3 - 在你的 .babelrc 中添加插件：

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

来源：http://babeljs.io/docs/plugins/transform-async-to-module-method/

【讨论】：

【解决方案23】：

致 babel7 用户和 ParcelJS >= 1.10.0 用户

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

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

取自https://github.com/parcel-bundler/parcel/issues/1762

【讨论】：

【解决方案24】：

我有一个设置
与 webpack 一起使用 presets: ['es2015', 'stage-0']
以及运行由 webpack 编译的测试的 mocha。

为了让我的 async/await 在测试中正常工作，我所要做的就是使用带有 --require babel-polyfill 选项的 mocha：

mocha --require babel-polyfill

【讨论】：

【解决方案25】：

当我尝试使用 ES6 生成器时，使用带有汇总的 gulp 时出现此错误：

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

我可能认为解决方案是将babel-polyfill 包含为凉亭组件：

bower install babel-polyfill --save

并将其作为依赖添加到 index.html 中：

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

【讨论】：

谢谢。这对我有用。我不知道我需要添加脚本标签才能在客户端工作。

【解决方案26】：

对于希望使用 babel-polyfill 版本 7^ 的人，请使用 webpack ver3^。

npm 安装模块npm i -D @babel/polyfill

然后在您的webpack 文件中的entry 点中执行此操作

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

【讨论】：

【解决方案27】：

我正在使用的 babel 7 样板，用于与再生器运行时做出反应：

.babelrc

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

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

【讨论】：

【解决方案28】：

我正在使用 React 和 Django 项目，并通过使用 regenerator-runtime 使其工作。你应该这样做，因为@babel/polyfill 会增加你的应用程序的大小，而且也是deprecated。我还关注了this tutorial's 第 1 集和第 2 集来创建我的项目的 structure。

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

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

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...

【讨论】：

【解决方案29】：

在控制台中解决此“regeneratorRuntime 未定义问题”的最简单方法：

您不必安装任何不必要的插件。只需添加：

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

index.html 的正文内部。现在 regeneratorRuntime 应该在你运行 babel 后定义，现在你的 async/await 函数应该成功编译到 ES2015

【讨论】：

迄今为止最简单、最简洁的回应。谢谢！

【解决方案30】：

供将来参考：

截至 Babel 版本 7.0.0-beta.55 阶段预设已被删除

参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async await 仍然可以被使用

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

安装

npm install --save-dev @babel/plugin-transform-async-to-generator

.babelrc中的用法

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

并使用 babel polyfill https://babeljs.io/docs/en/babel-polyfill

安装

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

【讨论】：

更新

我相信我已经找到了最新的最佳做法。

告诉我什么，不要告诉我怎么做。

Babel 7.4.0 或更高版本（core-js 2 / 3）

选项 1：@babel/preset-env

选项 2：@babel/transform-runtime 和 @babel/runtime

小心提升函数

更改此代码

到这个

开发依赖：

完整代码要点：

选项 1：`@babel/preset-env`

选项 2：`@babel/transform-runtime` 和 `@babel/runtime`