
lowcode-engine 低代码生态脚手架与注入调试机制从 npm init alilc/element 到 ?debug 热调试物料/插件/设置器【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本文围绕 lowcode-engine 官方的《低代码生态脚手架 调试机制》文档展开系统讲解如何用alilc/create-element脚手架初始化组件/插件/设置器扩展以及引擎社区推荐的“注入调试”机制本地启动物料项目后无需npm link或手改 npm main 入口直接在带?debug参数的低代码项目中热调试扩展元素并解释alilc/lowcode-plugin-inject提供的injectAssets、filterPackages、injectComponents三个 API 如何与引擎的资产包协议IPublicTypeAssetsJson协作。读完后你能够独立完成一个低代码生态元素的创建、调试、构建、发布全流程并在项目侧正确接入注入调试。1. 脚手架定位扩展 lowcode-engine 的两种路径lowcode-engine 是一套面向扩展设计的企业级低代码技术体系见 README-zh_CN.md。围绕它做扩展有两条互补的路径Fork 官方 demo 项目在 fork 的低代码编辑器 demo 项目中可以直接以源码方式任意扩展编辑器注册插件、定制物料、接入资产包等发布独立 npm 包当你希望把自己的组件物料/插件/设置器封装成独立的 npm 包并提供给社区时需要使用官方低代码脚手架建立低代码扩展项目产出可发布、可被任意低代码项目消费的包。本文的主题即第 2 条路径的完整工作流。脚手架产出的生态元素element包括三类组件component即物料、插件plugin、设置器setter。环境前提Windows 开发者请在 WSLWindows Subsystem for Linux环境下使用开发工具Windows 原生终端不保证 CLI 能正常运行。2. 脚手架初始化npm init alilc/element初始化命令npm init alilc/element your-element-name不写your-element-name时脚手架会在当前目录直接创建项目交互式流程中需要选择对应的元素类型组件 / 插件 / 设置器等并按提示填写名称、描述等问题即可完成创建。2.1 常见初始化报错与加速技巧报错sh: create-element: command not foundnpm init alilc/element底层依赖alilc/create-element提供的 bin 命令首次使用或全局环境缺失该命令时会出现此错误。先全局安装即可npm install -g alilc/create-element安装速度慢可以为 npm 设置国内镜像以 npmmirror 为例直接通过--registry透传给底层安装器npm init alilc/element your-element-name --registryhttps://registry.npmmirror.com2.2 本地环境调试、构建与发布初始化完成后脚手架项目遵循标准的 npm 工作流cd your-element-name npm install # 安装依赖 npm start # 启动本地开发环境含预览npm run build # 构建产物npm publish # 修改版本号后执行发布到 npm需要说明的是alilc/create-element与构建插件alilc/build-plugin-alt的源码并不在本仓库内而是位于官方 lowcode-tools 仓库本仓库的 NPM 包对应源码位置汇总 明确列出了它们的来源包名所在仓库路径alilc/build-plugin-altalibaba/lowcode-toolspackages/build-plugin-altalilc/create-elementalibaba/lowcode-toolspackages/create-elementalilc/lowcode-plugin-injectalibaba/lowcode-toolspackages/lowcode-plugin-inject因此本文中的脚手架参数以官方文档约定为准调试机制中与引擎交互的部分则可以直接在本仓库源码中找到实现对应。3. 注入调试机制在已有低代码项目中调试物料/插件/设置器这是脚手架文档中最具价值的部分低代码生态脚手架提供了“注入调试”利器。在启动 setter/插件/物料 项目后直接在已有的低代码平台例如官方 demo 项目就可以调试不需要npm link/ 手改 npm main 入口等传统方式。整体机制分两侧配置元素侧组件/插件/设置器项目通过alilc/build-plugin-alt开启inject: true本地启动的构建产物可以被远端项目动态加载项目侧低代码编辑器项目引入alilc/lowcode-plugin-inject插件在页面 URL 带?debug参数时把资产包/组件资源指向本地开发服务器的地址。3.1 插件 / Setter 侧配置在插件或设置器项目的build.json中为alilc/build-plugin-alt插件添加调试配置// build.json 中 { plugins: [ [ alilc/build-plugin-alt, { type: plugin, inject: true, // 开启注入调试 // 配置要打开的页面在注入调试模式下不配置此项的话不会打开浏览器 // 支持直接使用官方 demo 项目https://lowcode-engine.cn/demo/index.html openUrl: https://lowcode-engine.cn/demo/index.html?debug } ] ] }关键参数type元素类型插件为plugininject: true开启注入调试。这是整个调试机制的开关没有它本地构建产物不会被远端项目拦截加载openUrl本地npm start后自动打开的目标页面。注意在注入调试模式下不配置openUrl的话启动后不会自动打开浏览器。可以直接填官方 demo 项目的地址并在 URL 上带?debug参数以触发项目侧的注入逻辑。3.2 组件物料侧配置物料比插件/设置器多一步需要先安装alilc/build-plugin-alt然后把组件项目内的build.lowcode.js修改为const { library } require(./build.json); module.exports { alias: { : ./src, }, plugins: [ [ // lowcode 的配置保持不变这里仅为示意。 alifd/build-plugin-lowcode, { library, engineScope: alilc }, ], [ alilc/build-plugin-alt, { type: component, inject: true, library, // 配置要打开的页面在注入调试模式下不配置此项的话不会打开浏览器 // 支持直接使用官方 demo 项目https://lowcode-engine.cn/demo/index.html openUrl: https://lowcode-engine.cn/demo/index.html?debug } ]], };相比插件侧组件侧额外传入了libraryUMD 全局变量名。这与资产包协议中packages的加载方式一致低代码引擎对 UMD 包会“尝试在 window 上寻找对应 library 的实例”library就是本地构建产物挂载到全局的命名空间注入调试时项目侧据此把 window 上的本地实现替换进组件运行时。该约定在仓库文档 物料扩展 中也有同样说明此外 图物料开发文档 也给出了相同结论——“物料想要支持被项目动态 inject 调试须在build.lowcode.js中加入alilc/build-plugin-alt且inject: true”可见这是所有物料类型支持注入调试的统一要求。3.3 启动调试与 ?debug 入口两侧配置完成后本地组件/插件/Setter 正常启动调试npm start/npm run lowcode:dev然后在项目的访问地址增加debugquery 参数即可开启注入调试https://lowcode-engine.cn/demo/demo-general/index.html?debug此时远端项目会检测到调试态将其资产包中对应元素的资源 URL 重写为本地开发服务器地址从而在官方 demo或你自己的低代码平台中直接使用本地物料/插件/设置器的实时构建产物——改一行代码、热更新画布上立即生效。4. 项目侧的准备接入 alilc/lowcode-plugin-inject如果你的低代码项目 fork 自官方 demo那么项目侧的准备已经就绪无需再看本节。自定义项目需要完成四步接入4.1 安装插件npm i alilc/lowcode-plugin-inject --save-dev4.2 在引擎初始化侧注册 Inject 插件import Inject, { injectAssets } from alilc/lowcode-plugin-inject; import { IPublicModelPluginContext } from alilc/lowcode-types; export default async () { // 注意 Inject 插件必须在其他插件前注册且所有插件的注册必须 await await plugins.register(Inject); await plugins.register(OtherPlugin); await plugins.register((ctx: IPublicModelPluginContext) { return { name: editor-init, async init() { // 设置物料描述前使用插件提供的 injectAssets 进行处理 const { material, project } ctx; material.setAssets(await injectAssets(assets)); }, }; }); }两个硬性约束值得强调Inject必须第一个注册且所有plugins.register都要await——否则后续插件初始化时资产包尚未完成注入改写调试逻辑不生效必须在material.setAssets(assets)之前用injectAssets(assets)处理资产包。injectAssets是一个 async 转换函数调试态URL 带?debug下它会按各元素本地构建产物提供的信息把packages/components中相关资源的 URL 替换为本地开发地址非调试态下原样返回。这一步与引擎源码直接对应。在本仓库中material对象由 ShellMaterial API 实现setAssets(assets)设置「资产包」结构底层写入 editor 的assets值packages/shell/src/api/material.tsgetAssets()读取 editor 中缓存的资产包onChangeAssets(fn)监听 assets 变化包含setAssets赋值与loadIncrementalAssets增量赋值两条路径packages/shell/src/api/material.ts。也就是说injectAssets的作用点正是setAssets之前对IPublicTypeAssetsJson的预改写。资产包协议本身在本仓库的类型定义中可以完整看到packages/types/src/shell/type/assets-json.tsexport interface IPublicTypeAssetsJson { version: string; // 资产包协议版本号 packages?: IPublicTypePackage[]; // 大包列表 components: ArrayIPublicTypeComponentDescription | IPublicTypeRemoteComponentDescription; sort?: IPublicTypeComponentSort; // 描述组件面板的 tab 和 category }injectAssets改写的主要就是其中的packagesUMD 包资源地址与components物料描述 meta 地址两类 URL 字段。相关的资源分层模型Environment / Library / Theme / Runtime / Components / App定义见 packages/types/src/assets.ts。4.3 保存 schema 时过滤注入的 URL调试态下资产包里混入了本地开发地址保存 schema 时必须过滤掉否则线上渲染态会去请求本地调试地址import { filterPackages } from alilc/lowcode-plugin-inject; export const saveSchema async () { // ... const packages await filterPackages(editor.get(assets).packages); window.localStorage.setItem( packages, JSON.stringify(packages), ); // ... };filterPackages的输入正是editor.get(assets)中的packages数组对应 4.2 节IPublicTypeAssetsJson.packages字段它会剔除被注入的本地调试资源保证持久化的资产包干净。4.4 预览态注入可选如果希望预览态渲染态页面也能注入调试组件需要在 preview 逻辑里显式处理组件集合import { injectComponents } from alilc/lowcode-plugin-inject; async function init() { // 在传递给 ReactRenderer 前先通过 injectComponents 进行处理 const components await injectComponents(buildComponents(libraryMap, componentsMap)); // ... }buildComponents(libraryMap, componentsMap)是官方 demo 中“把packages里的 UMD library 与componentsMap组装成可用组件列表”的步骤injectComponents在其结果之上做注入改写使预览态渲染也使用本地物料。设计态物料调试的标准用法可对照 物料扩展文档 中的“以支持调试的方式注册资产包”一节await material.setAssets(await injectAssets(assets))两者是同一机制在设计态的不同落点。4.5 常见问题控制台报资源未注入若控制台出现“未检测到注入信息”类错误即本地元素项目已开启inject: true启动但项目侧尚未建立注入会话直接访问一次该 url 即可——首次访问会在本地开发服务器与调试项目之间完成一次注入握手写入调试映射信息之后刷新即可正常命中本地资源。5. Meta 信息生态元素的包级描述meta 信息是放在生态元素package.json中的一小段 JSON让用户通过 meta 了解这个元素的基本信息如元素类型、入口信息等。官方约定的接口形态为interface LcMeta { type: plugin | setter | component; // 元素类型尚未实现 pluginName: string; // 插件名仅插件包含 meta: { dependencies: string[]; // 插件依赖的其他插件列表仅插件包含 engines: { lowcodeEngine: string; // 适配的引擎版本 } prototype: string; // 物料描述入口仅组件包含尚未实现 prototypeView: string; // 物料设计态入口仅组件包含尚未实现 } }字段解读type区分三类生态元素component / plugin / setterpluginName与meta.dependencies仅插件包含声明插件名及其依赖的其他插件可用于插件装配时的依赖检查meta.engines.lowcodeEngine声明适配的引擎版本类似 npm 的 engines 语义meta.prototype/prototypeView分别指向物料的描述入口meta.js即资产包components中的物料描述与设计态入口编辑态视图。从接口注释看type、prototype、prototypeView在官方文档中均标注“尚未实现”即该段 meta 目前主要作为包级信息的声明与约定存在消费方应以资产包协议IPublicTypeAssetsJson作为引擎实际消费物料的结构meta 则是面向生态治理检索、版本适配、依赖分析的补充元信息。6. 小结与延伸阅读把整条链路串起来npm init alilc/element初始化元素项目Windows 用 WSL缺命令时先npm install -g alilc/create-element元素侧在build.json/build.lowcode.js中为alilc/build-plugin-alt配置inject: true组件需补library与openUrl带?debug项目侧安装并注册alilc/lowcode-plugin-injectInject插件最先注册setAssets前用injectAssets改写资产包保存时用filterPackages清洗packages预览态用injectComponents访问项目地址加?debug即可在既有低代码平台中热调试本地物料/插件/设置器npm run build 修改版本号 npm publish完成生态发布包内 meta 按LcMeta约定声明类型与入口。延伸阅读均为本仓库内路径物料扩展资产包结构、物料描述与组件低代码化lowcode:dev/lowcode:build完整流程物料描述详解alilc/lowcode-material-parser自动生成物料描述与configure手工配置NPM 包对应源码位置汇总alilc/lowcode-engine系列包与 packages/ 目录的对应关系以及 build-plugin-alt / lowcode-plugin-inject 所在的 lowcode-tools 仓库位置图物料开发图场景物料inject: true配置与?debug调试入口的另一种落地。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考