脚手架简述

在 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 init @alilc/element your-element-name --registry=https://registry.npmmirror.com

选择对应的元素类型，并填写对应的问题，即可完成创建。
截屏2022-02-09 下午8.15.07.png

脚手架本地环境调试

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

脚手架构建

  1. $ npm run build

脚手架发布

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

  1. $ npm publish

🔥在低代码引擎项目中调试物料/插件/设置器🔥

📢📢 📢 低代码生态脚手架提供的调试利器，在启动 setter/插件/物料 项目后，直接在已有的低代码平台就可以调试，不需要 npm link / 手改 npm main 入口等传统方式，轻松上手，强烈推荐使用！！

标准组件

脚手架默认产生的组件不需要做任何改造

1.在预览地址加上 ?debug

例如： https://lowcode-engine.cn/demo/index.html?debug

2.如果没有注册

打开控制台
image.png

在新的浏览器点开 js 链接。

组件/插件/Setter 侧

  1. 插件/setter 在原有 alt 的配置中添加相关的调试配置

    1. // build.json 中
    2. {
    3. "plugins": [
    4.  [
    5.    "@alilc/build-plugin-alt",
    6.    {
    7.      "type": "plugin",
    8.      "inject": true, // 开启注入调试
    9.      // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
    10.      // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
    11.      "openUrl": "https://lowcode-engine.cn/demo/index.html?debug" 
    12.    }
    13.  ],
    14. ]
    15. }

  2. 组件需先安装 @alilc/build-plugin-alt，再将组件内的 build.lowcode.js文件修改如下 ```javascript const { library } = require(‘./build.json’);

module.exports = { alias: { ‘@’: ‘./src’, }, plugins: [ ‘@alifd/build-plugin-lowcode’, [ ‘@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“ } ]], };

  2. 3. 本地组件/插件/Setter正常启动调试，在项目的访问地址增加 debug query，即可开启注入调试。
  3. ```typescript
  4. http://localhost:5556?debug

项目侧的准备

如果你的低代码项目 fork 自官方 demo，那么项目侧的准备已经就绪，不用再看以下内容~

  1. 安装 @alilc/lowcode-plugin-inject

    npm i @alilc/lowcode-plugin-inject  --save-dev

  2. 在引擎初始化侧引入插件 ```json import Inject, { injectAssets } from ‘@alilc/lowcode-plugin-inject’;

export default async () => { // 注意 Inject 插件必须在其他插件前注册，且所有插件的注册必须 await await plugins.register(Inject); await plugins.register(OtherPlugin); await plugins.register((ctx: ILowCodePluginContext) => { return { name: “editor-init”, async init() { // 设置物料描述前，使用插件提供的 injectAssets 进行处理 const { material, project } = ctx; material.setAssets(await injectAssets(assets)); }, }; }); }


3. 在 saveSchema 时过滤掉插入的url，避免影响渲染态
```javascript
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)
  );
  // ...
};
  1. 如果希望预览态也可以注入调试组件，则需要在 preview 逻辑里插入组件 ```javascript import { injectComponents } from ‘@alilc/lowcode-plugin-inject’;

async function init() { // 在传递给 ReactRenderer 前，先通过 injectComponents 进行处理 const components = await injectComponents(buildComponents(libraryMap, componentsMap)); // … } ```