标准答案

  1. dependencies 表示包运行时自己需要安装的依赖。
  2. peerDependencies 表示包需要消费方项目提供的同伴依赖。
  3. 组件库通常不应该把 React、Vue 等框架打进自己的产物,而是让应用侧提供。
  4. 这样可以避免多个 React/Vue 实例、上下文不共享、Hooks 或响应式行为异常。
  5. 组件库还要在构建配置中 external 掉 peerDependencies,避免它们被打包进去。

题目解析

peerDependencies 解决的是共享运行环境问题。组件库和业务应用必须使用同一份 React 或 Vue 实例,很多上下文、响应式、插件安装能力才会正常工作。

如果组件库把框架放进 dependencies 并直接打包,业务应用里可能出现两份框架。表面上组件能渲染,实际会出现 context 读不到、hooks 报错、插件不生效等问题。

版本范围也要写得克制。范围太窄会让使用方难以升级,范围太宽又可能承诺了没有测试过的版本兼容。

代码示例

组件库通常把宿主框架声明为 peerDependencies,并在构建时 external。

JSON
{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  },
  "devDependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

常见误区

  • 组件库把宿主框架放进 dependencies 并打进产物。
  • 只写 peerDependencies,没有在构建工具里 external,最终仍然重复打包。
  • peerDependencies 版本范围写得过窄或过宽,导致安装冲突或兼容承诺失真。

作者信息