webdevqa.jp.net

Babel 6 regeneratorRuntimeは定義されていません

私は非同期を使用しようとしています、Babel 6の上でゼロから待っています、しかし、私は手に入れて再生器の実行時間が定義されていません。

.babelrcファイル

{
    "presets": [ "es2015", "stage-0" ]
}

package.jsonファイル

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

.jsファイル

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Async/awaitなしで通常それを使うことはちょうどうまくいきます。私が悪いことをしているという考えはありますか?

463
BrunoLM

babel-polyfillは必須です。あなたはまた非同期/動作を待つためにそれをインストールしなければなりません。

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

asj/await付きの.js(サンプルコード)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

起動ファイル内

require("babel-core/register");
require("babel-polyfill");

webpack を使用している場合は、@ Cemenのコメントに従って最初のエントリとして追加する必要があります。

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

もしあなたがbabelでテストを実行したいのであれば:

mocha --compilers js:babel-core/register --require babel-polyfill
552
BrunoLM

Polyfillの他に、 babel-plugin-transform-runtime を使います。プラグインは次のように記述されています。

グローバルを汚染することなく、自動的にコードをポリフィルすることで、ヘルパーや組み込み関数への参照を外部化します。これは実際にはどういう意味ですか?基本的には、Promise、Set、Symbolなどのビルトインを使用することができます。また、グローバルな汚染なしに、ポリフィルをシームレスに必要とするすべてのBabel機能を使用することができます。

また、ES 6の他の組み込み機能とともにasync/awaitのサポートも含まれています。 

$ npm install --save-dev babel-plugin-transform-runtime

.babelrcにランタイムプラグインを追加します。

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}
259
johnny

更新

ターゲットをChromeに設定した場合は機能します。しかし、それは他のターゲットでは動作しないかもしれません、参照してください: https://github.com/babel/babel-preset-env/issues/112

したがって、この答えはNOTで、元の質問にはかなり適しています。ここではbabel-preset-envへの参照として保管します。

簡単な解決策は、コードの先頭にimport 'babel-polyfill'を追加することです。

あなたがwebpackを使っている場合、簡単な解決策は以下のようにbabel-polyfillを追加することです:

entry: {
    index: ['babel-polyfill', './index.js']
}

最新のベストプラクティスを見つけたと思います。

このプロジェクトをチェックしてください: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

あなたのbabel設定として以下を使用してください。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

それからあなたのアプリはChromeブラウザの最後の2つのバージョンに入るのが良いはずです。

ターゲットとしてNodeを設定したり、 https://github.com/ai/browserslist に従ってブラウザリストを微調整することもできます。

何を教えてください、どうやって教えてください。

私は本当にbabel-preset-envの哲学が好きです:どの環境をサポートしたいかを教えてください、それらをどのようにサポートするかを教えてはいけません。宣言型プログラミングの美しさです。

私はasyncawaitをテストしましたが、それらは動作します。それらがどのように機能するのか私は知りませんし、私は本当に知りたくありません。代わりに自分のコードとビジネスロジックに時間をかけたいです。 babel-preset-envのおかげで、それは私をBabel設定地獄から解放しました。

88
Tyler Long

あるいは、babel-polyfillが提供するすべてのモジュールを必要としないのであれば、webpackの設定でbabel-regenerator-runtimeを指定するだけです。

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

HMRと一緒にwebpack-dev-serverを使うとき、これをすることで、毎回のビルドでコンパイルしなければならないファイルの数をかなり減らすことができました。このモジュールはbabel-polyfillの一部としてインストールされていますので、すでに問題ない場合は、npm i -D babel-regenerator-runtimeと別にインストールすることができます。

43
Antony Mativos

私の簡単な解決策:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}
36
E. Fortes

Babel 7ユーザー

ほとんどの情報は以前のバージョンのBabelに関するものだったので、私はこの問題を回避するのに多少の困難を感じました。 Babel 7の場合、これら2つの依存関係をインストールします。

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

