使用 peerDependencies 缩减项目体积

一、什么是 peerDependencies

peerDependencies 存在于 NPM 的 package.json 中，如果项目中依赖模块 X、模块 Y，模块 Y 又依赖模块 X，当模块 X 出现版本冲突的时候，则会打包出 X 的两份代码。在这个模块 Y 里面使用 peerDependencies 引入模块 X，这样当前项目和模块 Y 便会共用这个模块 X。

当在 peerDependencies 引入一个模块后：

1. 当前的代码将与符合版本条件的模块和谐相处。
2. 如何这个模块已经存在于项目的 node_modules 中，什么也不提示。
3. 如何这个模块不存在于项目的 node_modules 中，警告用户缺少此模块，但是不自动安装。

注意： npm i 并不会自动安装 peerDependencies 里的模块，所以开发模块的需要在 devDependencies 同步添加相应模块。

二、什么场景下适合引入 peerDependencies

1. 多份模块代码的重复加载易引发冲突。
2. 依赖在项目中是可见的。
3. 可以让开发者自己决定安装哪个版本。

业内应用：

1.ant-design

"peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
}

2.element-ui

"peerDependencies": {
    "vue": "^2.5.17"
}

三、案例

测试项目 test-project 为例，dependencies 为：

# test-project
"dependencies": {
    "m1": "1.0.0",
    "m2": "1.0.0",
    "m-child": "1.0.0"
}

# m1@1.0.0
"dependencies": {
    "m-child": "2.0.0",
}

# m2@1.0.0
"dependencies": {
    "m-child": "3.0.0",
}

npm i 之后，实际的 node_modules 结构是这样的：

node_modules
├── m1 1.0.0
│   └── node_modules
│       └── m-child 2.0.0
├── m2 1.0.0
│   └── node_modules
│       └── m-child 3.0.0
└── m-child 1.0.0

如上所见 m-child 的三个版本都下载到了本地，并且构建打包后包含了三份 m-child 的代码。

为了解决这部分重复代码，在模块 m1 和 m2 中引入 peerDependencies：

# m1@1.0.0
"peerDependencies": {
    "m-child": ">=1.0.0"
}

# m2@1.0.0
"peerDependencies": {
    "m-child": ">=1.0.0"
}

npm i 之后，实际的 node_modules 结构：

node_modules
├── m1 1.0.0
├── m2 1.0.0
└── m-child 1.0.0

test-project、m1、m3 三个部分将和谐共用 m-child@1.0.0，构建打包后也只有一份 m-child。