React 脚本是什么？开发者指南

如果你曾经使用 Create React App (CRA) 创建过 React 应用，那么你就使用过 react-scripts。但这些脚本在幕后到底做了什么？在本指南中，我们将详细解析 react-scripts 是什么，每个脚本的功能，以及何时你可能需要自定义或替换它。

react-scripts 是什么？

react-scripts 是随 Create React App (CRA) 一起提供的 NPM 包。它包含运行、构建、测试和检查 React 应用所需的配置和脚本。与其自己编写和维护 Webpack、Babel 或 ESLint 配置文件，CRA 依靠 react-scripts 在底层处理这些复杂性。

当你使用 CRA 创建新的 React 应用时：

npx create-react-app my-app

CRA 会安装 react-scripts 并在你的 package.json 中设置默认脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

这些命令做什么？

npm start

• 使用 Webpack Dev Server 运行开发服务器
• 启用热模块替换 (HMR)
• 使用 Babel 和环境变量（来自 .env）
• 在默认浏览器中打开你的应用

npm run build

• 为生产环境编译你的应用
• 压缩 JavaScript 和 CSS
• 在 build/ 目录中生成静态文件
• 优化性能（树摇（tree-shaking）、压缩）

npm test

• 使用 Jest 运行测试
• 默认监视文件变化
• 支持覆盖率报告和模拟测试

npm run eject

• 将所有配置和依赖复制到你的项目中
• 提供对 Webpack、Babel、ESLint 等的完全控制
• 不可逆 — 没有”撤销”选项

react-scripts 在 CRA 中的位置？

Create React App 搭建项目结构。但是 react-scripts 负责运行应用、构建包，并处理所有繁重的工作。

没有 react-scripts 的 CRA 将无法工作，除非你手动替换每个底层配置 — 这正是你执行 eject 时发生的事情。

何时覆盖或替换 react-scripts

有时，这种抽象会有限制。你可能需要：

• 自定义 Webpack 加载器或别名
• 使用不同的 Babel 插件
• 更改 ESLint 行为

你有三个选择：

1. 弹出(Eject)

npm run eject

• 完全控制，但复杂且不可逆

2. 不弹出而覆盖

• 使用如下库：
  • craco (Create React App Configuration Override)
  • react-app-rewired
• 这些工具包装了 react-scripts 并允许你注入自定义配置

3. 完全替换

• 如果 CRA 不再满足你的需求，考虑：
  • Vite
  • Next.js
  • Parcel

常见错误及修复方法

'react-scripts' is not recognized as a command

• 通常由缺少 node_modules 导致
• 修复：

rm -rf node_modules
rm package-lock.json
npm install

包更新后构建失败

• 检查你的 react-scripts 版本是否与 React 版本匹配
• 避免在不查看更新日志的情况下手动升级 react-scripts

Create React App 和 react-scripts 是否仍然相关？

是的 — 对于初学者、学习项目和快速原型，CRA + react-scripts 提供了一种零配置的方式来构建 React 应用。但对于更大的应用，现代替代品如 Vite 和 Next.js 更快、更灵活，也更面向未来。

结论

react-scripts 是每个基于 CRA 的 React 应用的动力源。它处理打包、测试、代码检查等，而不暴露复杂的工具。如果你刚刚开始，这是一个专注于学习 React 本身的好方法。随着应用的增长，你可以选择覆盖或超越它。

常见问题