当前位置: 首页 > 知识库问答 >
问题:

在WebPack中使用Async/Await-简单的配置引发错误:未定义RegeneratorRuntime

尉迟浩思
2023-03-14
{
  "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"
  }
} 
{
  "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没有定义,甚至组件也没有显示

共有1个答案

宰父保臣
2023-03-14

为了使用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"]
};
 类似资料:
  • 它会返回我想要的结果。我还从https://stackoverflow.com/a/25899982/9367841尝试了这个 但不管用。

  • 我试着学习节点。js(ES6)但在 这是我的结构: BaseModel.js 会计模型。js 主要的js 现在我运行: 和获取错误: ReferenceError:对象上未定义BaseModel。(/Users/tamirscherzer/POC/projects/NodeJS/tutorials/classes/AccountModel.js:5:28)在模块中_在对象处编译(module.js

  • 问题内容: 在我的node.js应用程序中,我做了一个操作,以便可以使用客户端javascript中固有的btoa()和atob()函数,但由于某种原因未包含在node中。新目录显示在我的node_modules文件夹中,该文件夹本身与app.js一起位于根目录中。然后,确保将btoa- atob作为依赖项添加到根目录下的package.json文件中。 但是,由于某种原因,它仍然无法正常工作。

  • 我有一个安装了ReactJS的NetCore2应用程序。 null VS代码抛出一个错误,告诉我异步只适用于。ts文件。另外,如果我在任何其他函数中使用await,我将得到一个错误,比如。 据我所知,async/await不仅仅是TS...(或者我错了?)。 谢了!

  • 我有一个奇怪的错误,我正在尝试写数据到hive,它在spark-shell中运行良好,但是当我使用spark-submit时,它抛出的数据库/表在默认错误中找不到。 下面是我试图在spark-submit中编写的代码,我使用的是Spark2.0.0的自定义构建 16/05/20 09:05:18 INFO sparksqlParser:解析命令:spark_schema.measures_2016

  • 我想从服务器加载配置,但当我使用 XMLHttpRequest我遇到异常 ava.lang.运行时异常:karate-config.js的评估失败com.intuit.karate.ScenarioContext)场景Context.java:211)在com.intuit.karate.步骤。StepActions.java:50)在com.intuit.karate.core.FeatureE