如何在使用create-react-app时指定React版本？

Question

**如何在使用 Create React App 时指定 React 版本？** 在使用 Create React App (CRA) 创建项目时，默认会安装当前稳定版的 React。但有时你可能需要使用特定版本的 React，例如为了兼容旧项目或测试新特性。那么，如何在创建项目时指定 React 的版本呢？是否可以通过命令行直接指定？如果 CRA 官方不支持直接指定版本，我们是否可以通过其他方式（如修改 `package.json` 或使用自定义配置）来实现这一需求？此外，使用不同 React 版本是否会影响项目的构建与运行？这些问题都是开发者在定制 CRA 项目时常见的疑问。本文将详细介绍几种在使用 Create React App 时指定 React 版本的方法，并分析其适用场景与潜在问题。

Answer 1

如何在使用 Create React App 时指定 React 版本？

在使用 Create React App (CRA) 创建项目时，默认会安装当前稳定版的 React。但有时你可能需要使用特定版本的 React，例如为了兼容旧项目或测试新特性。那么，如何在创建项目时指定 React 的版本呢？是否可以通过命令行直接指定？如果 CRA 官方不支持直接指定版本，我们是否可以通过其他方式（如修改 package.json 或使用自定义配置）来实现这一需求？此外，使用不同 React 版本是否会影响项目的构建与运行？这些问题都是开发者在定制 CRA 项目时常见的疑问。

一、CRA默认行为与限制

Create React App 是一个封装良好的工具链，旨在简化 React 应用的搭建过程。它通过 react-scripts 包控制所有依赖版本，包括 React 和 ReactDOM。

• 默认情况下，执行 npx create-react-app my-app 将安装 react-scripts 的最新稳定版本。
• react-scripts 内部锁定了对应的 React 和 ReactDOM 版本。
• CRA 官方并未提供直接在命令行中指定 React 版本的功能。

这意味着如果我们希望使用特定版本的 React，必须采取额外手段进行干预。

二、方法一：手动修改 package.json

这是最常见也是最灵活的方法之一。其核心思想是：在创建项目后手动更改 React 及 ReactDOM 的版本号，并重新安装依赖。

1. 创建项目：npx create-react-app my-app
2. 进入项目目录：cd my-app
3. 打开 package.json 文件，找到如下字段：

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

1. 将其修改为你想要的版本，例如：

"dependencies": {
  "react": "16.13.1",
  "react-dom": "16.13.1"
}

1. 删除 node_modules 和 package-lock.json（或 yarn.lock）
2. 重新安装依赖：npm install 或 yarn install

这种方式适用于大多数中小型项目，但在某些情况下可能会导致构建失败，特别是当 React 版本与 react-scripts 不兼容时。

三、方法二：使用 create-react-app-with-version

社区开发了一些第三方脚本和工具，允许我们在创建项目时指定 React 版本。例如 create-react-app-with-version。

使用示例：

npx create-react-app-with-version my-app --react-version=16.14.0

这个工具内部自动处理了版本锁定的问题，适合快速搭建带有特定 React 版本的项目。

四、方法三：使用自定义 react-scripts

对于需要长期维护多个不同 React 版本的团队来说，可以考虑 fork 官方的 react-scripts 并发布自己的版本，锁定所需依赖。

步骤简述：

1. Fork create-react-app 仓库
2. 修改 packages/react-scripts/package.json 中的 React 和 ReactDOM 版本
3. 打包并发布到 npm，例如命名为 @your-org/react-scripts
4. 创建项目时使用：

npx create-react-app my-app --scripts-version @your-org/react-scripts

这种方法适合企业级项目，但维护成本较高。

五、兼容性问题分析

React 的每个主版本之间可能存在重大变更（breaking changes），因此在更换 React 版本时需要注意以下几点：

React 主版本	常见变化	潜在影响
v15 → v16	Error boundaries, Portals, Fragments	部分组件需重构以适应新 API
v16 → v17	事件系统优化，JSX 转换方式变化	需检查事件监听器是否正常工作
v17 → v18	并发模式引入，ReactDOM.render 替换为 createRoot	升级后需修改入口点代码

建议在切换版本前进行全面测试，尤其是集成测试和 E2E 测试。

六、流程图总结操作路径

graph TD
      A[开始创建 CRA 项目] --> B{是否需要指定 React 版本?}
      B -->|否| C[使用默认 react-scripts 创建]
      B -->|是| D[选择指定版本方式]
      D --> E[方式1: 修改 package.json]
      D --> F[方式2: 使用第三方工具]
      D --> G[方式3: 自定义 react-scripts]
      E --> H[修改依赖版本后重装]
      F --> I[调用带参数的创建命令]
      G --> J[发布自定义 react-scripts 后创建]

七、推荐策略与适用场景

• 个人项目/临时测试：推荐方式一（修改 package.json），简单快捷。
• 团队协作/多项目统一：推荐方式三（自定义 react-scripts），可集中管理。
• 快速原型/教学演示：推荐方式二（使用第三方工具），节省时间。