Javascript Babel和Webpack正在投掷；Can'；t解决'；再生器运行时/运行时'&引用；

我正在做一个基于浏览器的项目，需要兼容IE11（叹气）。网页包被

async/await

阻塞。以下是我的控制台的输出：

Based on your code and targets, added regenerator-runtime.
...
Module not found: Error: Can't resolve 'regenerator-runtime/runtime'

我看了很多类似我的问题，但运气不好。很多人建议使用

@babel/polyfill

，我一直在避免使用，因为它已经被弃用了

是什么导致了这个问题？我希望可以通过手动导入

再生器运行时/运行时

来修复此问题，但是

babel env

的主要卖点之一似乎是不必手动导入polyfills，因此我假设我错过了一个步骤。谢谢大家!

以下是我正在尝试运行的，正在导入到另一个文件中：

class Fetcher {
    constructor() {
        this.form = document.querySelector('form');
        this.form.addEventListener('submit', this.onSubmit.bind(this));
    }

    async onSubmit(event) {
        event.preventDefault();

        const apiResponse = await fetch(`${WP_url}/api`);
        const apiJson = await apiResponse.json();
        console.log(apiJson);
    }
}
export default Fetcher;

webpack.config.js：

const path = require('path');

function pathTo(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = function(env, argv) {
    const isProd = Boolean(argv.mode === 'production');

    const config = {
        entry: {
            index: [
                pathTo('index.js'),
            ],
        },
        externals: {
            jquery: 'jQuery',
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    corejs: 3,
                                    debug: true,
                                    targets: {
                                        browsers: [
                                            'IE 11',
                                        ],
                                    },
                                    useBuiltIns: 'usage',
                                },
                            ],
                        ],
                    },
                },
            ],
        },
        optimization: {
            minimize: isProd,
        },
        output: {
            filename: '[name].js',
            path: pathTo('web'),
        },
    };

    return config;
};

package.json

{
  "private": true,
  "dependencies": {
    "core-js": "^3.4.1",
    "focus-within-polyfill": "^5.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "eslint": "^6.6.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "dev": "webpack --mode=development --display-modules",
    "dev:watch": "npm run dev -- --watch",
    "prod": "webpack --mode=production --display-modules",
    "prod:watch": "npm run prod -- --watch"
  }
}

---

只需在文件中添加导入“再生器运行时/运行时”，其中包含async/await。

只需运行

npm i再生器运行时

即可修复它

对于

useBuiltIns:“用法”

，我想没有必要使用所有

import

语句

“”\_(ツ)_/“

跟随官方：

安装所需的软件包

将插件添加到配置文件中

---

这是官方推荐的方法，在前面提到的中有更多可用。

正如我在帖子中所说的，我希望可以通过手动导入再生器运行时/运行时来修复它，但巴贝尔环境的主要卖点之一似乎是不必手动导入多边形填充，所以我认为我错过了一个步骤。是的，我在面对这个问题。原来是因为其他一些软件包需要它，而我只能通过手动添加导入来解决它（即使在我不使用这些软件包的情况下，它工作正常）。手动导入时是否会抛出错误？实际上，只需执行

npm i Recytator runtime

即可修复。使用

useBuiltIns:“用法”

拥有所有

import

语句，我想这是不必要的。

'\_(ツ)_/“

很好！我也会尝试这样做，以减少跟踪非正式

导入的需要。

@RobertAKARobin您能单独回答吗？它刚刚为我解决了一个类似的问题，我想不是每个人都会扫描所有注释以寻找可能的替代解决方案。

@babel/plugin transform runtime

和

@babel/runtime

与OP讨论的包不同。

再生器/运行时

是

@babel/polyfill

导入的两个包之一，可以在此处找到文档：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

{
  "plugins": ["@babel/plugin-transform-runtime"]
}