未定义Babel 6 regeneratorRuntime

2020/09/22 20:41 · javascript ·  · 0评论

我正在尝试使用异步,在Babel 6上从头开始,但是我得到的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;

正常使用它而不需要异步/等待就可以了。有什么想法我做错了吗?

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

.babelrc

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

带有async / await的.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");

如果您使用的是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

除了polyfill之外,我还使用babel-plugin-transform-runtime该插件描述为:

外部化对助手和内置函数的引用,自动填充代码而不会污染全局变量。这实际上是什么意思?基本上,您可以使用Promise,Set,Symbol等内置函数,也可以无缝使用需要Polyfill的所有Babel功能,而不会造成全球污染,因此非常适合于图书馆。

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

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

在中.babelrc,添加运行时插件

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

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

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

更新资料

如果您将目标设置为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-polyfill提供的模块,则只需babel-regenerator-runtime在webpack配置中指定即可:

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

  // ...
};

当将Webpack-dev-server与HMR一起使用时,这样做可以减少必须在每个版本上编译的文件数量。该模块是作为模块的一部分安装的,babel-polyfill因此,如果您还可以,则可以单独使用进行安装npm i -D babel-regenerator-runtime

更新Babel 7帖子也有更深入的解答。


Babel 7.4.0或更高版本(core-js 2/3)

Babel 7.4.0开始@babel/polyfill 弃用

通常,有两种安装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 .    
    },
  }]
]

会自动使用regenerator-runtimecore-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使用填充工具,替换@babel/runtime@babel/runtime-corejs2(对"corejs": 2)或@babel/runtime-corejs3(对"corejs": 3)。

我的简单解决方案:

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

如果在async/await没有适当的Babel插件的情况下使用函数,则会导致此错误截至2020年3月,您需要做的只是以下工作。@babel/polyfill并且Babel已弃用了许多公认的解决方案。有关Babel文档的更多信息,请参见

在命令行中,输入:

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-regenerator-runtime现在已弃用,而应该使用regenerator-runtime

要将运行时生成器与webpackbabelv7一起使用:

安装regenerator-runtime

npm i -D regenerator-runtime

然后在webpack配置中添加:

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

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

注意提升功能

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

更改此代码

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

对此

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

以防止将其悬挂在polyfill进口上方。

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

就我而言,此错误是由Mocha测试引发的

以下解决了这个问题

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

截至2019年10月,这对我有效:

将此添加到预设。

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

然后使用npm安装regenerator-runtime。

npm i regenerator-runtime

然后在您的主文件中使用:(此导入仅使用一次)

import "regenerator-runtime/runtime";

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

将项目转换为打字稿项目后,我开始收到此错误。据我了解,问题源于异步/等待未被识别。

对我来说,错误是通过在安装程序中添加两件事而解决的:

  1. 如上文所述,我需要将babel-polyfill添加到我的webpack条目数组中:

    ...
    
    条目:['babel-polyfill','./index.js'],
    
    ...
  2. 我需要更新我的.babelrc以允许将异步/等待合并到生成器中:

    {
      “预设”:[“ es2015”],
      “插件”:[“将发电机转换为发电机”]
    }

DevDependencies:

我还必须在package.json文件中的devDependencies中安装一些东西。即,我缺少babel-plugin-transform-async-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要点获得了代码,您可以在这里找到

我在Chrome中遇到了这个问题。类似于RienNeVaPlu的回答,这为我解决了问题:

npm install --save-dev regenerator-runtime

然后在我的代码中:

import 'regenerator-runtime/runtime';

很高兴避免从那里多出200 kB babel-polyfill

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

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

如其他答案所述,您也可以使用polyfills(尽管请确保在运行任何其他代码之前先加载polyfill)。另外,如果您不想包括所有的polyfill依赖项,则可以使用babel-regenerator-runtimebabel-plugin-transform-runtime

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

新答案为什么您遵循我的答案?

回答:因为我将为您提供最新的更新版本npm project的答案。

2017年04月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"]
};

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

import "babel-polyfill";

现在检查一切正常。参考链接

也感谢@BrunoLM的回答。

我需要支持的目标浏览器已经支持异步/等待,但是在编写摩卡测试时,如果没有适当的设置,我仍然会遇到此错误。

最让我用Google搜索的文章是过时的,包括接受的答案,高投的答案在这里,即你不需要polyfillbabel-regenerator-runtimebabel-plugin-transform-runtime等等。如果您的目标浏览器已经支持异步/等待(当然,如果您不需要polyfill)

我都不想用webpack

自从他提出建议以来,泰勒·朗的答案实际上是在正确的轨道上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
      }]
    ]
  }

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/

要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

当我尝试使用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>

对于希望使用babel-polyfill版本7 ^的用户,请使用webpackver3 ^。

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

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

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

我有一个设置

的WebPack使用presets: ['es2015', 'stage-0']

摩卡正运行通过的WebPack编译测试。

为了使我async/await的测试工作正常,我所要做的就是将mocha与以下--require babel-polyfill选项一起使用

mocha --require babel-polyfill

我的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";

....

供将来参考

从Babel版本7.0.0-beta.55起,舞台预设已删除

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

异步等待仍然可以被

https://babeljs.io/docs/zh-CN/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"],
};

如果您使用Gulp + Babel作为前端,则需要使用babel-polyfill

npm install babel-polyfill

然后在所有其他脚本标签上方将脚本标签添加到index.html,并从node_modules引用babel-polyfill

这些答案大多数都建议使用WebPack处理此错误的解决方案。但是,如果有人在使用RollUp(就像我一样),那么这最终对我有用(只是要抬起头,然后将这种polyfill广告打包成大约1万个输出尺寸):

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

如果要构建应用程序,则只需要@babel/preset-envand @babel/polyfill

npm i -D @babel/preset-env
npm i @babel/polyfill

(注意:您不需要安装core-jsregenerator-runtime软件包,因为它们都将由@ babel / polyfill安装)

然后在.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

现在设置目标环境。在这里,我们在.browserslistrc文件中执行此操作:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

最后,如果您使用useBuiltIns: "entry",请放在import @babel/polyfill条目文件的顶部。否则,您就完成了。

当您的任何目标环境/浏览器需要它们时,使用此方法才会有选择地导入那些polyfill和“ regenerator-runtime”文件(regeneratorRuntime is not defined在此处修复您的问题)

该解决方案已过时。

我在此视频的youtube评论中找到了解决方案
https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-Oy​​OzsKIIrB4AaABAg

这应该指向正确的评论。寻找“解决方案”的许多道具。

Beth W 3个月前(编辑)

我必须在2019年进行的另一项更改-babel显然不再使用v7之前的Stage-0预设,因此在26:15而不是'npm install --save-dev babel-polyfill babel -preset-stage-0',我必须这样做:

npm install --save @babel/polyfill

其中涵盖了两个较早的选项。然后,在应用程序的入口点,我>包括“ @ babel / polyfill”,在查询预置中,我将其保持不变。因此,webpack配置最终看起来像:

const path = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill', './src/app.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

希望能对某人有所帮助!

本文地址:http://javascript.askforanswer.com/weidingyibabel-6-regeneratorruntime.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!