React前端项目如何实现Babel、Jest与Webpack的配置协同兼容

当前项目存在两套并行的Babel依赖体系，无环境区分的全局.babelrc配置会被Webpack和Jest同时读取，交叉加载必然触发版本不兼容：

• Webpack构建链路使用Babel 6.x生态：包含babel-core@6.26.0、babel-preset-env@1.6.1、babel-preset-react@6.16.0、babel-loader@7.1.5，仅能兼容不带@babel/命名空间的老版本预设
• Jest测试链路使用Babel 7.x生态：包含@babel/preset-env@7.13.15、@babel/preset-react@7.13.13、babel-jest@26.6.3，仅能兼容带@babel/命名空间的新版本预设
  直接修改全局预设后，Webpack链路的Babel 6.x核心会尝试加载Babel 7.x的预设，直接抛出版本不兼容报错。

利用Babel内置的env环境匹配能力，按运行场景拆分预设，实现一份配置同时兼容两边的加载逻辑：

1. 改写根目录下的.babelrc文件为如下结构：

{
  "env": {
    // Jest运行时会自动将NODE_ENV设为test，仅加载这套兼容Jest的Babel7预设
    "test": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    },
    // Webpack开发/生产构建时NODE_ENV为development/production，仅加载原有Babel6生态预设
    "development": {
      "presets": ["react", "env", "stage-0"]
    },
    "production": {
      "presets": ["react", "env", "stage-0"]
    }
  }
}

2. 修正依赖版本错配问题，避免隐性兼容异常：
   • 当前安装的react-test-renderer@17.0.2与项目使用的react@16.0.0存在大版本错位，需要降级为与React同大版本的react-test-renderer@16.x，否则组件渲染测试会抛出兼容错误
   • 配置拆分后，Webpack链路不会再触发对Babel7预设的加载，原有“Requires Babel "^7.0.0-0", but was loaded with "6.26.3"”的报错会自动消失

• 不同环境的预设不要交叉混合：不能在development/production配置中加入@babel/开头的新预设，也不能在test配置中加入无命名空间的老版本预设，否则会再次触发跨Babel核心加载的版本报错
• 如果出现Jest运行时未匹配到test环境配置的情况，可以在package.json的test启动脚本中显式指定环境变量，确保NODE_ENV能被正确识别

内容的提问来源于stack exchange，提问作者Alexander Schalk