如何自动将React及依赖更新至指定版本（React 17.0.2）

1. 先锁定版本更新React核心包 #

首先直接安装指定版本的React和ReactDOM（两者版本必须保持一致）：

# 使用npm
npm install react@17.0.2 react-dom@17.0.2 --save

# 使用yarn
yarn add react@17.0.2 react-dom@17.0.2

2. 自动检测并修复依赖兼容性问题 #

如果你不想逐个检查依赖，可通过以下工具和命令自动处理：

方法一：用npm-check-updates筛选兼容版本 #

虽然npm-check-updates默认更新到最新版本，但你可以通过参数限制范围，只升级到与React 17兼容的版本：

# 全局安装npm-check-updates（未安装过的话）
npm install -g npm-check-updates

# 查看所有与React、Babel相关的可更新兼容依赖
ncu --filter '/react|babel|eslint-plugin-react/' --target 'minor'

# 直接更新这些依赖到兼容的次版本
ncu --filter '/react|babel|eslint-plugin-react/' --target 'minor' --upgrade

这条命令会筛选出和React生态相关的依赖，仅更新到次版本（避免大版本跳跃带来的兼容性问题）。

方法二：用npm自动解决依赖冲突 #

如果你的npm版本是7+，默认会严格检查peer依赖，可通过以下命令回到宽松模式，自动忽略非致命的兼容警告：

npm install --legacy-peer-deps

该命令会沿用npm 6的依赖处理逻辑，自动适配部分未声明React 17兼容但实际可运行的老依赖。

方法三：升级Babel配置适配React 17 #

React 17对JSX编译逻辑做了调整，需确保Babel预设版本兼容：

npm install @babel/preset-react@^7.12.0 --save-dev

之后在.babelrc或babel.config.js中更新配置：

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

开启runtime: automatic后，无需在每个JSX文件顶部手动引入import React from 'react'，这也是React 17的核心特性之一。

3. 验证更新结果 #

最后运行项目启动命令，检查是否能正常运行：

npm start

如果出现报错，再针对性修复个别依赖（比如部分UI库确实无React 17兼容版本，可临时降级该库或寻找替代方案）。

内容的提问来源于stack exchange，提问作者Konstantin Vahrushev