regeneratorRuntime 未定义 Gulp + Webpack + Babel

Question

我正在尝试将 ES7 'async-await functions' 与 bable 7 + webpack + gulp 一起使用，但我收到此错误：regeneratorRuntime is not defined

我找到了几个解决方案，但 none 其中有效：我尝试使用 core-js 和 @babel/plugin-transform-runtime 甚至 babel-polyfill，根据 babel 文档已弃用但无法解决这个问题错误。

这是我最新的配置文件：

package.json

        "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "browser-sync": "^2.26.7",
    "core-js": "^3.6.5",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.1",
    "gulp-postcss": "^8.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^1.0.2",
    "postcss-import": "^12.0.1",
    "postcss-mixins": "^6.2.2",
    "postcss-nested": "^4.1.2",
    "postcss-simple-vars": "^5.0.2",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "normalize.css": "^8.0.1",
    "slick-carousel": "^1.8.1"
  }

webpack.config.js

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env',
            {
              "useBuiltIns": "usage"
            }],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  },
  mode: 'development'
}

JavaScript代码：

class Search {
    constructor() {
        this.openButton = document.querySelector("#open-button");
        this.closeButton = document.querySelector("#search-overlay-close");
        this.searchOverlay = document.querySelector("#search-overlay");
        this.searchField = document.querySelector("#search-term");
        this.resultsDiv = document.querySelector("#search-overlay__results");
    }

[...] 


    getResults() {
        async function searchResults() {
            try {            
                let postsResponse = await fetch(`http://localhost:3000/wp-json/v2/posts?search=${this.searchField.value}`);
                let posts = await postsResponse.json();
                console.log(posts);                                
            }
            catch (err) {
                this.resultsDiv.innerHTML = "Oops! an error occurred, please, try again later";
                console.log(err);
            }            
        }

        searchResults();


        this.resultsDiv.innerHTML = "Search results will go here";
    }
}

export default Search;

Answer 1

所以，经过2天的搜索和测试，我终于解决了这个问题： 1. Clean webpack 与推荐配置完美兼容：

package.json

{
  "name": "babel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --color"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ["@babel/plugin-transform-runtime", { "regenerator": true }
                            ]
                        ]
                    }
                }
            }
        ]
    }
}

我把所有webpack和babel相关包都更新到最新的稳定版了
我的 gulp 文件有问题。所以我通过 webpack-stream 改变了 webpack 的用法。之前：

   const webpack = require('webpack');
    gulp.task('scripts', function (callback) {
      webpack(require('./webpack.config.js'), function (err, stats) {
        if (err) {
          console.log(err.toString());
        }    
        console.log(stats.toString());
        callback();
      });
    });

之后：

 const webpack = require('webpack-stream');
 gulp.task('scripts', function() {
   return gulp.src(settings.themeLocation + "js/scripts.js")
     .pipe(webpack( require('./webpack.config.js') ))
     .pipe(gulp.dest(settings.themeLocation + "js"));
 });

regeneratorRuntime 未定义 Gulp + Webpack + Babel

regeneratorRuntime is not defined Gulp + Webpack + Babel

webpack

babeljs

ecmascript-2016