如何在Create React App项目中升级react-scripts内的@babel/core版本？

不推荐使用npm run eject #

虽然执行npm run eject会完全暴露CRA的底层配置，你确实能手动修改package.json里的@babel/core版本并重新安装依赖，但这种方式存在严重弊端：

• 一旦执行eject，你将失去CRA官方的后续更新与维护支持，所有配置变更都需要自行手动维护
• 后续升级react-scripts会变得异常繁琐，极易引发依赖冲突

推荐的替代方法 #

方法1：使用包管理器的依赖覆盖功能（最简单） #

如果你的npm版本≥8.3.0，直接在项目根目录的package.json中添加overrides字段，强制指定@babel/core的目标版本：

{
  "overrides": {
    "@babel/core": "7.x.x" // 替换为你想要升级到的具体版本号
  }
}

若使用Yarn，则添加resolutions字段：

{
  "resolutions": {
    "@babel/core": "7.x.x"
  }
}

之后执行npm install或yarn install，包管理器会自动将react-scripts依赖的@babel/core替换为你指定的版本。

方法2：使用react-app-rewired自定义配置 #

如果你需要更灵活的Babel配置调整，可以用react-app-rewired配合customize-cra修改webpack配置，无需eject：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，添加以下内容替换@babel/core版本：

const { override } = require('customize-cra');
const path = require('path');

module.exports = override(
  (config) => {
    // 定位babel-loader对应的规则
    const babelLoaderRule = config.module.rules.find(rule => rule.oneOf)?.oneOf.find(rule => rule.loader?.includes('babel-loader'));
    if (babelLoaderRule) {
      // 强制使用项目根目录安装的@babel/core
      babelLoaderRule.options.babelrc = false;
      babelLoaderRule.options.configFile = false;
      babelLoaderRule.options.presets = [
        require.resolve('@babel/preset-react'),
        require.resolve('@babel/preset-env')
      ];
      babelLoaderRule.options.babelrcRoots = [path.resolve(__dirname)];
    }
    return config;
  }
);

3. 修改package.json中的启动脚本，替换为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

4. 手动安装目标版本的@babel/core及相关预设：

npm install @babel/core@7.x.x @babel/preset-react @babel/preset-env --save-dev

执行npm start即可生效。

注意事项 #

• 升级@babel/core时，要确保目标版本与react-scripts的其他依赖兼容，避免出现编译错误
• 优先尝试方法1，它最简洁且不会破坏CRA的原有工作流程

内容的提问来源于stack exchange，提问作者João Freitas