web-dev-qa-db-ja.com

RegeneratorRuntimeが定義されていません

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機能を使用できます。ジェネレーターは使用しないでください。

javascriptkarma-runnerbabeljskarma-babel-preprocessor
31
P.Brian.Mackey

私のプロジェクトでKarmaをBabelで使用するための別のアプローチを取っていますが、私は同じ問題を抱えていると思います： Babel polyfill がロードされていないので、それがサポートする機能を取得していない（Babelがジェネレータを動作させるために使用するカスタムリジェネレータランタイムを含む）。

1つのアプローチは、ポリフィルを含める方法を見つけることです。おそらく、files配列を介して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の静的メソッドと組み込みをマップします。
  • インラインbabelヘルパーを削除し、代わりに_module babel-runtime/helpers_を使用します。

私はこれに関する経験はありませんが、babelPreprocessor configにBabelドキュメントの_optional: ['runtime']_オプションを含めることでそうすることができると思います。つまり：

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

（**現在、私はjspm + jspm-karma +いくつかの設定を使用してSystemJSにロードするBabelポリフィルを取得しています。関連があるかどうかを尋ね、説明します）

25
Martin

Node js Env-2015年12月更新

この質問はすでに回答済みです。NodeJS環境内で実行されていない限り、承認済みの回答をご覧ください。

私と同じように、同じエラーメッセージが表示された場合：'ReferenceError：regeneratorRuntime is not defined'

npm install babel-polyfill --save

次に、影響を受けるモジュールの上部に次のrequireステートメントを挿入して、必要な（ジェネレーター）動作を取得します。

require("babel-polyfill");

これで十分です。モジュールをインポートするだけで、実行時に必要なポリフィル動作が追加されます。

41
arcseldon

Arcseldonの投稿と同様に、NodeJS環境内でBabelを実行しているときに、同じエラーメッセージ「ReferenceError：regeneratorRuntime is not defined」が表示されました。 babel-polyfillのインストールは機能しますが、代わりに@ babel/plugin-transform-runtimeを使用しました。

@ babel/plugin-transform-runtime

2つの方法でインストールする必要があります...最初にdev依存関係として：

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

生産依存としての2番目：

npm install --save @babel/runtime

そして、.babelrcファイルに1つの簡単な追加が必要です。

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

これらの追加により、ReferenceErrorのないES6オーサリング機能が提供されます。

19
Kevin

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);
    });
  });
4
P.Brian.Mackey

Reactを使用する場合、create-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ページ で他の例を参照してください。

0
Rafal Enden