本地引用低代码组件包

对于已经上架物料市场的组件包，我们可以通过在 IDE 里的物料市场直接安装即可使用。

而对于一些没有上架到物料市场的第三方组件包，我们可以在本地开发模式下通过一些配置和命令引用这些组件包。

这里以低代码开发 IDE 自身对外暴露的组件包 @fly-vue/lcdp-ide 为例，介绍如何为应用实例添加该依赖。

@fly-vue/lcdp-ide 是低代码开发 IDE 将内部组件拆分成独立组件并对外暴露的组件包。

目前该组件包对外暴露的组件有页面设计器、流程设计器、编排设计器、页面管理器等组件，并且还在持续增加。

添加前端依赖

在本地开发模式下，打开项目的前端依赖文件 ui/package.json ，添加以下两行高亮显示的代码：

{
  ...
  "scripts": {
    ...
    "copyUiModules": "fly copyUiModules --config ./build/config.js --to ../app/ui/modules"
  },
  "dependencies": {
    ...
    "@fly-vue/lcdp-ide": "1.8.0-snapshot",
    ...
  },
  ...
}

@fly-vue/lcdp-ide 的版本注意要跟其他以 @fly-vue/ 开头的依赖保持一致。以上代码中的 1.8.0-snapshot 只是示例。

再打开 ui/build/config.js 文件，添加以下配置：

module.exports = {
  ...,
  uiModules: ['@fly-vue/lcdp-ide']
}

如果 uiModules 配置项已存在且有值，注意要将依赖包合并到同一数组中。

打包依赖到后端

两个文件都修改完毕后，打开命令行终端，cd 到项目的 ui 目录，按顺序执行以下两个命令：

# 安装前端依赖
npm i --legacy-peer-deps

# 将前端依赖打包给后端
npm run copyUiModules

重启本地后端服务器，打开 IDE 后，我们将可以在组件列表中找到该组件包提供的组件：

组件包提供的组件所在的分组由组件作者决定，如果找不到组件可以尝试在组件列表中搜索。