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なしで通常それを使うことはちょうどうまくいきます。私が悪いことをしているという考えはありますか？
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
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
}]
]
}
更新
ターゲットを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設定地獄から解放しました。
あるいは、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と別にインストールすることができます。
私の簡単な解決策：
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ユーザー
ほとんどの情報は以前のバージョンの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"]
]
}
babel-regenerator-runtimeは現在 非推奨 です、代わりにregenerator-runtimeを使用するべきです。
webpackおよびbabel v7でランタイムジェネレータを使用するには、次の手順を実行します。
regenerator-runtimeをインストールしてください：
npm i -D regenerator-runtime
そしてwebpack設定の中に追加します。
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
持ち上げられた機能に注意してください
私は同じファイルに 'polyfill import'と 'async function'の両方を持っていましたが、私はReferenceError: regeneratorRuntime is not definedエラーを起こすだろうpolyfillの上にそれを持ち上げる関数構文を使っていました。
このコードを変更
import "babel-polyfill"
async function myFunc(){ }
これに
import "babel-polyfill"
var myFunc = async function(){}
それがpolyfill輸入の上に上がるのを防ぐために。
babel-preset-stage-2を使用する場合は、スクリプトを--require babel-polyfillで開始するだけです。
私の場合、このエラーはMochaテストによって投げられました。
以下は問題を修正しました
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
自分のプロジェクトをTypeScriptプロジェクトに変換した後、このエラーが発生し始めました。私が理解していることから、問題はasync/awaitが認識されていないことに由来します。
私にとっては、エラーは私の設定に2つのことを追加することによって修正されました：
何度も上で述べたように、私は私のwebpackエントリー配列にbabel-polyfillを追加する必要がありました：
... entry：['babel-polyfill'、 './index.js']、 ...
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要旨からコードを得ました ここ 。
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文字です
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 を使用できます。
以下の例に従って.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"
}
}
]
]
}
新しい回答なぜあなたは私の答えに従うのですか？
回答： 最新のアップデートバージョン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さん、素敵な回答をありがとう。
サポートする必要のあるターゲットブラウザは既にasync/awaitをサポートしていますが、mochaテストを作成するときに、適切な設定をせずにこのエラーが発生しました。
私がグーグルで検索した記事のほとんどは、ここで受け入れられた回答や高得点の回答を含めて古くなっています。つまり、polyfill、babel-regenerator-runtime、babel-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
}]
]
}
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"
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
}]
]
}
私はChromeでこの問題を抱えていました。 RienNeVaPlu͢の答えと同様に、これで解決しました。
npm install --save-dev regenerator-runtime
それから私のコードで：
import 'regenerator-runtime/runtime';
babel-polyfillからの余分な200 kBを避けて幸せです。
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/ /
babel-polyfillバージョン7を使いたい人のためにwebpack ver3でこれを行ってください。
Npmはモジュールnpm i -D @babel/polyfillをインストールします
それから、あなたのwebpackファイルのあなたのentryポイントにこれを行います。
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
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>
セットアップしました
webpack using presets: ['es2015', 'stage-0']
と mocha はwebpackによってコンパイルされたテストを実行していました。
テストでasync/awaitを動作させるために必要なことはmocha --require babel-polyfillオプションを追加することだけです。
私の作業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";
....
これらの回答のほとんどは、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()
]
};
フロントエンドにGulp + Babelを使用している場合は、babel-polyfillを使用する必要があります。
npm install babel-polyfill
次に、他のすべてのスクリプトタグの上にindex.htmlのスクリプトタグを追加し、node_modulesのbabel-polyfillを参照します。
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" ]
このソリューションは古くなっています。
このビデオのYouTubeコメントで解決策を見つけました https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg
これにより、正しいコメントが示されるはずです。解決策を見つけるための「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']
}
}]
}
}
それが誰かを助けることを願っています！
Mocha + Babelを実行しようとしたときに、この問題に遭遇しました。私は.babelrcを開発中で働いていました（ここで他の答えを見てください、それらはかなり完成しています）、しかし私のnpm run testコマンドはまだregeneratorRuntime is not definedについて不平を言っていました。それで私は私のpackage.jsonを修正しました：
"scripts": {
"test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}
私は非同期でwebpack/babel buildを操作するのを待ちます
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc：
"presets": ["es2015", "stage-3"]
あなたがアプリを構築しているなら、あなたは@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 _ それらがあなたのターゲット環境/ブラウザで必要な場合。
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'));
...
カスタムの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になります。