如何移除Yarn重复React包？详解两个install参数差异

背景场景 #

我在配置 React Native 项目的 package.json 时，明确指定了符合版本要求的依赖：

"dependencies": {
  "expo": "^27.0.1",
  "react": "16.3.1",
  "react-native": "~0.55.2",
  "react-navigation": "^2.0.1"
}

（注：react-native@0.55.4 要求配套 react@16.3.1）

但生成的 yarn.lock 文件里出现了两个 React 版本：

react@16.3.1:
  version "16.3.1"
  resolved "https://registry.yarnpkg.com/react/-/react-16.3.1.tgz#4a2da433d471251c69b6033ada30e2ed1202cfd8"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.0"

react@^16.0.0:
  version "16.3.2"
  resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.0"

执行 $ yarn remove react 后，yarn.lock 里依然保留了 react@^16.0.0:16.3.2 这个版本，再次执行该命令还会报错：

error This module isn't specified in a manifest.

那么该如何强制 Yarn 移除所有 React 版本，手动安装我需要的指定版本？另外 yarn install --pure-lockfile 或 yarn install --frozen-lockfile 能解决这个问题吗？

解决方案 #

方法一：彻底清理后重新安装（最直接有效） #

这是解决依赖冲突最稳妥的方式，步骤如下：

• 删除项目根目录下的 yarn.lock 文件和 node_modules 文件夹
• 确认你的 package.json 中 react 的版本是精确指定的（不要带 ^ 或 ~），也就是 "react": "16.3.1"
• 执行 yarn install

此时 Yarn 会完全按照 package.json 的配置拉取依赖，生成全新的 yarn.lock，不会出现重复的 React 版本。

方法二：使用 Yarn Resolutions 强制统一版本（无需删除文件） #

如果不想删除 node_modules，可以用 Yarn 的 resolutions 字段强制所有依赖树中的 React 都使用指定版本：

1. 在 package.json 中添加如下配置：

"resolutions": {
  "react": "16.3.1"
}

2. 执行 yarn install

Yarn 会自动遍历所有依赖，强制将 React 版本统一为 16.3.1，并更新 yarn.lock 文件。

关于 --pure-lockfile 和 --frozen-lockfile 的作用 #

这两个命令都不能彻底解决你的问题，原因如下：

• yarn install --pure-lockfile：该命令会忽略 yarn.lock 中的版本，根据 package.json 重新计算依赖树，但不会更新 yarn.lock 文件。虽然这次会安装正确的 React 版本，但下次执行普通的 yarn install 时，还是会读取旧的 lock 文件，重复版本问题会再次出现。
• yarn install --frozen-lockfile：该命令会严格按照 yarn.lock 中的版本安装依赖，如果 lock 文件里有冲突版本，它只会抛出错误，不会自动修复或更新依赖，因此无法解决你的重复版本问题。

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