web-dev-qa-db-ja.com

エラーをスローするwebpack-simple構成でasync / awaitを使用：RegeneratorRuntime not defined

次の構成でwebpack-simpleテンプレートを使用しています。

package.json

{
  "name": "vue-wp-simple",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "v",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.7.0",

  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

。babelrc

{
  "presets": [
    ["env", { "modules": false }],
  ]
}

以下は、コンポーネントでasync/awaitを使用する方法です

async mounted(){
            //this.$store.dispatch('loadImg', this.details.imgUrl).then((img) => {
                //this.drawImage(img);    
            //});

            var result = await this.loadImg();
            console.log(result);
        },
        methods:{
            async loadImg(){
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('yeah async await works!');
                    }, 2000);
                });
            }, 
         }

しかし、アプリを実行するとエラーが発生します：ReferenceError：regeneratorRuntime is not definedそしてコンポーネントさえ表示されていません

webpackvue.jsasync-awaitvuejs2babeljs
18
boomerboy

await/asyncを使用するには、いくつかのBabel依存関係をインストールする必要があります。これはVuejsプロジェクトで動作します-

npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator

インストールしたら、次のようにプラグインを使用するように。babelrcファイルを変更する必要があります-

{
    "plugins": ["transform-regenerator"]
}

また、次のようにリジェネレータを使用するwebpack.config.jsファイル-

require("babel-polyfill");

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

プロジェクトの構造やファイル名などに応じて必要な変更を加えます

22
Sohail

Async＆awaitを使用するには、2つのプラグインをbabel configに追加する必要があります： https://babeljs.io/docs/plugins/transform-async-to-generator/ および https： //babeljs.io/docs/plugins/syntax-async-functions/

4
Anh Nguyen

Sohailのソリューションは機能します。私はエラーをスローすることになった非同期関数を持っていました...

確かに、vue-cliを使用してプロジェクトをビルドしました。そのため、コンパイル時にwebpack.configにコンテンツを挿入するvue.config.jsがあります。

（それに関する情報は here で見つけることができます）

したがって、vue.config.jsには次のものがあります：

module.exports = {
configureWebpack: {
    entry: ['@babel/polyfill', './src/main.ts'],
    plugins: [
    ]
},
chainWebpack: config => {
    config.resolve.alias.set('@image', path.resolve(__dirname, 'public/img'));
    config.resolve.alias.set('@dev', path.resolve(__dirname, 'dev-server'));
},

}

次に、babel.config.jsにこれがあります：

module.exports = {
 presets: [
   '@babel/env',
 ],
 plugins: [
  "transform-regenerator"
 ],
}

これがお役に立てば幸いです！

0
AdamJSim