私は非同期を使用しようとしていますが、Babel 6でゼロから待機していますが、regeneratorRuntimeが定義されていません。

.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を使用せずに通常どおり使用しても問題ありません。私が間違っていることはありますか？

babel-polyfill（Babel 7.4で非推奨）が必要です。async / awaitが機能するようにするには、それもインストールする必要があります。

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" ]
}

.jsとasync / await（サンプルコード）

"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を使用している場合entryは、@ webpack.config.jsCemenコメントに従って、それをwebpack構成ファイル（通常は）の配列の最初の値として配置する必要があります。

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

ポリフィルの他に、babel-plugin-transform-runtimeを使用します。プラグインは次のように記述されます：

ヘルパーとビルトインへの参照を外部化し、グローバルを汚染することなくコードを自動的にポリフィルします。これは実際にはどういう意味ですか？基本的に、Promise、Set、Symbolなどのビルトインを使用するだけでなく、ポリフィルをシームレスに必要とするすべてのBabel機能を使用して、グローバルな汚染なしに、ライブラリに非常に適しています。

また、ES 6の他の組み込みに加えて、非同期/待機のサポートも含まれています。

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

で.babelrc、ランタイムプラグインを追加します

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

注 babel 7を使用している場合、パッケージの名前は@ babel / plugin-transform-runtimeに変更されています。

Babel 7のユーザー

ほとんどの情報は以前のバベルバージョンに関するものでしたので、これを回避するのにいくつかの問題がありました。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"]
    ]
}

更新

ターゲットをChromeに設定すると機能します。ただし、他のターゲットでは機能しない場合があります。以下を参照してください。ます。https //github.com/babel/babel-preset-env/issues/112ください。

したがって、この回答は元の質問にはあまり適切ではありません。参照としてここに保持します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

以下をバベル構成として使用します。

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

その後、アプリはChromeブラウザの最後の2つのバージョンで動作するはずです。

ノードをターゲットとして設定するか、ブラウザリストを次のように微調整することもできます。 https：//github.com/ai/browserslistます。

教えてください、方法は教えないでください。

私はbabel-preset-envの哲学が本当に好きです。サポートしたい環境を教えてください。サポートする方法は教えないでください。それは宣言型プログラミングの美しさです。

私はテストasync awaitしましたが、動作します。私はそれらがどのように機能するのか知りませんし、本当に知りたくありません。代わりに、自分のコードとビジネスロジックに時間を費やしたいと考えています。おかげでbabel-preset-env、バベル構成の地獄から解放されます。

または、babel-polyfill提供されるすべてのモジュールが必要ない場合babel-regenerator-runtimeは、webpack構成で指定するだけです。

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

  // ...
};

HMRでwebpack-dev-serverを使用する場合、これを行うと、ビルドごとにコンパイルする必要があるファイルの数が大幅に削減されます。このモジュールはの一部としてインストールされbabel-polyfillているので、すでに問題がない場合は、で個別にインストールできますnpm i -D babel-regenerator-runtime。

私の簡単な解決策：

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"
  ]
}

Babel 7.4.0以降（core-js 2/3）

とおりバベル7.4.0、@babel/polyfill される 非推奨。

一般に、ポリフィル/再生器をインストールする方法は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 .    
    },
  }]
]

自動的に使用されます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あり@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代わりにこちらを参照してください。

乾杯

babel-regenerator-runtimeは非推奨になりました。代わりにを使用してくださいregenerator-runtime。

webpackおよびbabelv7でランタイムジェネレーターを使用するには：

インストールregenerator-runtime：

npm i -D regenerator-runtime

次に、webpack構成内に追加します。

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

.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"
        }
      }
    ]
  ]
}

巻き上げ機能に注意

「ポリフィルのインポート」と「非同期関数」の両方を同じファイルに入れましたが、ポリフィルの上にそれを巻き上げる関数構文を使用していたため、ReferenceError: regeneratorRuntime is not definedエラーが発生しました。

このコードを変更

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

これに

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

ポリフィルのインポートより上に持ち上げられるのを防ぐため。

2019年10月の時点でこれは私のために働きました：

これをプリセットに追加します。

 "presets": [
      "@babel/preset-env"
    ]

次に、npmを使用してregenerator-runtimeをインストールします。

npm i regenerator-runtime

そして、あなたのメインファイルで：（このインポートは一度だけ使用されます）

import "regenerator-runtime/runtime";

これによりasync awaits、ファイルで使用して削除できますregenerator error

使用する場合babel-preset-stage-2は、でスクリプトを開始する必要があります--require babel-polyfill。

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

問題を修正した後

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

プロジェクトをtypescriptプロジェクトに変換した後、このエラーが発生し始めました。私が理解しているところによると、問題はasync / awaitが認識されないことが原因です。

私にとっては、セットアップに次の2つを追加することでエラーが修正されました。

1. 上で何度も触れたように、webpackエントリ配列にbabel-polyfillを追加する必要がありました。

   ...
   
   エントリ：['babel-polyfill'、 './index.js']、
   
   ...

