1. ホーム
  2. javascript

[解決済み] RegeneratorRuntime が定義されていない

2022-03-11 02:23:47

質問

を実行しようとしています。 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 is not defined".

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機能を使用することができます。 ただ、ジェネレータはダメです。

どうすればいいですか?

私はプロジェクトでBabelとKarmaを使用するために異なるアプローチ**を取っていますが、あなたは私と同じ問題を抱えていると思われます。 バベルポリフィル が読み込まれないため、それがサポートする機能 (ジェネレータを動作させるために Babel が使用するカスタム regenerator ランタイムを含む) を得られないのです。

1つのアプローチは、ポリフィルを含める方法を見つけることで、おそらくファイル配列を介してKarmaにそれを供給することです。

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

別のアプローチとして、Babelの ランタイムトランスフォーマー [ edit: ドキュメントを読み直したところ、これはbrowserify/webpack/etc.で require() トランスフォーマーによって作成された ]、そのドキュメントによると。

runtime オプションのトランスフォーマーは、3つのことを行います。

  • を自動的に要求します。 babel-runtime/regenerator ジェネレータ/非同期関数を使用する場合。
  • を自動的に要求します。 babel-runtime/core-js で、ES6 の静的メソッドとビルトインをマップします。
  • インラインのバベルヘルパーを削除して module babel-runtime/helpers 代わりに

私は経験がないのですが、そのような場合は、以下のように記述するのではないでしょうか。 optional: ['runtime'] オプションは、Babel ドキュメントにある babelPreprocessor という設定にします。

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

( ** 現在、SystemJS で Babel polyfill を読み込むために jspm + jspm-karma + いくつかの設定を使用しています。 )