如何在package.json中配置同一node依赖的两个不同版本（以MUI为例）

方案可行性说明 #

你可以直接在项目中同时安装MUI v5和v4两个版本，不存在包冲突问题。因为MUI v5已经将所有包名前缀从@material-ui/*调整为@mui/*，两个版本的包在node_modules中会存放在完全独立的目录下，npm会将其识别为不同的依赖包，不会互相覆盖。

package.json 配置步骤 #

1. 保留现有v5版本的所有@mui/*前缀依赖，无需修改
2. 手动安装v4版本的核心依赖，指定版本为4.12.3，满足日历组件的peer依赖要求：

npm install @material-ui/core@4.12.3 @material-ui/system@4.12.3 @material-ui/styles@4.12.3

3. 如果安装时报peer dependency冲突警告，可在package.json中添加overrides配置（需npm 8.3及以上版本支持），强制日历组件使用指定的v4版本依赖：

{
  "dependencies": {
    // MUI v5 依赖
    "@mui/material": "^5.0.0-rc.0",
    "@mui/system": "^5.0.0-rc.0",
    "@mui/styles": "^5.0.0-rc.0",
    // MUI v4 依赖
    "@material-ui/core": "4.12.3",
    "@material-ui/system": "4.12.3",
    // 你的日历组件依赖，替换为实际包名
    "target-calendar-package": "^x.x.x"
  },
  "overrides": {
    "target-calendar-package": {
      "@material-ui/core": "4.12.3",
      "@material-ui/system": "4.12.3"
    }
  }
}

使用注意事项 #

• 两个版本的主题需要隔离，日历组件所在的页面单独套一层v4的ThemeProvider，不要和v5的主题实例混用，避免全局样式污染
• 不要在同一个业务组件内同时调用v4和v5的组件，降低样式冲突概率

可选优化方案 #

如果不想在项目中引入两套MUI依赖，可以先检查当前使用的日历组件是否已经推出适配MUI v5的版本，或者替换为其他原生支持MUI v5的日历组件，即可避免版本共存问题。

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