如何正确安装react-scripts：选dependencies还是devDependencies？

两种安装位置下项目都能正常运行是npm的依赖解析逻辑导致的：本地开发、构建阶段npm会同时安装dependencies和devDependencies下的所有包，只要node_modules里存在react-scripts，对应的启动、构建、测试脚本就能正常执行，不存在装错位置就直接跑不起来的硬限制。

推荐的标准安装方式 #

按照依赖分类的通用规则，以及Create React App的最新官方约定，react-scripts应该安装为开发依赖，对应安装命令为：

npm i -D react-scripts

依赖分类的核心判定标准是「包是否会进入生产环境运行的代码包」：

• dependencies存放生产环境运行时必须的依赖，比如react、react-dom、redux这类，业务代码会直接引用它们，最终构建出的上线静态资源会包含这些包的代码
• devDependencies存放仅在开发、构建、测试流程中使用的工具类依赖，不会被打包进上线产物。react-scripts本质是封装了webpack、babel、eslint、jest等全套工具链的脚手架包，只在本地启动开发服务、执行构建、跑测试用例的时候运行，生产环境只需要部署build命令输出的静态文件，不需要安装react-scripts，从语义和最佳实践上都应该归为开发依赖。

不同项目配置差异的原因 #

你观察到的配置不统一、VS2022模板分类不一致的情况，本质都是历史遗留或配置不规范导致的，没有特殊规则：

• 早期版本的Create React App官方模板曾经把react-scripts放在dependencies下，后续版本才调整到开发依赖分类，很多老项目、基于旧模板生成的项目没有同步修改配置，就保留了旧写法
• 部分开发者部署时图省事，直接在生产服务器拉源码执行安装+构建，如果部署时加了--production参数，npm会跳过devDependencies的安装，会导致构建失败，开发者懒得调整部署流程，就直接把react-scripts移到普通依赖里凑合用，属于不规范但能跑的写法
• Visual Studio 2022的两个模板分类不一致，纯粹是模板维护时没有对齐最新规范，基础React模板沿用了旧的依赖配置，ReactRedux模板更新时改成了正确的分类，不存在功能层面的特殊设计。

如果你采用CRA推荐的部署流程：在本地或CI环境提前执行build，再把生成的build文件夹静态资源上传到服务器托管，把react-scripts放在devDependencies是完全没有问题的，还能减少生产环境安装依赖的耗时和体积。就算你把它放在普通依赖里也不会触发功能报错，只是不符合依赖分类的语义规范而已。

内容的提问来源于stack exchange，提问作者Maxim Rudnev