依赖匹配
这一页说明组件依赖与本地版本不一致时,平台如何决定「能不能渲染」。
为什么需要匹配
组件在平台上预览时,使用的是你本地项目里已安装的依赖。实际情况经常是:
- 组件要求
echarts@5.2.3 - 你本地安装的是
echarts@5.0.0
如果要求版本完全一致,大量组件会直接不可用。平台因此提供五档匹配规则,由你决定放宽到什么程度。
五种规则
在「设置 → 预览规则 → 依赖」中,可以为 dependencies 与 devDependencies 里的每个包单独设置:
| 规则 | 判定方式 | 适用场景 | 标识色 |
|---|---|---|---|
| 自动 | 不做版本限制,使用本地已安装版本 | 默认值,优先保证能渲染 | 灰 |
| 仅安装 | 只要本地装了该包,不看版本 | 快速预览,非生产验证 | 绿 |
| 主版本 | 主版本号相同 | 平衡兼容性与稳定性 | 蓝 |
| 主次版本 | 主版本与次版本都相同 | 对版本较敏感 | 橙 |
| 完全一致 | 版本号完全相同 | 严格版本控制 | 红 |
规则越往下越严格。设置页每一项前面有对应颜色的圆点,便于快速识别。
版本对照示例
假设组件依赖 echarts@5.2.3:
| 本地版本 | 自动 | 仅安装 | 主版本 | 主次版本 | 完全一致 |
|---|---|---|---|---|---|
| 5.0.0 | 使用 | 使用 | 使用 | 跳过 | 跳过 |
| 5.2.0 | 使用 | 使用 | 使用 | 跳过 | 跳过 |
| 5.2.3 | 使用 | 使用 | 使用 | 使用 | 使用 |
| 6.0.0 | 使用 | 使用 | 跳过 | 跳过 | 跳过 |
| 未安装 | 跳过 | 跳过 | 跳过 | 跳过 | 跳过 |
默认行为
- 没有单独配置的依赖,默认使用自动。
- 本地完全没安装的依赖,任何规则都不会匹配,必须先安装。
- 框架由组件源码决定:引入
vue按 Vue 渲染,引入react按 React 渲染;两者都引入则无法渲染。
四步排查
1. 切到「全部」
确认组件是否存在,而不是被列表过滤掉了。
2. 看依赖状态
详情页里:
- 绿色:匹配成功
- 黄色:版本有差异,可以尝试运行
- 红色:不匹配或缺失
3. 安装缺失依赖
bash
npm install <package-name>安装后刷新页面重新检测。
4. 放宽规则
版本差异不影响功能时,把规则从「完全一致」放宽到「主版本」或「自动」。
规则的作用范围
依赖匹配只影响在线预览。下载到项目后的运行使用你项目的依赖,与这里的规则无关。