如何在多个React应用间复用node_modules以节省空间与时间？

我完全懂你的痛点——学习阶段要建一堆小React项目，每次create-react-app都要等半天，每个项目200MB的node_modules堆起来太占空间，复制文件夹还因为软链接报错，确实头疼。下面给你几个实用的解决方案，从简单到进阶都有：

1. 用pnpm实现依赖共享（最推荐） #

pnpm天生就是为了解决依赖重复下载和空间浪费的问题设计的，它会把所有依赖存在一个全局共享存储里，每个项目的node_modules里都是指向这个存储的硬链接/符号链接，实际占用空间几乎可以忽略，安装速度也比npm/yarn快很多。

操作步骤：

• 先全局安装pnpm：

  npm install -g pnpm
  

• 用pnpm创建React项目：

  pnpm create react-app my-new-react-project
  

• 后续新建项目都用pnpm，它会自动复用已下载过的依赖，不用重复拉取，而且pnpm start、pnpm install这些命令和npm完全兼容，几乎不用改习惯。

2. Yarn的Plug'n'Play (PnP) 模式 #

Yarn的PnP模式直接抛弃了node_modules，它把所有依赖存在全局缓存里，项目里只用一个.pnp.cjs文件来管理依赖的查找路径，彻底解决重复占用空间的问题，安装速度也超快。

操作步骤：

• 全局安装Yarn：

  npm install -g yarn
  

• 创建带PnP的React项目：

  yarn create react-app my-new-app --pnp
  

• 运行项目直接用yarn start就行，Yarn会通过PnP机制自动找到依赖，不需要本地的node_modules。

3. 手动共享依赖（不推荐，适合特殊场景） #

如果不想换包管理器，可以尝试把所有React项目放在同一个父目录下，在父目录安装共用的依赖，子项目直接复用父级的node_modules。不过这种方法容易出现版本冲突，需要手动调整脚本：

• 新建父文件夹react-learning，在里面安装依赖：

  cd react-learning
  npm install react react-dom react-scripts
  

• 每个子项目（比如todo-app）的package.json里修改scripts，指定用父级的react-scripts：

  "scripts": {
    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test"
  }
  

  但要注意，如果不同项目需要不同版本的依赖，这种方法就会出问题，所以还是优先用前两种方案。

为什么复制node_modules会报错？ #

你遇到的Cannot find module '../scripts/start'错误，是因为react-scripts内部用了很多符号链接指向其内部文件，复制文件夹时这些链接会失效（路径不对了）。而且就算复制成功，每个项目还是会占用200MB空间，根本没达到复用的目的，所以这种方法不可取。

内容的提问来源于stack exchange，提问作者Devendra Mukharaiya