そして、.babelrcに以下を追加してください。

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}
34
Matt Shirley

babel-regenerator-runtimeは現在 非推奨 です、代わりにregenerator-runtimeを使用するべきです。

webpackおよびbabel v7でランタイムジェネレータを使用するには、次の手順を実行します。

regenerator-runtimeをインストールしてください: 

npm i -D regenerator-runtime

そしてwebpack設定の中に追加します。 

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]
12
jony89

持ち上げられた機能に注意してください

私は同じファイルに 'polyfill import'と 'async function'の両方を持っていましたが、私はReferenceError: regeneratorRuntime is not definedエラーを起こすだろうpolyfillの上にそれを持ち上げる関数構文を使っていました。

このコードを変更

import "babel-polyfill"
async function myFunc(){ }

これに

import "babel-polyfill"
var myFunc = async function(){}

それがpolyfill輸入の上に上がるのを防ぐために。

11
Ally

babel-preset-stage-2を使用する場合は、スクリプトを--require babel-polyfillで開始するだけです。

私の場合、このエラーはMochaテストによって投げられました。

以下は問題を修正しました

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

9
Zubair Alam

自分のプロジェクトをTypeScriptプロジェクトに変換した後、このエラーが発生し始めました。私が理解していることから、問題はasync/awaitが認識されていないことに由来します。

私にとっては、エラーは私の設定に2つのことを追加することによって修正されました:

  1. 何度も上で述べたように、私は私のwebpackエントリー配列にbabel-polyfillを追加する必要がありました:

    ... 
     
     entry:['babel-polyfill'、 './index.js']、
     
     ...
  2. Async/awaitをジェネレータにコンパイルできるようにするために、.babelrcを更新する必要がありました。

    {[.____。 ""プリセット ":[" es2015 "]、
    "プラグイン ":["トランスフォーム非同期へのジェネレータ "] 
    }

DevDependencies:

私のpackage.jsonファイルのdevDependenciesにもいくつかインストールする必要がありました。つまり、babel-plugin-transform-async-to-generator、babel-polyfill、およびbabel-preset-es2015がありません。

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

フルコードの要旨:

私はあなたが見つけることができる本当に便利で簡潔なGitHub要旨からコードを得ました ここ

9
Joshua Dyck

Babel 7.4.0、core-js 3

Babel 7.4.@babel/polyfillisdeprecated の時点で。

一般に、ポリフィル/リジェネレータをインストールする方法は2つあります。グローバルネームスペース経由(オプション1)またはポニーフィルとして(オプション2、グローバル汚染なし)です。

オプション1:@babel/preset-env

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3, // or 2,
    targets: {
        firefox: "64", // or whatever target to choose .    
    },
  }]
]

target に従ってregenerator-runtimeおよびcore-jsを自動的に使用します。手動で何かをインポートする必要はありません。ランタイム依存関係をインストールすることを忘れないでください:

npm i --save regenerator-runtime core-js

または、useBuiltIns: "entry"を設定し、手動でインポートします。

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

オプション2:@babel/transform-runtime with @babel/runtime(グローバルスコープ汚染なし)

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        corejs: 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

インストールしてください:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Core-jsポリフィルを使用する場合は、代わりに@babel/runtime-corejs2または@babel/runtime-corejs3をインストールします。 here を参照してください。

乾杯

コンマの欠落を修正、最小編集は6文字です

7
ford04

Async/awaitはES2015ではなくES2016の機能であるジェネレータを使用するため、エラーが発生します。これを修正する1つの方法は、ES2016用のbabelプリセット(npm install --save babel-preset-es2016)をインストールし、ES2015ではなくES2016にコンパイルすることです。

"presets": [
  "es2016",
  // etc...
]

他の回答が述べているように、 polyfills を使うこともできます(ただし、 他のコードを実行する前に必ず最初に をロードしてください)。あるいは、すべてのpolyfill依存関係を含めたくない場合は、 babel-regenerator-runtime または babel-plugin-transform-runtime を使用できます。

