logo标签列表

RegeneratorRuntime未定义

javascriptkarma-runnerbabeljskarma-babel-preprocessor
42

我正在尝试运行Karma-babel-preprocessor和一个简单的ES6生成器：

//require('babel/polyfill');

  describe("how Generators work", function() {
    it("will allow generator functions", function() {
      /*function * numbers() {
        yield 1;
        yield 2;
        yield 3;
      };*/


      let numbers = {
        [Symbol.iterator]:function*(){
            yield 1;
            yield 2;
            yield 3;
          }
      }

      let sum = 0;

      for(n of numbers){
        sum += n;
      }

      expect(sum).toBe(6);
    });
  });

我使用babel生成了我的测试文件（将ES6转换为ES5）：

babel src --watch --out-dir tests

然后我运行karma start时出现错误：

ReferenceError: regeneratorRuntime未定义。

karma.conf.js中相关部分：

  // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {pattern: 'tests/*.js', included: true}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
            'src/*.js': ['babel']
    },
        'babelPreprocessor': {
      options: {
        sourceMap: 'inline'
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    },


// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],

在GitHub上查看完整项目

我能使用许多ES6特性，包括箭头函数。只是对生成器无法使用。

5个回答
45

Node.js环境 - 2015年12月更新

如果您正在NodeJS环境中运行，请查看已接受的答案，除非问题已经得到解决。

如果您像我一样在NodeJS环境中运行Babel时遇到了相同的错误信息：'ReferenceError: regeneratorRuntime is not defined'，那么简单地执行以下操作可能会解决您的问题：

npm install babel-polyfill --save

然后在受影响的模块顶部插入以下 require 语句，以获取所需的（生成器）行为：

require("babel-polyfill");

这应该是你所需的全部内容，只需导入模块即可在运行时添加所需的填充行为。

我试图使用FuseBox来打包一个React应用程序，为了使其正常工作，我必须这样做。 - OtotheA
31

和arcseldon的帖子类似，我在NodeJS环境中运行Babel时遇到了相同的错误信息'ReferenceError: regeneratorRuntime未定义'。虽然安装babel-polyfill确实有效，但我选择了@babel/plugin-transform-runtime。

@babel/plugin-transform-runtime

它需要以两种方式安装...首先作为开发依赖项：

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

第二个作为生产依赖项：

npm install --save @babel/runtime

然后您的.babelrc文件需要添加一个简单的附加项：

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

这些添加功能可在没有ReferenceError的情况下提供ES6的编写功能。

我试图在CircleCI上正确运行一些Jest单元测试，并不得不使用这个来使它们通过。 - Arnaud Valle
适用于webpack 5 + babel。 - Anurag Srivastava
27

虽然我在我的项目中使用Karma和Babel时采取了不同的方法，但我怀疑你遇到了与我当初相同的问题：未加载Babel polyfill，因此您无法获得其支持的功能（包括Babel使用的自定义生成器运行时regenerator runtime）。

一种方法是找到一种方法来包含该polyfill，可能通过将其提供给Karma的文件数组：

files: [
  'path/to/browser-polyfill.js', // edited: polyfill => browser-polyfill per P.Brian.Mackey's answer
  ...

另一种方法是使用Babel的运行时转换器 [编辑：重新阅读文档后，除非您使用browserify/webpack等处理转换器创建的require()调用，否则此方法将无法工作]; 根据其文档：

 

runtime可选转换器有三个作用：

    
     
  • 在使用生成器/异步函数时自动要求babel-runtime/regenerator。
    •  
  • 自动要求babel-runtime/core-js并映射ES6静态方法和内置函数。
    •  
  • 删除内联Babel助手并改用module babel-runtime/helpers。
    •  

我对此没有经验，但我猜您可以通过在babelPreprocessor配置中包含来自Babel文档的optional: ['runtime']选项来实现这一点，如下所示：

'babelPreprocessor': {
  options: {
    optional: ['runtime'],  // per http://babeljs.io/docs/usage/options/
    sourceMap: 'inline'
  },
...

(** 我目前正在使用 jspm + jspm-karma + 一些配置来让 Babel polyfill 在 SystemJS 中加载；如果相关，可以询问我并加以解释。)

(** I'm currently using jspm + jspm-karma + some config to get the Babel polyfill to load in SystemJS; ask if relevant and I'll expound.)

1
我尝试了两个选项，但都没有成功。我添加了 node_modules/babel/polyfill.js，但出现了错误：Uncaught ReferenceError: module is not defined。我认为这是因为该文件中只有一行包含 module 的代码。我添加了更多的 dir/*.js 目录，但仍然没有任何作用。你列出的第二个选项似乎没有影响，还是出现同样的错误。 - P.Brian.Mackey
1
你的答案非常接近，肯定让我朝正确的方向前进了一步。不过还有一些需要注意的问题，因此我发布了一个答案来帮助识别它们。 - P.Brian.Mackey
太棒了！我已经编辑了我的答案中的polyfill路径，以避免让他人感到困惑。 - Martin
4

我修改了 karma.conf.js 文件，按照 文档链接 中提到的方式添加了 browser-polyfill：

files: [
            'node_modules/babel/browser-polyfill.js',
      'test-main.js',
      {pattern: 'tests/*.js', included: true}
    ],

在进行这项修改之后，下面的单元测试将在Karma中正常工作：

  describe("how Generators work", function() {
    it("will allow generator functions", function() {
     /*function* numbers(){
       yield 1;
       yield 2;
       yield 3;
     };*///Simplified syntax does not work

      let numbers = {
        [Symbol.iterator]:function*(){
            yield 1;
            yield 2;
            yield 3;
          }
      }

      let sum = 0;

      for(let num of numbers){
        sum += num;
      }

      expect(sum).toBe(6);
    });
  });
你的整个 karma.conf 长什么样子？ - JerryFox
要包含的文件似乎已经变成了“node_modules/babel-polyfill/browser.js”。 - blacelle
0
如果您使用 React，我发现从 create-react-app 中添加 polyfills 可以解决问题。
yarn add --dev react-app-polyfill

然后将以下行添加到webpack.config.js中

entry: {
  app: [
    'react-app-polyfill/ie9', // Only if you want to support IE 9
    'react-app-polyfill/stable',
    './src/index.jsx',
  ],
},

在react-app-polyfill GitHub页面上查看更多示例。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接