38

我正在尝试运行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 特性,包括箭头。只是没有继续发电机。

4

5 回答 5

45

Node js Env - 2015 年 12 月更新

这个问题已经得到解答,请参阅已接受的答案,除非在 NodeJS 环境中运行。

如果像我一样,你有同样的错误信息:'ReferenceError: regeneratorRuntime is not defined' 但是在 NodeJS 环境中运行 Babel,那么只需执行以下操作可能会解决你的问题:

npm install babel-polyfill --save

然后将以下 require 语句插入受影响模块的顶部以获得所需的(生成器)行为:

require("babel-polyfill");

这应该是您所需要的,只需导入模块即可在运行时添加所需的 polyfill 行为。

于 2015-12-10T06:56:04.947 回答
29

与 arcseldon 的帖子类似,我在 NodeJS 环境中运行 Babel 并收到相同的错误消息“ReferenceError: regeneratorRuntime is not defined”。虽然安装 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 创作功能。

于 2018-12-10T20:03:51.813 回答
27

虽然我采用不同的方法** 在我的项目中将 Karma 与 Babel 一起使用,但我怀疑您遇到了与我相同的问题:未加载Babel polyfill,因此您没有获得它支持的功能(包括 Babel 用来使生成器工作的自定义再生器运行时)。

一种方法是找到一种包含 polyfill 的方法,或许可以通过 files 数组将其提供给 Karma:

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

另一种方法可能是使用 Babel 的运行时转换器[编辑:在重新阅读文档时,除非您随后使用 browserify/webpack/etc,否则这将不起作用。处理require()由转换器创建的调用];根据其文档,

可选的runtime变压器做三件事:

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

我没有这方面的经验,但我怀疑你会通过optional: ['runtime']在你的配置中包含 Babel 文档中的选项来做到这一点babelPreprocessor,即:

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

**我目前正在使用 jspm + jspm-karma + 一些配置来让 Babel polyfill 加载到 SystemJS 中;询问是否相关,我会解释。

于 2015-03-11T04:31:36.740 回答
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);
    });
  });
于 2015-03-11T14:01:08.470 回答
0

如果你使用React,添加 polyfillscreate-react-app对我有用。

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 页面上查看更多示例。

于 2019-05-30T11:52:54.737 回答