7
Galen Long

以下の例に従って.babelrcファイルを更新してください。

@babel/preset-envパッケージを使用している場合

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
7
Zero

新しい回答なぜあなたは私の答えに従うのですか?

回答: 最新のアップデートバージョンnpmプロジェクトで回答します。 

2017/04/14

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

Npmの他のすべてのこのバージョンまたはそれ以上のUPバージョンを使用する場合... SOを変更する必要があります。 

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

変更後webpack.config.jsファイルあなたのコードの先頭にこの行を追加するだけです。

import "babel-polyfill";

それでは、すべてが問題ないことを確認してください。 リファレンスリンク

@BrunoLMさん、素敵な回答をありがとう。

6
MD Ashik

サポートする必要のあるターゲットブラウザは既にasync/awaitをサポートしていますが、mochaテストを作成するときに、適切な設定をせずにこのエラーが発生しました。

私がグーグルで検索した記事のほとんどは、ここで受け入れられた回答や高得点の回答を含めて古くなっています。つまり、polyfillbabel-regenerator-runtimebabel-plugin-transform-runtimeは必要ありません。などターゲットブラウザが既にasync/awaitをサポートしている場合(もちろんポリフィルが必要でない場合)

webpackも使用したくありません。

Tyler Longの答えは、babel-preset-envを提案したため、実際には正しい軌道に乗っています(ただし、冒頭でpolifillに言及したため、最初にそれを省略しました)。最初はまだReferenceError: regeneratorRuntime is not definedを取得していましたが、ターゲットを設定しなかったためだとわかりました。ノードのターゲットを設定した後、regeneratorRuntimeエラーを修正します。

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }
6
Qiulang

Babel-polyfillをインストールしてこのエラーを修正しました

npm install babel-polyfill --save

それから私は私のアプリのエントリポイントにそれをインポートしました

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

テストスクリプトにテストのために含まれている - babab-polyfillが必要

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"
6
Ayobami

Babel7ユーザーおよびParcelJS> = 1.10.0ユーザー

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

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

から取られる https://github.com/parcel-bundler/parcel/issues/1762

5
Petros Kyriakou

私はChromeでこの問題を抱えていました。 RienNeVaPlu͢の答えと同様に、これで解決しました。

npm install --save-dev regenerator-runtime

それから私のコードで:

import 'regenerator-runtime/runtime';

babel-polyfillからの余分な200 kBを避けて幸せです。

4
Tom Söderlund

1 - babel-plugin-transform-async-to-module-methodをインストールします。

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - js babel polyfillを追加します。

import 'babel-polyfill';

3 - あなたの.babelrcにプラグインを追加します。

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

ソース: http://babeljs.io/docs/plugins/transform-async-to-module-method/

4
Luisangonzalez

babel-polyfillバージョン7を使いたい人のためにwebpack ver3でこれを行ってください。

Npmはモジュールnpm i -D @babel/polyfillをインストールします

それから、あなたのwebpackファイルのあなたのentryポイントにこれを行います。

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
2
Adeel Imran

ES6ジェネレータを使用しようとしたときに、ロールアップでgulpを使用すると、このエラーが発生します。

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

私は、解決策として、babel-polyfillをbowerコンポーネントとして含めることを考えました。

bower install babel-polyfill --save

それをindex.htmlに依存関係として追加します。

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
2
csharpfolk

セットアップしました
webpack using presets: ['es2015', 'stage-0']
mocha はwebpackによってコンパイルされたテストを実行していました。

テストでasync/awaitを動作させるために必要なことはmocha --require babel-polyfillオプションを追加することだけです。

2
lakesare

私の作業babel 7再生器ランタイムと反応するためのボイラープレート:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....
1
gazdagergo

これらの回答のほとんどは、WebPackを使用してこのエラーに対処するための解決策をお勧めします。しかし、RollUpを使っている人がいる場合(私のように)、ついに私のためにうまくいったことがあります(このpolyfill広告を出力サイズの合計約10kにまとめるのです)。

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};
1
Maurice

