web-dev-qa-db-ja.com

Babel-transform-async-to-generatorプラグインを使用する場合、regeneratorRuntimeが定義されていません

Async/awaitを使用するためにbabelを正しくセットアップできません。

Babel 7とwebpack 4を使用しています。

可能であればbabel-polyfillを使用したくない！

私のbabelrcファイル：

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-async-to-generator"
    ]
}

コード：

async function init() {
  const loaderData = await initLoader();
  initCmp(loaderData)
    .then(initApi(loaderData.key))
    .catch();
}
init();

そしてエラー：

refactor.main.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (refactor.main.js:18)
    at eval (refactor.main.js:47)
    at Object../client/refactor.main.js (cmp.bundle.js:312)
    at __webpack_require__ (cmp.bundle.js:62)
    at eval (main.js:6)
    at Object../client/main.js (cmp.bundle.js:300)
    at __webpack_require__ (cmp.bundle.js:62)
    at cmp.bundle.js:179
    at cmp.bundle.js:182
javascriptwebpackasync-awaitbabeljsbabel
8
dendog

ここの最新のドキュメントは非常に明確です： https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

私のために働いたのは、ビルド用とランタイム用の2つのパッケージをインストールすることです（ブラウザの最終スクリプト）：

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

npm install --save @babel/runtime

Webpack設定のプラグイン配列に、オプションなしで「@ babel/plugin-transform-runtime」を追加しました。 （一部のオプション（古いチュートリアルや回答で見つかる可能性がある）は削除されているため、上記のリンクされたドキュメントもご覧ください。）

plugins: [
'@babel/plugin-transform-runtime'
]

エラーなしで非同期関数を使用できるようになりましたが、実稼働ビルドに多くのコードを追加しませんでした。

26
makkabi

transform-runtimeプラグインも必要なので、.babelrcの準備ができているはずです。

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-runtime",
      "transform-async-to-generator"
    ]
}

npm install --save-dev transform-runtimeも必要になることに注意してください

2
goofballLogic