持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

开发场景

在封装react组件库的时候，如果封装的组件库中，用到了react hooks，那么就必须注明使用react的最低版本号，否则在低版本的项目中可能会出现问题。

如果不好理解，你可以想一想以前买游戏的时候，包装上经常会标注兼容的系统，如果注明的是Windows 7，这时你在Windows XP上运行就可能会不兼容。

认识peerDependencies

解决上面开发场景的问题

package.json中的peerDependencies字段，就是为了解决上面的问题而出现的。

下面举个例子，假设规定组件库依赖的react版本大于17，应该进行如下设置：

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

减少打包体积

如果你的组件库需要使用ant-design作为底层库，而你同样希望引入该组件库的项目中也使用ant-design。此时你可以将ant-design包作为devDependencies引入组件库，并且在peerDependencies设置引入的版本。

这样做不仅可以减少组件库打包时的体积，同样项目中也不需要反复引入组件库，减少项目发版时的体积。

统一相关工具链版本

如果你希望统一你项目中的工具版本，可以在封装的包中指定相关工具的版本号，来避免由于工具库重大版本升级带来的api不兼容的问题。

📢需要特别强调注意的是：

在npmv3~npmv6的版本中，peerDependencies不是自动安装的。如果在安装的过程中发现没有相关依赖，npm会发出警告。从npmv7开始，peerDependencies将会默认安装。

peerDependenciesMeta

当用户安装你的组件库时，如果peerDependencies中指定的react没有安装，react将会发出警告。

但是如果你将peerDependenciesMeta标记为可选，npm在安装时将不会发出警告。

举个例子，你可以将lodash设置为可选，配置项如下：

{
  "peerDependencies": {
    "react": ">=17.0.0",
    "react-dom": ">=17.0.0"，
    "lodash": ">=4.0.0"
  }
  "peerDependenciesMeta": {
    "lodash": {
      "optional": true
    }
  }
}

如果你想了解更多关于package.json的内容，可以查阅官方文档