2017-09-24 102 views
6

używam szablonu WebPACK-proste z następujących konfiguracjach:użyciu asynchronicznie/czekają z WebPACK-prostej konfiguracji rzucanie błędzie: RegeneratorRuntime niezdefiniowane

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 }], 
    ] 
} 

poniżej opisuję sposób korzystania z asynchronizacji/czekania w moim komponencie

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); 
       }); 
      }, 
     } 

Ale gdy uruchamiam aplikację pojawia się błąd: ReferenceError: regeneratorRuntime nie jest zdefiniowana a nawet element nie jest wyświetlany

+0

Możliwy duplikat [Babel 6 regeneratorRuntime nie jest zdefiniowany] (https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not- zdefiniowane) –

+0

Oprócz dostarczonych rozwiązań, możesz użyć opcji ['useBuiltIns'' babel-preset-env'] (https://github.com/babel/babel-preset-env#usebuiltins). –

Odpowiedz

5

aby korzystać Oczekujcie/asynchroniczny trzeba będzie Insta Będę miał kilka zależności od Babel. Działa to z projektu Vuejs -

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

Raz zainstalowany, trzeba będzie zmodyfikować plik .babelrc użyć wtyczki następująco -

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

a także swoje webpack.config.js plik użycie regeneratora następująco -

require("babel-polyfill"); 

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

Dokonaj t konieczne zmiany zgodnie z twoją strukturą projektu i nazwą pliku itp.