Skip to content

依赖匹配 ​

这一页说明组件依赖与本地版本不一致时,平台如何决定「能不能渲染」。

为什么需要匹配 ​

组件在平台上预览时,使用的是你本地项目里已安装的依赖。实际情况经常是:

  • 组件要求 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. 放宽规则

版本差异不影响功能时,把规则从「完全一致」放宽到「主版本」或「自动」。

规则的作用范围 ​

依赖匹配只影响在线预览。下载到项目后的运行使用你项目的依赖,与这里的规则无关。

下一步 ​

用户上传的组件遵循开源协议