Javascript 未定义巴别塔6再生器运行时间

我正在尝试使用async，在Babel 6上从头开始等待，但我得到的是regeneratorRuntime没有定义

.LRC文件

{
    "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 7.4开始）是必需的。您还必须安装它才能使异步/等待工作

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

...

"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",
...

B.法律改革委员会

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

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

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

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

在启动文件中

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

如果您正在使用webpack，则需要将其作为

条目

数组的第一个值放入您的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

---

或者，如果您不需要babel polyfill提供的所有模块，您可以在您的网页配置中指定

babel regenerator runtime

：

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

  // ...
};

当将webpack dev server与HMR一起使用时，这样做可以将每次构建时必须编译的文件数量减少很多。此模块是作为

babel polyfill

的一部分安装的，因此，如果您已经安装了该模块，则可以使用

npm i-D babel再生器运行时

单独安装该模块

注意 如果您使用的是babel 7，则该软件包已重命名为

除了polyfill，我还使用了。插件描述为：

外部化对帮助程序和内置程序的引用，在不污染全局的情况下自动填充代码。这到底意味着什么？基本上，您可以使用Promise、Set、Symbol等内置功能，也可以无缝使用所有需要polyfill的巴贝尔功能，而不会造成全局污染，使其非常适合库

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

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

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

在

.babelrc

中，添加运行时插件

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

---

如果使用

babel-preset-stage-2

，则只需使用

——require babel polyfill

启动脚本即可

在我的例子中，这个错误是由

Mocha

测试引发的

下面修复了这个问题

mocha\“server/tests/***.test.js\”--编译器js:babel register--需要babel polyfill

我有一个设置
使用

预设：[es2015'，stage-0']

以及运行webpack编译的测试的mocha

要使我的

异步/await

在测试中工作，我所要做的就是将摩卡与

--require babel polyfill

选项一起使用：

mocha --require babel-polyfill

---

当我尝试使用ES6生成器时，使用gulp with rollup时出现此错误：

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 }));
});

{ "presets": ["es2015"], "plugins": ["transform-async-to-generator"] } 我可能认为解决方案包括

babel polyfill

作为鲍尔组件：

bower install babel-polyfill --save

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

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

更新 如果您将目标设置为Chrome，它将起作用。但它可能不适用于其他目标，请参阅：

因此，这个答案对于最初的问题并不十分合适。我将把它保存在这里，作为对巴贝尔预设环境的参考

一个简单的解决方案是在代码开头添加

import'babel polyfill'

如果您使用webpack，一个快速解决方案是添加

babel polyfill

，如下所示：

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

我相信我已经找到了最新的最佳实践。 检查此项目：

将以下内容用作您的babel配置：

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

那么你的应用程序应该可以在最近两个版本的Chrome浏览器中运行

您还可以将节点设置为目标，或根据需要微调浏览器列表

告诉我什么，不要告诉我怎么做。 我真的很喜欢巴贝尔预设环境的理念：告诉我你想要支持哪种环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处

---

我测试了

async

wait

，它们确实有效。我不知道它们是如何工作的，我真的不想知道。我想把时间花在自己的代码和业务逻辑上。多亏了巴别塔预设环境，它将我从巴别塔配置地狱中解放出来。

1-安装巴别塔插件转换异步到模块方法， 巴贝尔polyfil，蓝鸟，巴贝尔-preset-es2015，巴贝尔核心：

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

2-添加您的js babel polyfill：

导入“babel polyfill”

3-在.babelrc中添加插件：

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

来源：
您收到一个错误，因为async/await使用生成器，这是ES2016的一项功能，而不是ES2015。解决此问题的一种方法是为ES2016安装babel预置（
npm安装——保存babel-preset-ES2016
），并编译到ES2016而不是ES2015：

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

正如其他答案所提到的，您也可以使用（尽管确保在运行任何其他代码之前执行）。或者，如果不想包含所有的polyfill依赖项，可以使用或。
新答案为什么要遵循我的答案

Ans:因为我将用最新的npm项目更新版本给你一个答案

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"

如果您使用此版本或更高版本的Npm和所有其他…
所以只需要改变一下：

webpack.config.js

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

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

更改
webpack.config.js
文件后，只需将这一行添加到代码顶部即可

import "babel-polyfill";

现在检查一切是否正常

还感谢@BrunoLM给出的漂亮回答。
我的简单解决方案：

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

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

我通过安装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';

对于我包含的测试，需要在我的测试脚本中使用babel polyfill

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

如果前端使用Gulp+Babel，则需要使用Babel polyfill

npm install babel-polyfill --save

npm安装巴别塔polyfill

然后将一个脚本标记添加到index.html，高于所有其他脚本标记，并从node_模块引用babel polyfill
import "babel-polyfill"
async function myFunc(){ }

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

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

npm install --save-dev regenerator-runtime

import 'regenerator-runtime/runtime';

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

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

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

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

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

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

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

...

"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",
...

import "@babel/polyfill";

....

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

npm i --save regenerator-runtime core-js

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

{
  "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

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

npm i regenerator-runtime

import "regenerator-runtime/runtime";

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

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

npm install --save @babel/polyfill

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

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

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

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

// 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
          }
        }
      },
    ],
  },

};

npm i regenerator-runtime

require("regenerator-runtime/runtime");