ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

lowcode-engine 资产包托管方式怎么选:项目内 assets.json、远程服务与资产管理服务

lowcode-engine 资产包托管方式怎么选:项目内 assets.json、远程服务与资产管理服务 lowcode-engine 资产包托管方式怎么选项目内 assets.json、远程服务与资产管理服务【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine在 lowcode-engine 上搭自己的低代码平台时物料组件、区块、模板都要通过一份资产包注册进引擎。资产包写好后剩下的问题就是它放在哪里、由谁更新改一份代码里的 assets.json还是放一份远程文件再或者直接上一个资产包管理服务。官方文档对这三种托管方式给出了明确的描述和取舍——从「最简单」到「再高级一点」——本文按这三种方式给出各自的配置代码、操作步骤和验证方法方便对照自己的维护频率和团队规模做选择。先明确资产包的结构三种托管方式托管的都是同一份数据协议定义见 《低代码引擎资产包协议规范》。顶层结构包含 7 方面内容version协议版本号默认 1.1.0语义化版本packages编辑器中加载的资源列表包含公共库和组件库的 CDN 资源components所有组件的描述协议列表sort描述组件面板中的 tabgroupList和 categorycategoryListplugins、setters、extConfig设计器插件、设置器及平台自定义扩展字段。手工维护资产包时物料扩展文档强调两个必须处理的对象packages定义组件包的获取方式。不定义的话引擎不会动态加载并对应上组件实例对于 UMD 包引擎会尝试在window上寻找对应library的实例components定义物料描述引擎会加载对应的 meta 文件RemoteComponentDescription的url指向资源、exportName指向window上的全局变量名并注入全局。另外自定义组件通过官方脚手架npm init alilc/element构建发布后npm 包里会生成build/lowcode/assets-prod.json把该文件的内容 merge 进你的资产包即可——这是三种托管方式共同的「素材来源」。方式一项目内维护一份 assets.json这是文档称之为「最简单的方式」官方 demo 项目lowcode-demo就是这种做法资产包作为静态文件放在工程里例如 demo 中的src/services/assets.json新增组件或组件版本更新时直接修改这份资产包随项目一起发版。注册资产包import { material } from alilc/lowcode-engine; // 以任何方式引入 assets material.setAssets(assets);也可以把资产包作为 npm 包引入alilc/mc-assets-siteId是文档示例中的包名写法siteId替换为你自己的站点标识摘自 material API 文档的示例import { material } from alilc/lowcode-engine; import assets from alilc/mc-assets-siteId/assets.json; material.setAssets(assets);如果需要支持物料本地调试用alilc/lowcode-plugin-inject处理后再设置这样预览地址加上?debug就能调试本地物料import { material } from alilc/lowcode-engine; import Inject, { injectAssets } from alilc/lowcode-plugin-inject; await material.setAssets(await injectAssets(assets));调试机制的完整配置build.json中开启inject: true、openUrl指向?debug页面等见 低代码生态脚手架 调试机制。注意若采用注入调试在saveSchema时要用filterPackages过滤掉插入的 url避免影响渲染态。验证按 快速开始 的示例路径把新组件assets-prod.json的packages与components配置追加进资产包文档建议放在最后防止资源加载顺序问题导致报错然后启动 demo组件面板中出现新物料即为生效。运行时也可以用 API 核对当前生效的资产包import { material } from alilc/lowcode-engine; material.getAssets(); // 获取当前「资产包」结构 material.getComponentsMap(); // 获取组件 map 结构局限也很直白每次新增组件或升版本都要改文件、走一次项目发布。方式二通过远程服务托管可配置的 assets.json文档的原文是「通过 oss 等服务维护一份远程可配置的 assets.json新增组件或者组件更新只需要修改这份远程的资产包项目无需更新。」资产包不再打进代码启动时动态拉取。官方 API 文档给出的动态加载写法是注册一个插件在init中 fetch 远程资产包再setAssetsimport { material, plugins } from alilc/lowcode-engine; import { IPublicModelPluginContext } from alilc/lowcode-types; // 动态加载 assets plugins.register((ctx: IPublicModelPluginContext) { return { name: ext-assets, async init() { try { // 文档示例地址请替换为你的远程资产包地址 const res await window.fetch(https://fusion.alicdn.com/assets/default0.1.95/assets.json); const assets await res.text(); material.setAssets(assets); } catch (err) { console.error(err); } }, }; }).catch(err console.error(err));代码中的 fetch 地址是文档示例必须替换为你自己在 oss 等远程服务上的资产包 URLcatch分支会把拉取失败打印到控制台这也是排查远程资产包不可达的第一落点。验证方式同方式一material.getAssets()返回的结构应当来自远端内容组件面板展示出远端定义的组件集合。相比方式一资产包内容的更新不再触发项目发版代价是资产包的可得性依赖你的远程服务。如果只需要在已有资产包基础上做局部调整API 还提供了loadIncrementalAssets增量包会与原有资产包合并例如更新特定物料的描述文件import { material } from alilc/lowcode-engine; material.loadIncrementalAssets({ version: , components: [ { componentName: Button, props: [{ name: new, title: new, propType: string }] } ], })方式三接入资产包管理服务Parts·造物文档中「再高级一点的做法是实现一个资产包管理的服务能够通过用户界面去更新资产包的内容」官方给出的现成实现是「Parts·造物」的资产包管理功能它解决的是资产包构建结果可访问下载、组件版本信息持久化并支持多人维护的问题。操作路径见 资产包管理在「我的资产包」tab 点击新建资产包填写资产包名称、配置资产包管理员初始默认为创建者可添加其他管理员、可选填描述点击确定为资产包添加组件点击资产包卡片打开组件配置弹窗选择组件后点击下一步在组件版本以及描述协议版本选择界面选择版本点击安装点击保存并构建资产包开启缓存会利用之前以包名和版本号为 key 的构建结果缓存加速生成任务描述填写构建任务说明点击确认。构建完成后会自动跳转到构建历史界面状态栏展示成功、失败、正在运行三种状态构建成功时操作列可以复制或者下载资产包结果——这就是这条路径的验证方式。拿到资产包文件后替换项目中原来的assets.json官方示例是在 lowcode-demo 的 demo-lowcode-component 中直接替换src/services/assets.json。这里有一条文档明确给出的版本限制在使用含有低代码组件的资产包时引擎版本必须大于等于1.1.0-beta.9。在预览态消费该资产包时思路是从资产包中提取并转换出ReactRenderer所需的 react 组件列表components参数把schema与components传入ReactRenderer渲染低代码组件还需要转换成 react 组件官方文档指向了 demo-lowcode-component 中src/preview.tsx和src/parse-assets.ts的完整实现可作参考。三种方式的边界与限制维度项目内 assets.json远程服务托管资产包管理服务更新物料的方式修改代码内资产包并随项目发版修改远程资产包项目无需更新通过用户界面更新构建后复制/下载结果版本信息持久化跟随代码仓库由远程服务自身管理平台持久化支持多人维护文档定位「最简单的方式」「灵活一点的做法」「再高级一点的做法」额外前提无远程地址可达注意 fetch 失败日志低代码组件要求引擎版本 ≥1.1.0-beta.9选择时按文档给出的定位对照即可物料基本固定、随平台版本一起演进用项目内 assets.json物料更新频繁、不想每次发版用远程服务多人协作、需要版本持久化和界面化管理才引入资产包管理服务。三种方式注册的最终对象一致都是material.setAssets消费的IPublicTypeAssetsJson切换托管方式不需要改动组件协议本身。几个跨方式的注意点Windows 环境使用引擎 CLI 相关工具必须走 WSL官方未对 Windows 做适配资产包变更可用material.onChangeAssets监听回调在 assets 变化时触发若资产包信息是动态的按 接入运行时 的说明你通常还需要一个后端来保存资产包信息渲染模块会依据assets与页面componentsMap加载依赖资源。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表