[解決済み] Babel 6 regeneratorRuntimeが定義されていません。
2022-03-21 05:19:41
質問
Babel 6でゼロからasync/awaitを使おうとしているのですが、以下のような問題が発生します。
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
パッケージ.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" ]
}
async/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");
を使用している場合
ウェブパック
の最初の値として配置する必要があります。
entry
の配列は、webpackの設定ファイル(通常は
webpack.config.js
) を、@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
関連
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
JavaScriptのStringに関する共通メソッド
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで変数が存在するか(定義されているか/初期化されているか)をチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
JavaScriptの配列共通メソッド解説
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueでルートネスティングを実装する例
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