webpack-simple 설정 전송 오류와 함께 비동기/대기 사용: RegeneratorRuntime이 정의되지 않음

webpack-simple 설정 전송 오류와 함께 비동기/대기 사용: RegeneratorRuntime이 정의되지 않음

다음과 같은 구성의 webpack-simple 템플릿을 사용하고 있습니다.

패키지.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 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이 정의되지 않고 컴포넌트조차 표시되지 않습니다.

wait/async를 사용하려면 몇 가지 Babel 종속성을 설치해야 합니다.이것은 Vuejs 프로젝트와 함께 동작합니다.

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

설치 후 플러그인을 사용하려면 .babelrc 파일을 다음과 같이 수정해야 합니다.

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

webpack.config.config.config 파일을 사용하여 다음과 같이 재생성기를 사용할 수도 있습니다.

require("babel-polyfill");

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

프로젝트 구조 및 파일 이름 등에 따라 필요한 변경을 합니다.

비동기 및 대기 기능을 사용하려면 babel 설정에 https://babeljs.io/docs/plugins/transform-async-to-generator/ 및 https://babeljs.io/docs/plugins/syntax-async-functions/의 2개의 플러그인을 추가해야 합니다.

비동기 기능은 다음과 같이 동작합니다.

1) VUE CLI 또는 단말기를 사용하여 다음과 같은 Dev 종속성을 설치합니다.

Vue CLI에서

예를 들어 보겠습니다.

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

2) main.js 파일(또는 vue 오브젝트(새로운 Vue)를 작성하는 파일)에 다음 Import를 추가했습니다.

import '@babel/polyfill'

Sohail의 해결책은 효과가 있다.비동기 기능이 있어서 결국 에러가...

확실히 vue-cli를 사용하여 프로젝트를 구축했습니다.따라서 vue.config.js를 가지고 있으며 컴파일 시 webpack.config에 콘텐츠를 주입합니다.

(그에 대한 정보는 이쪽에서 확인하실 수 있습니다.

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

같은 유형의 오류에 직면하여 다음과 같은 방법으로 해결했습니다.

순서 1: 이 명령어를 실행합니다.

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

냐냐는저 because because async/await되지 코드로 되지 않은 내 JavaScript 없이polyfill플러그 인.

2: 「」2: 「」의 webpack.config.js

require('babel-polyfill');
        
module.exports = {
   entry: ['babel-polyfill', './src/main.js'],
   ...
}

3: 「」3: 「」의 갱신.babelrc 코드로 을 작성하다"plugins": ["transform-regenerator"]와 같이

{
      "presets": [
        ["env", { "modules": false }],
        "stage-3"
      ],
      "plugins": ["transform-regenerator"]
}

언급URL : https://stackoverflow.com/questions/46389267/using-async-await-with-webpack-simple-configuration-throwing-error-regeneratorr