Babel 和 Webpack 正在抛出“无法解析 'regenerator-runtime/runtime'”

Question

我正在开发一个需要与 IE11 兼容的基于浏览器的项目（叹气）。 Webpack 在 async/await 上窒息。这是我的控制台的输出：

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

我看过 许多 类似于我的 SO 问题，但没有运气。许多人建议使用@babel/polyfill，因为它已被弃用，所以我避免使用它。

是什么导致了这个问题？我希望它可以通过手动导入regenerator-runtime/runtime 来修复，但似乎babel-env 的主要卖点之一是不必手动导入 polyfill，所以我假设我错过了一步。谢谢！

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

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

Answer 1

实际上，只需运行 npm i regenerator-runtime 即可修复它。

对于useBuiltIns: 'usage'，我猜没有必要拥有所有import 语句。

¯\_(ツ)_/¯

Answer 2

当我将 transpileDependencies: ['openplayerjs'], 添加到我的vue.config.js 时，我开始收到此错误，因为带有@vue/cli-plugin-babel/preset 的Babel 不会触及node_modules 中的依赖关系，请弄清楚原因。安装regenerator-runtime 没有帮助，我认为问题出在 Yarn 的 pnp 模块上：

This dependency was not found:

* regenerator-runtime/runtime.js in /Volumes/Backup/home/Documents/.yarn/unplugged/openplayerjs-npm-2.9.3-aa4692035d/node_modules/openplayerjs/dist/esm/media.js, /Volumes/Backup/home/Documents/.yarn/unplugged/openplayerjs-npm-2.9.3-aa4692035d/node_modules/openplayerjs/dist/esm/media/ads.js and 1 other

To install it, you can run: npm install --save regenerator-runtime/runtime.js

所以我尝试通过yarn unplug <module_name> 拔掉所有东西，还是不行。

最终将babel.config.js 中的useBuiltIns: 'usage' 更改为useBuiltIns: 'entry' 立即解决了这个问题。

Answer 3

只需在您拥有 async/await 的文件中添加 import 'regenerator-runtime/runtime'。

Answer 4

就我而言，your answer 还不够，我需要按照建议的here 将 babel sourceType 设置为 unambiguous 以允许正确编译项目。此选项是必需的，因为 @babel/runtime/regenerator/index.js 文件使用 module.exports = require("regenerator-runtime"); 导出其引用，这会破坏 ES6 编译。

另一个解决类似但不相关的编译问题的有用说明是使用 /node_modules\/(css-loader|@babel|core-js|promise-polyfill|webpack|html-webpack-plugin|whatwg-fetch)\// 作为 babel 规则的 exclude，以避免解析循环，而不会丢失外部库编译（必要时），如建议的 here。

TL;DR

在您的具体情况下，babel 规则将变为：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    sourceType: 'unambiguous',
    presets: [
      ['babel/preset-env', {
        corejs: 3,
        debug: true,
        targets: {
          browsers: [ 'IE 11', ],
        },
        useBuiltIns: 'usage',
      }],
    ],
  },
},

Answer 5

关注官方documentation：

1. 安装所需的软件包。

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

1. 将插件添加到配置文件中。

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

这是官方推荐的方法，更多可参考documentation。