webpack - Babel useBuiltIns : 'usage' , 因 core-js 3 而失败

Question

我最近开始使用 Webpack，但在构建时遇到了与我的 Babel 和 Core js (v3) 设置相关的错误。

我收到的错误如下:找不到模块:错误:无法解析“C:\path\”中的“core-js/modules/es.string.replace” @文件.jsx

这是在 React 项目上，我尝试使用的功能在我的一个 jsx 组件上。

我的 package.json 看起来像这样:

    "devDependencies": {
        "@babel/cli": "^7.8.4",
        "@babel/core": "^7.9.6",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "@babel/preset-env": "^7.9.6",
        "@babel/preset-react": "^7.9.4",
        "@babel/preset-typescript": "^7.9.0",
        "@babel/runtime-corejs3": "^7.10.1",
        "autoprefixer": "^9.8.0",
        "babel-loader": "^8.1.0",
        "core-js": "^3.6.5",
        "css-loader": "^3.5.3",
        "cssnano": "^4.1.10",
        "less-loader": "^6.1.0",
        "mini-css-extract-plugin": "^0.9.0",
        "node-sass": "^4.14.1",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "postcss-loader": "^3.0.0",
        "resolve-url-loader": "^3.1.1",
        "sass-loader": "^8.0.2",
        "terser-webpack-plugin": "^3.0.1",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-manifest-plugin": "^2.2.0",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "@babel/polyfill": "^7.8.7",
        "clean-webpack-plugin": "^3.0.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "regenerator-runtime": "^0.13.5"
    }

我的 babel 设置如下所示:

    test: /(\.jsx|\.js|\.ts|\.tsx)$/,
        exclude: /(node_modules)/,
        use: {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true,
                sourceType: 'unambiguous',
                presets: [
                    [
                        '@babel/preset-env', {
                            modules: false,
                            corejs:  {
                                version: 3.6,
                                proposals: true
                            },
                            useBuiltIns: 'usage',
                            targets: {
                                browsers: browserList,
                            },
                        }
                    ],
                    '@babel/preset-typescript',
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties'
                ],
            },
        },

在我的搜索中，我遇到过很多人遇到类似的问题，但我还没有找到解决问题的方法。

Answer 1

在寻找这个问题的答案几天后，我终于在这个 Stack overflow 帖子上偶然发现了答案:https://stackoverflow.com/a/61446111/1820888 - 这是我的确切问题。在这里为遇到此问题的任何人解释答案:

我的文件结构非常复杂 - 正在转译的脚本文件完全超出了我的包设置的范围。

添加以下设置解决了错误 - 它明确定义了 node_modules 包在您的项目中的位置，因此无论您的文件位于文件结构中的哪个位置，它们都能够解释 node_modules:

module.exports = {  
    resolve: {
      modules: [
        path.resolve(__dirname, "node_modules")
      ],
  ...