LowCode Engine 自定义物料渲染中 Fusion 组件库的必要性解析

在使用阿里巴巴开源的 LowCode Engine 进行可视化开发时，开发者经常会遇到需要自定义物料资源的情况。本文将以一个典型问题为例，深入分析在自定义 Ant Design 组件物料时为何必须包含 Fusion 组件库（@alifd/next），以及如何正确配置这一依赖关系。

问题现象

当开发者尝试使用自定义打包的 Ant Design 组件物料时，如果不包含 Fusion 组件库的配置，控制台会抛出"Uncaught TypeError: Cannot read properties of undefined (reading 'Menu')"的错误。这表明渲染过程中某个关键依赖缺失，导致组件无法正常初始化。

根本原因

经过分析，这个问题源于 LowCode Engine 渲染器的实现机制：

1. 历史依赖关系：LowCode Engine 的渲染器在早期版本中直接依赖了 Fusion 组件库（Next）的部分功能
2. 模块化设计：渲染器将 Next 作为外部依赖（external）处理，预期运行时环境中必须存在这个库
3. 兼容性考虑：即使项目只使用 Ant Design 组件，渲染器内部可能仍会调用 Next 提供的某些基础功能

解决方案

开发者可以通过以下两种方式解决这个问题：

方案一：在资产配置中显式声明

在 assets.json 文件中明确添加 Fusion 组件库的配置项：

{
  "title": "fusion组件库",
  "package": "@alifd/next",
  "version": "1.26.4",
  "urls": [
    "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css",
    "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js"
  ],
  "library": "Next"
}

方案二：在构建配置中内置

对于自定义物料项目，可以在 build.lowcode.js 文件的 builtinAssets 配置中添加：

builtinAssets: [
  {
    packages: [
      {
        "title": "fusion组件库",
        "package": "@alifd/next",
        "version": "1.26.4",
        "urls": [
          "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css",
          "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js"
        ],
        "library": "Next"
      }
    ],
    components: []
  }
]

技术建议

1. 版本一致性：建议保持 Fusion 组件库版本与 LowCode Engine 官方推荐的版本一致（如示例中的 1.26.4）
2. 资源优化：如果项目确实不需要 Fusion 组件，可以考虑定制渲染器去除相关依赖
3. 长期规划：随着 LowCode Engine 的迭代，这种强依赖关系可能会被解耦，建议关注官方更新日志

总结

理解 LowCode Engine 的内部依赖关系对于自定义物料开发至关重要。虽然表面上看起来 Ant Design 和 Fusion 是两个独立的组件库，但由于历史架构原因，当前版本的渲染器仍然需要 Fusion 作为基础依赖。开发者应当根据项目实际情况选择合适的配置方案，确保可视化编辑和渲染功能正常工作。