フロントエンドにGulp + Babelを使用している場合は、babel-polyfillを使用する必要があります。

npm install babel-polyfill 

次に、他のすべてのスクリプトタグの上にindex.htmlのスクリプトタグを追加し、node_modulesのbabel-polyfillを参照します。

1
Petros Kyriakou

reactアプリで'async' and 'await' _を使用したとき、[ジェネレータ]のランタイムが定義されていないエラーES7 を使用する必要がありますbabel-preset-es2017 このdevDependenciesをインストールしてください:

`

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

そしてこれを使う 

"presets": [ "es2017" , "stage-0" , "react" ]

0
Anas Alpure

このソリューションは古くなっています。

このビデオのYouTubeコメントで解決策を見つけました https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-Oy​​OzsKIIrB4AaABAg

これにより、正しいコメントが示されるはずです。解決策を見つけるための「beth w」の多くの小道具。

Beth W 3か月前(編集済み)
2019年に私がしなければならなかった別の変更-babelは明らかにv7の段階0プリセットを使用しないため、26:15に 'npm install --save-dev babel-polyfill babel-preset- stage-0 '、私はしなければなりませんでした:

npm install --save @babel/polyfill

古いオプションの両方をカバーしています。次に、アプリのエントリポイントに「@ babel/polyfill」を含め、クエリプリセットにそのまま残しました。そのため、webpackの構成は次のようになります。

const path = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill', './src/app.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

それが誰かを助けることを願っています!

0
Hgehlhausen

Mocha + Babelを実行しようとしたときに、この問題に遭遇しました。私は.babelrcを開発中で働いていました(ここで他の答えを見てください、それらはかなり完成しています)、しかし私のnpm run testコマンドはまだregeneratorRuntime is not definedについて不平を言っていました。それで私は私のpackage.jsonを修正しました:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

続きを読む: https://babeljs.io/en/setup/#mocha-4

0
helsont

私は非同期でwebpack/babel buildを操作するのを待ちます

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

.babelrc:

"presets": ["es2015", "stage-3"]
0
msmfsd

あなたがアプリを構築しているなら、あなたは@babel/preset-env@babel/polyfillが必要です。

npm i -D @babel/preset-env
npm i @babel/polyfill

(注:core-jsおよびregenerator-runtimeパッケージは、両方とも@ babel/polyfillによってインストールされるため、インストールする必要はありません。)

それから.babelrcで:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

ターゲット環境を設定しましょう。ここでは、それを.browserslistrcファイルで行います。

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

最後に、useBuiltIns: "entry"を使った場合は、エントリファイルの先頭にimport @babel/polyfillを付けます。そうでなければ、あなたは完了です。

この方法を使用すると、それらのpolyfillと 'regenerator-runtime'ファイルが選択的にインポートされます(ここであなたのregeneratorRuntime is not defined問題を修正します) _ only _ それらがあなたのターゲット環境/ブラウザで必要な場合。

0
kyw

ReactおよびDjangoプロジェクトを使用しており、regenerator-runtimeを使用して動作するようになりました。 @babel/polyfillはアプリのサイズをさらに大きくし、 非推奨 であるため、これを行う必要があります。 このチュートリアルの エピソード1と2に従って、プロジェクトの 構造 を作成しました。

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

{
   "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": ["transform-class-properties"]
}

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...
0
Aaron Miller

カスタムのbabelHelpers.jsファイルがbabel-plugin-external-helpsersと共にbabel.buildExternalHelpers()を使用して作成されるシナリオでは、私はすべてのpolyfillの代わりにregenerator-runtime/runtime.jsを出力に付加することがクライアントにとって最もコストのかからない解決策であると考えました。

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    './babelHelpers.js',
    fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
    + '\n'
    + require('babel-core').buildExternalHelpers()
)

babel-polyfillを含めると、このソリューションは約230 KBではなく約20 KBになります。

0
RienNeVaPlu͢s