Question

我正在尝试运行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 =＆gt; ES5）：

babel src --watch --out-dir tests

然后我运行karma start我收到错误：

ReferenceError：未定义regeneratorRuntime＆＃34;。

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'],

Full project on github

我可以使用许多ES6功能，包括箭头。只是没有继续发电机。

Answer 1

节点js Env - 2015年12月更新

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

如果像我一样，您有相同的错误消息：＆＃39; ReferenceError：regeneratorRuntime未定义＆＃39; 但在NodeJS环境中运行Babel，那么只需执行以下操作即可解决你的问题：

npm install babel-polyfill --save

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

require("babel-polyfill");

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

Answer 2

虽然我采取了不同的方法**在我的项目中使用Karma和Babel，我怀疑你遇到了同样的问题：Babel polyfill没有加载，所以你是没有得到它支持的功能（包括Babel用来使生成器工作的自定义再生器运行时）。

一种方法是找到一种方法来包含polyfill，也许是通过文件数组将它送到Karma：

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

另一种方法可能是使用Babel的runtime transformer [编辑：重新阅读文档，除非您浏览/ 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中;询问是否相关，我会解释。）

Answer 3

类似于arcseldon的帖子，我在NodeJS环境中运行Babel并收到相同的错误消息“ ReferenceError：未定义regeneratorRuntime”。安装babel-polyfill确实可行时，我改用@ babel / plugin-transform-runtime。

@babel/plugin-transform-runtime

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

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

第二个是生产依赖性：

npm install --save @babel/runtime

然后，您的.babelrc文件中需要添加一个简单的内容：

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

这些附加功能提供了ES6创作功能，而没有ReferenceError。

Answer 4

我修改了karma.conf.js以在Docs Link中添加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);
    });
  });

Answer 5

如果您使用反应，则从create-react-app添加polyfill对我有用。

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

未定义RegeneratorRuntime

5 个答案: