Babel 7.25.0 版本升级导致的构建问题分析与解决方案

问题背景

在 Babel 7.25.0 版本升级后，许多开发者遇到了构建失败的问题。错误信息显示在解析 @testing-library/react 模块时遇到了可选链操作符（?.）语法问题，导致构建过程中断。

问题根源分析

这个问题的根本原因在于 Babel 7.25.0 版本中升级了 browserslist 从 4.22.2 到 4.23.1，这间接更新了 caniuse-lite 数据库。这个更新改变了浏览器兼容性数据的计算方式。

在 Create React App (CRA) 项目中，如果没有显式配置 .browserslistrc 文件或 package.json 中的 browserslist 字段，CRA 会使用默认的浏览器兼容性配置：

• 生产环境：>0.2%, not dead, not op_mini all
• 开发环境：last 1 chrome version, last 1 firefox version, last 1 safari version

随着 caniuse-lite 数据库的更新，>0.2% 这个查询条件解析出的浏览器版本发生了变化。原本可能包含不支持可选链操作符的浏览器版本，现在这些浏览器的市场份额下降，不再被 >0.2% 包含，导致 Babel 不再编译可选链操作符语法。

解决方案

方案一：显式指定浏览器兼容性

在 package.json 中添加明确的 browserslist 配置，确保包含不支持可选链操作符的浏览器版本：

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all", "chrome 79"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

添加 chrome 79 可以确保 Babel 继续编译可选链操作符语法，因为 Chrome 79 不支持该特性。

方案二：升级 Webpack

这个问题在 Webpack 4 中更为常见，因为 Webpack 4 不支持现代 JavaScript 语法。升级到 Webpack 5 可以解决这个问题，因为 Webpack 5 原生支持可选链操作符等现代语法。

方案三：临时降级 Babel

如果暂时无法修改配置或升级 Webpack，可以临时将 Babel 降级到 7.24.x 版本。但这只是一个临时解决方案，建议尽快采用前两种方案之一。

最佳实践建议

1. 显式配置浏览器兼容性：项目应该明确指定支持的浏览器范围，而不是依赖默认配置。

2. 保持依赖更新：定期更新项目依赖，特别是像 Webpack 这样的构建工具，以获得更好的性能和现代语法支持。

3. 理解构建工具链：了解 Babel、Webpack 和 browserslist 如何协同工作，有助于快速定位和解决类似问题。

4. 测试环境一致性：确保开发、测试和生产环境的构建配置一致，避免因环境差异导致的问题。

通过理解这个问题的根本原因和解决方案，开发者可以更好地管理项目的构建过程，避免类似问题的发生。