Babel useBuiltIns：'usage'，使用 core-js 3 失败答案

【问题标题】：Babel useBuiltIns: 'usage', failing with core-js 3Babel useBuiltIns：'usage'，使用 core-js 3 失败
【发布时间】：2020-09-17 03:10:34
【问题描述】：

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

我得到的错误如下：未找到模块：错误：无法解析 'C:\path\' 中的 'core-js/modules/es.string.replace' @file.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'
                ],
            },
        },

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

【问题讨论】：

标签： webpack babeljs core-js

【解决方案1】：

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

我的文件结构非常复杂 - 被转译的脚本文件远远超出了我设置的捆绑包的范围。

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

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

【讨论】：