未定义Babel 6再生器运行时

Question

未定义Babel 6再生器运行时我正在尝试使用异步，在Babel 6上从头到尾等待，但是再生器运行时没有定义。.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;正常使用它，而不需要异步/等待，工作正常。知道我做错什么了吗？

Answer 1

babel-polyfill是必需的。您还必须安装它才能获得异步/等待工作。

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具有异步/等待(示例代码)

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

如果你用网络包您需要将其作为entry数组在您的webpack配置文件中(通常是webpack.config.js)，如Per@Ceman评论所示：

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

Answer 2

除了填充物，我用Babel-插件-转换-运行时..该插件被描述为：

外部化对帮助者和构建器的引用，自动填充代码而不污染全局。这到底是什么意思？基本上，您可以使用内置的，如承诺，集，符号等，以及使用所有的巴贝尔功能，需要一个完整的填充，没有全球性的污染，使它非常适合图书馆。

它还包括对异步/等待的支持，以及ES 6的其他内置。

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

在……里面.babelrc，添加运行时插件。

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

Answer 3

如果你把目标设定为Chrome，它就能工作。但它可能不适用于其他目标，请参阅：https：/github.com/Babel/Babel-预设-env/Isks/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"]
      }
    }]
  ]}

那么你的应用程序应该可以在最后两个版本的Chrome浏览器中使用。

你也可以设置节点作为目标或微调浏览器列表https://github.com/ai/browserslist

告诉我什么，别告诉我怎么做。

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

我测试过async await他们确实有工作。我不知道它们是怎么工作的我真的不想知道。我想把我的时间花在我自己的代码和业务逻辑上。感谢babel-preset-env它把我从巴贝尔配置地狱中解放出来。