升级Node.js至16后Webpack处理node_modules模块解析失败求助

module: {
rules: [
{
test: /(?!:spec).tsx?$/,
loader: 'ts-loader',
exclude: /.d.ts$/,
},
{
test: /.d.ts$/,
loader: 'ignore-loader',
},
{
test: /.mjs$/,
type: "javascript/auto"
},
{
test: /.js$/,
loader: 'babel-loader',
},

],

},
...

添加`babel-loader`后报错仍未消失，请问为何会在`node_modules/dist`层级失败？该如何解决？

## 原因分析
- **Babel默认跳过node_modules目录**：你配置了`babel-loader`处理`.js`文件，但Babel默认会排除所有`node_modules`下的文件，导致`@sailplane/injector`里的可选链操作符（`?.`）没被转译。虽然Node.js 16原生支持`?.`，但如果Webpack打包时的目标环境配置不对，或者依赖本身发布的是未转译的ES模块代码，就会触发解析错误。
- **Webpack规则未覆盖目标依赖**：当前`babel-loader`规则没有明确包含`@sailplane/injector`，导致该依赖的文件没有经过Babel转译就被Webpack处理。

## 解决方案
### 1. 修改Babel配置，让其处理指定依赖
在你的Babel配置文件（`.babelrc`、`babel.config.json`或项目中的`babel.config.js`）中，将`@sailplane/injector`加入`include`列表，确保Babel转译该依赖的代码：
```json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "16"
      }
    }]
  ],
  "include": [
    "./src/**/*",
    "./node_modules/@sailplane/injector/**/*"
  ]
}

2. 调整Webpack的babel-loader规则 #

修改Webpack配置中的babel-loader规则，排除除@sailplane/injector之外的node_modules文件，确保该依赖被Babel处理：

{
  test: /\.js$/,
  loader: 'babel-loader',
  // 只排除不包含@sailplane/injector的node_modules目录
  exclude: /node_modules\/(?!@sailplane\/injector)/,
}

3. 配置Webpack目标环境 #

在Webpack配置文件顶部添加target: 'node16'，让Webpack知晓当前目标是支持?.语法的Node.js 16，避免不必要的转译检查：

module.exports = {
  target: 'node16',
  // 其他原有配置...
};

4. 清理并重新安装依赖 #

删除旧的依赖文件和锁文件，重新安装适配Node.js 16的依赖版本：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Nikita Polevoi