2. ジェネレーターへの非同期/待機のコンパイルを許可するために.babelrcを更新する必要がありました：

   {
     "プリセット"：["es2015"]、
     "プラグイン"：["transform-async-to-generator"]
   }

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要旨からコードを入手しました。

Chromeでこの問題が発生しました。RienNeVaPlu͢sの答えと同様に、これは私のためにそれを解決しました：

npm install --save-dev regenerator-runtime

次に、私のコードで：

import 'regenerator-runtime/runtime';

からの余分な200 kBを避けてくださいbabel-polyfill。

このエラーはasync/await、適切なBabelプラグインなしで関数が使用された場合に発生します。2020年3月の時点で、次のことを行う必要があります。（@babel/polyfillそして承認されたソリューションの多くはBabelで非推奨になりました。Babelのドキュメントで詳細を読んでください。）

コマンドラインで、次のように入力します。

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

あなたにはbabel.config.js、ファイル、このプラグインを追加します@babel/plugin-transform-runtime。注：以下の例には、最近取り組んだ小さなReact / Node / Expressプロジェクト用に用意した他のプリセットとプラグインが含まれています。

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

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

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

他の回答が述べているように、ポリフィルを使用することもできます（ただし、他のコードを実行する前に、まずポリフィルをロードしてください）。あるいは、すべてのポリフィル依存関係を含めたくない場合は、babel-regenerator-runtimeまたはbabel-plugin-transform-runtimeを使用できます。

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';

テストに含めた-テストスクリプトにbabel-polyfillが必要

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

新しい回答なぜ私の回答をフォローするのですか？

回答：最新の更新バージョンnpmプロジェクトで回答をお届けするためです。

2017年4月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の素敵な回答にも感謝します。

私がサポートする必要のある対象のブラウザは、すでに非同期/待機をサポートしていますが、適切な設定を行わずにモカテストを作成すると、このエラーが発生します。

私はGoogleで記事のほとんどは、受け入れ答えと高を含め、古いされ、ここで答えを投票し、すなわち、あなたは必要ありませんpolyfill、babel-regenerator-runtime、babel-plugin-transform-runtime。など、あなたのターゲットブラウザ（複数可）は既に非同期/のawaitをサポートしていれば（もちろんそうでない場合は、あなたがポリフィルを必要とします）

webpackどちらも使いたくない。

タイラーロングの答えは、彼が提案して以来、実際には正しい方向にbabel-preset-env進んでいます（ただし、最初にポリフィルについて言及したので、最初は省略しました）。私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
      }]
    ]
  }

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から取得

1-babel-plugin-transform-async-to-module-method、babel-polyfil、bluebird、babel-preset-es2015、babel-coreをインストールします。

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

2-jsバベルポリフィルを追加します。

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/

私は、webpackを使用してセットアップ
を行いpresets: ['es2015', 'stage-0']
、mochaがwebpackでコンパイルされたテストを実行していました。

async/awaitテストを機能させるには、mocha --require babel-polyfillオプションを追加するだけです。

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 install babel-polyfill --save

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

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

babel-polyfillバージョン7の使用を検討している人のために、これを次のようにしてください。webpack ver3で。

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

次に、あなたのwebpackファイルのあなたのentryポイントでこれを行います

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

再生器ランタイムと反応するための私の作業中の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";

....

アプリを構築している場合は、@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は、エントリファイルの先頭にします。それ以外の場合は、完了です。

この方法を使用すると、ターゲット環境/ブラウザーで必要な場合にのみ、これらのポリフィルと「再生器ランタイム」ファイル（regeneratorRuntime is not definedここで問題を修正）が選択的にインポートされます。

今後の参考のために：

Babelバージョン7.0.0-beta.55以降、ステージプリセットは削除されました

ブログを参照してくださいhttps://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async awaitはまだ使用できます

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

インストール

npm install --save-dev @babel/plugin-transform-async-to-generator

.babelrcでの使用

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

バベルポリフィルを使用するhttps://babeljs.io/docs/en/babel-polyfill

インストール

npm install --save @babel/polyfill

webpack.config.js

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

2019ではBabel 7.4.0+、babel-polyfillパッケージが非推奨になり、core-js/stable（core-js@3+、ECMAScript機能をポリフィルするregenerator-runtime/runtimeために）および（トランスパイルされたジェネレーター関数を使用する必要がある）を直接含めるようになりました：

import "core-js/stable";
import "regenerator-runtime/runtime";

babel-polyfill ドキュメントからの情報。

コンソールでこの「regeneratorRuntime not defined issue」を修正する最も簡単な方法：

不要なプラグインをインストールする必要はありません。追加するだけです：

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

index.htmlの本文の内側。これで、babelを実行するとregeneratorRuntimeが定義され、非同期/待機関数がES2015に正常にコンパイルされるようになります。

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

npm install babel-polyfill

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