Create-react-app创建React项目后，npm装依赖时大量包被移除且启动失败

我来帮你解决这个头疼的问题——混用npm和Yarn确实容易搞出依赖混乱的状况，尤其是create-react-app自动切换包管理器的逻辑有时候会让人摸不着头脑。下面是一步步的解决方法：

1. 彻底清理系统中的Yarn残留 #

首先得确保你的环境里没有Yarn的残留，不然create-react-app可能还是会自动调用它：

• 全局卸载Yarn：
  如果是通过npm安装的Yarn，执行：npm uninstall -g yarn
  如果是用brew等其他工具安装的，对应执行卸载命令（比如Mac上的brew uninstall yarn）
• 清理Yarn缓存与配置文件：
  删除用户目录下的.yarn文件夹（Windows路径：C:\Users\[你的用户名]\.yarn；Mac/Linux路径：~/.yarn）
  同时检查系统环境变量，确保Yarn的路径已经从PATH中移除

2. 强制Create React App使用npm创建新项目 #

接下来，创建项目时明确指定用npm，避免它自动切换到Yarn：
执行创建命令时加上--use-npm参数：

npx create-react-app my-app --use-npm

这样生成的项目只会生成package-lock.json，不会出现yarn.lock，从根源避免依赖管理工具混用的问题。

3. 修复已出现问题的现有项目 #

如果已经有项目出现npm安装包时删除依赖的情况，按下面步骤修复：

• 先删除项目里的yarn.lock和node_modules文件夹：

  # Mac/Linux系统
  rm -rf node_modules yarn.lock
  # Windows系统
  rmdir /s /q node_modules && del yarn.lock
  

• 用npm重新安装所有依赖，生成正确的package-lock.json：

  npm install
  

• 之后再用npm安装新包时，就不会再出现依赖被移除的情况了，比如：

  npm install [你的目标包名]
  

问题根源说明 #

简单来说，npm的package-lock.json和Yarn的yarn.lock是互不兼容的锁文件。当项目只有yarn.lock而没有package-lock.json时，npm在安装或新增依赖时会重新解析package.json的依赖规则，这可能和Yarn当初构建的依赖树、版本完全不一致，导致npm误判某些包不再需要，从而将它们移除。而create-react-app如果检测到环境中有Yarn的残留（哪怕你已经卸载），就会默认用Yarn初始化项目，生成yarn.lock，这就埋下了隐患。

内容的提问来源于stack exchange，提问作者Lê An Việt