低代码脚手架

脚手架简述

在 fork 低代码编辑器 demo 项目后，您可以直接在项目中任意扩展低代码编辑器。如果您想要将自己的组件/插件/设置器封装成一个独立的 npm 包并提供给社区，您可以使用我们的低代码脚手架建立低代码扩展。

Windows 开发者请在 WSL 环境下使用开发工具

WSL 中文 doc：https://docs.microsoft.com/zh-cn/windows/wsl/install
中文教程：https://blog.csdn.net/weixin_45027467/article/details/106862520

脚手架功能

脚手架初始化

  1. $ npm init @alilc/element your-element-name

不写 your-element-name 的情况下，则在当前目录创建。

觉得安装速度比较慢的同学，可以设置 npm 国内镜像，如

  1. npm config set registry https://registry.npmmirror.com

选择对应的元素类型，并填写对应的问题，即可完成创建。

低代码脚手架 - 图1

脚手架本地环境调试

  1. cd your-element-name
  2. npm install
  3. npm start

脚手架构建

  1. $ npm run build

脚手架发布

修改版本号后，执行如下指令即可：

  1. $ npm publish

🔥🔥🔥 注入调试 - 在已有低代码引擎项目中调试

项目侧的准备

如果你的低代码项目 fork 自官方 demo，那么项目侧的准备已经就绪

  1. 安装 @alilc/lowcode-plugin-inject
  1. npm i @alilc/lowcode-plugin-inject  --save-dev
  1. 在引擎初始化侧引入插件
  1. import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject';
  3. export default async () => {
  4.   // 注意 Inject 插件必须在其他插件前注册，且所有插件的注册必须 await
  5.   await plugins.register(Inject);
  6.   await plugins.register(OtherPlugin);
  7.   await plugins.register((ctx: ILowCodePluginContext) => {
  8.     return {
  9.       name: "editor-init",
  10.       async init() {
  11.         // 设置物料描述前，使用插件提供的 injectAssets 进行处理
  12.         const { material, project } = ctx;
  13.         material.setAssets(await injectAssets(assets));
  14.       },
  15.     };
  16.   });
  17. }
  1. 在 saveSchema 时过滤掉插入的url，避免影响渲染态
  1. import { filterPackages } from '@alilc/lowcode-plugin-inject';
  2. export const saveSchema = async () => {
  3.   // ...
  4.   const packages = await filterPackages(editor.get('assets').packages);
  5.   window.localStorage.setItem(
  6.     'packages',
  7.     JSON.stringify(packages)
  8.   );
  9.   // ...
  10. };
  1. 如果希望预览态也可以注入调试组件，则需要在 preview 逻辑里插入组件
  1. import { injectComponents } from '@alilc/lowcode-plugin-inject';
  3. async function init() {
  4.     // 在传递给 ReactRenderer 前，先通过 injectComponents 进行处理
  5.   const components = await injectComponents(buildComponents(libraryMap, componentsMap));
  6.     // ...
  7. }

组件/插件/Setter 侧

  1. 插件/setter 在原有 alt 的配置中添加相关的调试配置
  1. // build.json 中
  2. {
  3.   "plugins": [
  4.     [
  5.       "@alilc/build-plugin-alt",
  6.       {
  7.         "type": "plugin",
  8.         "inject": true, // 开启注入调试
  9.         "openUrl": "http://localhost:3333?debug" // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
  10.       }
  11.     ],
  12.   ]
  13. }
  1. 组件需先安装 @alilc/build-plugin-alt，再将组件内的 build.lowcode.js文件修改如下
  1. module.exports = {
  2.   alias: {
  3.     '@': './src',
  4.   },
  5.   plugins: [
  6.     '@alifd/build-plugin-lowcode',
  7.     [
  8.       '@alilc/build-plugin-alt',
  9.       {
  10.         type: 'component',
  11.         inject: true,
  12.       }
  13.     ]],
  14. };
  1. 本地组件/插件/Setter正常启动调试，在项目的访问地址增加 debug query，即可开启注入调试。
  1. http://localhost:3001?debug