标准答案
- dependencies 表示包运行时自己需要安装的依赖。
- peerDependencies 表示包需要消费方项目提供的同伴依赖。
- 组件库通常不应该把 React、Vue 等框架打进自己的产物,而是让应用侧提供。
- 这样可以避免多个 React/Vue 实例、上下文不共享、Hooks 或响应式行为异常。
- 组件库还要在构建配置中 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 版本范围写得过窄或过宽,导致安装冲突或兼容承诺失真。