如何将package.json的依赖配置拆分到独立文件并在npm install时合并

可行的实现方案分为两大类，不需要复杂的二次开发就可以落地： #

无额外第三方依赖的实现方式

• 方案1：预安装钩子自动合并依赖
  你可以把整理好的固定版本依赖单独存为一个JSON文件，比如命名为 common-build-deps.json，结构和 package.json 中的 devDependencies 完全一致，示例如下：

  {
    "webpack": "5.76.0",
    "vue-loader": "15.10.1",
    "css-loader": "6.7.3",
    "babel-loader": "8.3.0"
  }
  

  之后在项目的 package.json 中添加 preinstall 脚本钩子：

  {
    "scripts": {
      "preinstall": "node -e \"const fs = require('fs'); const commonDeps = require('./common-build-deps.json'); const pkg = require('./package.json'); pkg.devDependencies = Object.assign({}, pkg.devDependencies, commonDeps); fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2))\""
    }
  }
  

  每次执行 npm install 或者 yarn install 之前会自动运行该脚本，将公共依赖合并到项目的依赖列表中，不会覆盖项目本身独有的依赖，若存在同名依赖，公共依赖的版本优先级更高，调整合并顺序即可修改优先级。

• 方案2：封装为统一依赖包
  把所有整理好的固定版本构建依赖作为一个独立npm包的 dependencies，你可以发布为公司内部私有包，也可以直接放在代码仓库中作为本地包使用。项目侧只需要安装这一个依赖包，所有关联的webpack、loader等依赖都会自动安装到项目中，需要统一升级版本时只要修改这个公共包的版本即可，所有项目重新安装就能同步更新。
  若使用本地包，直接执行 npm install ./path/to/your-public-deps-package 即可完成安装。

第三方工具增强方案

• 如果你使用yarn作为包管理器，可以直接使用内置的 resolutions 字段约束版本，将公共的版本规则单独存为文件后，通过简单脚本注入到项目 package.json 的 resolutions 字段中，可强制所有依赖的子依赖也使用你指定的版本，从根源避免版本不一致导致的构建失败。
• npm用户可以使用 npm-force-resolutions 工具实现和yarn resolutions 相同的效果，同样支持将版本约束单独存储管理。

额外提示：要100%保证构建稳定，建议把项目的 package-lock.json 或者 yarn.lock 也提交到代码仓库，可保证所有环境安装的依赖版本完全一致。

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