阿里低代码引擎官方提供的[lowcode-demo](https://github.com/alibaba/lowcode-demo)几个案例，是立即上手低代码引擎开发的绝佳案例，在这里跟分享一下我阅读源码时候的理解。 ## 这篇文章的主要内容有：接下来，我会从以下几个方面，谈谈我对[lowcode-demo](https://github.com/alibaba/lowcode-demo)的理解。 ![lowcode-engine-demo-tutorial.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca09b54e6d02458982db338f7ec2d123~tplv-k3u1fbpfcp-watermark.image?) ### 1. package.json，代码阅读从这里开始现在阅读前端的源代码，差不多都要从package.json开始吧。使用 `git clone https://github.com/alibaba/lowcode-demo`命令下载完lowcode-demo源代码之后，作为一个前端开发，我第一个念头就是查看package.json、把相关的依赖安装上、然后在本地跑起来。首先打开package.json，很快找到了三个我最关心的部分：scripts、dependencies、devDependencies。 ```json "scripts": { "start": "build-scripts start --disable-reload --port 5556", "build": "build-scripts build", "prepublishOnly": "npm run build", "pub": "node ./scripts/watchdog.js && npm pub" } ``` 嗯，scripts里面第一行、就有我熟悉的“start”命令，看来安装完依赖之后，就可以使用`npm start`把项目跑起来了。 “start”这里使用了一个叫做“build-scripts”的东西，这个之前从来没有用过，翻了翻lowcode-demo当前文件夹，分别有2个叫做build.json、build.plugin.js的配置文件，看来这又是另一个对Webpack进行封装的命令行工具，就像我常常用到的umi。 ```json "dependencies": { "@alilc/lowcode-plugin-code-editor": "^1.0.1", "@alilc/lowcode-plugin-code-generator": "^1.0.2", "@alilc/lowcode-plugin-components-pane": "^1.0.2", "@alilc/lowcode-plugin-datasource-pane": "^1.0.3", "@alilc/lowcode-plugin-inject": "^1.0.0", "@alilc/lowcode-plugin-manual": "^1.0.2", "@alilc/lowcode-plugin-schema": "^1.0.0", "@alilc/lowcode-plugin-simulator-select": "^1.0.0", "@alilc/lowcode-plugin-undo-redo": "^1.0.0", "@alilc/lowcode-plugin-zh-en": "^1.0.0", "@alilc/lowcode-react-renderer": "^1.0.0", "@alilc/lowcode-setter-behavior": "^1.0.0", "@alilc/lowcode-setter-title": "^1.0.2" } ``` 看到dependencies里面，整齐一溜排开的“@alilc/lowcode-plugin-XXX”依赖，说实话我是大开眼界——整个低代码应用全都是插件化的呀。我之前使用过别人开发的插件，比如VS Code插件，Chrome浏览器扩展，Webpack插件，看来现在做一个Web前端应用、也可以使用插件方式进行开发呀。这么说的话，接下来要对低代码引擎进行扩展，也是需要使用他的插件写法。其实关于微内核架构/插件式扩展，我个人还是非常感兴趣的，接下来阅读引擎源码的时候、可以分析一下它的实现。 ```json "devDependencies": { "@alib/build-scripts": "^0.1.18", "@alilc/lowcode-engine": "^1.0.0", "@alilc/lowcode-engine-ext": "^1.0.0", "@alilc/lowcode-types": "^1.0.0", "@types/events": "^3.0.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", "@types/streamsaver": "^2.0.0", "build-plugin-fusion": "^0.1.0", "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "fs-extra": "^10.0.1", "tsconfig-paths-webpack-plugin": "^3.2.0" } ``` 再看devDependencies，有scripts中的那个build-scripts工具的依赖——嗯，这个在预料之中；然后再有就是低代码引擎的主包[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine/tree/main/packages/engine)和扩展包[@alilc/lowcode-engine-ext](https://github.com/alibaba/lowcode-engine-ext)——嗯，这个可以理解；还有react和react-dom的Typescript类型描述依赖——嗯，现在Typescript已经流行起来了，类型描述也确实有用，方便代码提示、代码自动补全、看各个方法参数啥的；再接下来几个build-plugin-XXX——嗯，估计是build-scripts的扩展插件。好了，package.json看完了，打开我本地VS Code的终端，然后执行`yarn`命令安装所有dependencies、devDependencies的依赖，等待安装完依赖之后、再执行`npm start`，就看到我的浏览器自动打开了“”——嗯，低代码引擎的官方Demo、就算在我本地正常启动起来了。 ```bash yarn npm start Starting the development server at: - Local : http://localhost:5556/ - Network: http://192.168.1.9:5556/ ``` 仔细观察build.json里面Webpack相关的配置，虽然格式是JSON格式，写法上跟平时的webpack.config.js文件有些不一样，但是配置项还是Webpack的那些配置项，我还能理解它的意图，立马从“entry”中发现了项目的一个入口文件`./src/preview.tsx`。 build.json还引用了一个build.plugin.js文件，仔细看里面的代码、它又往“entry”里面添加了几个入口文件，而且都在`./src/scenarios/`文件夹，那么我就顺藤摸瓜、接下来就看看这个文件夹里面的各个入口文件。 ### 2. src/scenarios/*，初始化低代码引擎编辑器的2种方式顺藤摸瓜、看到了这个项目入口文件夹，仔细阅读里面的代码，发现他提供了初始化低代码引擎的2种实现方式。翻了翻这个`./src/scenarios/`文件夹里面的各个index.ts(x)文件，仔细对比了各个index.ts(x)文件里面的内容之后，发现代码整体上的流程都差不多，以src/scenarios/index/index.ts文件为例：（1）首先引入了来自低代码引擎主包[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine)的2个方法[init](https://lowcode-engine.cn/docV2/dffghx), [plugins](https://lowcode-engine.cn/docV2/ibh9fh)——看过[官方文档](https://lowcode-engine.cn/docV2/dffghx)了解到，[init](https://lowcode-engine.cn/docV2/dffghx)是用来初始化低代码引擎的，[plugins](https://lowcode-engine.cn/docV2/ibh9fh)是用来管理/注册插件的； ```typescript import { init, plugins } from '@alilc/lowcode-engine'; ``` （2）其次引入了本地的相关插件，比如来自universal/plugin中的插件，因为低代码引擎的扩展、都是通过插件的形式来扩展的，所以这个文件夹的代码、接下来需要重点读一读； ```typescript import registerPlugins from '../../universal/plugin'; import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; import '../../universal/global.scss'; ``` （3）接下来声明了一个常量preference，看样子应该是给一个叫做DataSourcePane的插件传递参数用的，就像Webpack一样，可以给各个插件传递参数啥的，看英文名称“DataSourcePane”应该是跟数据源相关； ```typescript const preference = new Map(); preference.set('DataSourcePane', { importPlugins: [], dataSourceTypes: [ { type: 'fetch', }, { type: 'jsonp', } ] }); ``` （4）最后是一个名字叫main的立即执行函数，用async进行了修饰，看来里面的好多方法的调用都是异步的。 ```typescript (async function main() { await plugins.register(scenarioSwitcher); await registerPlugins(); init(document.getElementById('lce-container')!, { // designMode: 'live', // locale: 'zh-CN', enableCondition: true, enableCanvasLock: true, // 默认绑定变量 supportVariableGlobally: true, // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 simulatorUrl: [ 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js' ] }, preference); })(); ``` 在这个立即执行函数main里面，首先看到使用引擎主包[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine)里面的[plugins.register](https://lowcode-engine.cn/docV2/ibh9fh)方法注册了一个scenarioSwitcher组件，看了看这个组件的实现，是用来切换各个src/scenarios各个入口的，方法使用await修饰，看来这个注册插件过程是一个异步操作，而且接下来的这个registerPlugins方法也是这样。再接下来，就使用了引擎主包[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine)里面的[init](https://lowcode-engine.cn/docV2/dffghx)方法进行编辑器的初始化了。第一个参数是一个DOM节点，通过阅读build.pluglin.js的Webpack的HTMLWebpackPlugin配置了解到，scenarios各个入口文件的HTML模板是public/index.ejs，在index.ejs的body里面有且只有一个id为“lce-container”的div元素，低代码引擎编辑器作为一个React应用，在运行的时候、看来是挂载到这里了。第二个参数，看起来是给编辑器传递参数的，可以深入[看看API文档](https://lowcode-engine.cn/docV2/dffghx)，了解一下其他参数。注意到simulatorUrl里面是两个URL地址，看来低代码编辑器的画布区域，也是在这里、从外部扩展的，这里引用的是[react-simulator-renderer](https://github.com/alibaba/lowcode-engine/tree/main/packages/react-simulator-renderer)，是官方提供的React的模拟器，而群里面的小伙伴，有人在做Vue的扩展，之后估计还会有Angular的、Svelte的等等。稍微有些不一样的，是src/scenarios/custom-initialization/index.tsx文件里面的初始化方式，这里没有使用引擎主包[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine)里面的init方法进行初始化，而是通过自定义了一个EditorView的组件、使用了common.skeletonCabin.Workbench进行了初始化，然后自己调用ReactDOM.render将应用挂载到document.getElementById('lce-container')节点上。 ```typescript (async function main() { await plugins.register(scenarioSwitcher); await registerPlugins(); const Workbench = common.skeletonCabin.Workbench; function EditorView() { /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */ const [hasPluginInited, setHasPluginInited] = useState(false); useEffect(() => { plugins.init(preference).then(() => { setHasPluginInited(true); }).catch(err => console.error(err)); }, []); return hasPluginInited && ; } config.setConfig({ // designMode: 'live', // locale: 'zh-CN', enableCondition: true, enableCanvasLock: true, // 默认绑定变量 supportVariableGlobally: true, // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 simulatorUrl: [ 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js' ] }) ReactDOM.render(, document.getElementById('lce-container')!); })(); ``` 通过[官方文档](https://lowcode-engine.cn/docV2/start-with-lce)了解到，这种使用React自定义组件进行初始化的方式，可以跟应用的其他组件进行通信，比如使用Dva/Redux里面的数据等等。嗯，熟悉的感觉回来了，之前的React开发经验在这里就可以复用了。 ### 3. src/universal/*，各个插件资源在这里加载了解到低代码引擎编辑器的初始化方式之后，接下来就重点关注怎么扩展他了。以其中一个入口文件src/scenarios/index/index.ts为例，看到低代码引擎编辑器初始化那些插件，差不多都是来自src/universal/plugin.tsx，那就先打开这个文件看看。 ```typescript import React from 'react'; import { ILowCodePluginContext, plugins, skeleton, project, setters, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; ``` 代码文件开头引用了[@alilc/lowcode-engine](https://github.com/alibaba/lowcode-engine)的几个API接口，[plugins](https://lowcode-engine.cn/doc?url=ibh9fh)，[project](https://lowcode-engine.cn/doc?url=dcrbff)，[skeleton](https://lowcode-engine.cn/docV2/bv3und)和[setters](https://lowcode-engine.cn/docV2/xwnsu3)。 [plugins](https://lowcode-engine.cn/doc?url=ibh9fh)是用来管理/注册插件的，我们知道，对低代码引擎的所有扩展，都是通过插件来实现的。 [project](https://lowcode-engine.cn/doc?url=dcrbff)是对可视化搭建的模型设计，了解面向对象的同学应该能意识到，这是在对“可视化搭建”进行“业务建模”。这个部分的重要程度，可以按照[官方文档](https://lowcode-engine.cn/docV2/af3dxw)的说法：“编排的本质是生产符合《阿里巴巴中后台前端搭建协议规范》的数据”。而这个这个[project](https://lowcode-engine.cn/doc?url=dcrbff)模型，应该就是协议规范的代码实现。 [skeleton](https://lowcode-engine.cn/docV2/bv3und)是用来扩展和管理面板的，而所谓的面板，就是下图蓝色标记的区域： ![Lowcode Engine Architecture Overview](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35a139b1889146959d738ccdf4cfda93~tplv-k3u1fbpfcp-zoom-1.image) [setters](https://lowcode-engine.cn/docV2/xwnsu3)是用来注册和管理设置器的。我们作为一个前端都知道，我们封装完一个组件之后，往往需要别人传入一些props、来进行组件的使用。而这个setters设置器，就是用来给组件设置props参数的。因为props参数是有类型的，而且类型是多种多样的——比如string、number、boolean、object、array、function等等——所以setters也就多种多样。 [@alilc/lowcode-engine-ext](https://github.com/alibaba/lowcode-engine-ext)是低代码引擎的扩展包，这里面提供的、就是官方提供的各种各样的[setters](https://lowcode-engine.cn/docV2/xwnsu3)。再接着往下读，发现package.json里面的那“一溜排开”的“lowcode-plugin-XXX”插件，又整齐的在这里“一溜排开”地被import引用了： ```typescript import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator'; import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; import SchemaPlugin from '@alilc/lowcode-plugin-schema'; import CodeEditor from "@alilc/lowcode-plugin-code-editor"; import ManualPlugin from "@alilc/lowcode-plugin-manual"; import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; ``` 这些插件的源代码，可以在Github的[alibaba/lowcode-plugins](https://github.com/alibaba/lowcode-plugins)代码仓库里面找到，如果没有找到，比如lowcode-plugin-simulator-select，也是可以在node_modules里面读取到源代码，清晰可读： ![Lowcode Engine Architecture Overview](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a97fd291392f4543bd63adbdce6d6b1a~tplv-k3u1fbpfcp-zoom-1.image) 在src/universal/plugin.tsx文件的最后，在registerPlugins方法中，可以看到这些插件被一一注册到plugins中。 ```typescript export default async function registerPlugins() { await plugins.register(ManualPlugin); await plugins.register(Inject); // ... 其他插件的注册 }; ``` 既然在低代码引擎中，所有的扩展都是通过写插件来实现的，那么咱们就仔细看看一个插件式怎么实现的。 ### 4. src/sample-plugins/*，一个plugin插件是怎么开发的既然对低代码引擎进行的各个扩展，都是通过插件的形式进行扩展的，那咱们就看看一个低代码引擎的扩展是怎么开发的。打开src/sample-plugins/文件夹，可以看到里面有两个组件实现，这应该是官方用来给人参考的插件实现，这个logo的实现，就是一个普通的React组件，这个插件的注册、是在src/universal/plugin.tsx中实现的，我们就先略过。仔细看这个src/sample-plugins/scenario-switcher/index.tsx文件，记得这个scenarioSwitcher，在低代码引擎进行初始化的时候（比如src/scenarios/index/index.ts），就在一个立即执行函数（比如src/scenarios/index/index.ts中的main方法）里面，通过plugins.register进行了注册。 ```typescript import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; // ... 其他代码省略 await plugins.register(scenarioSwitcher); ``` 接下来，就在这个src/sample-plugins/scenario-switcher/index.tsx文件里面，看看这个scenarioSwitcher插件的具体实现。首先看到了一个普通的React函数式组件的实现Switcher，实现的意图是在各个场景的入口文件之间进行切换： ```typescript import { Select } from '@alifd/next'; import scenarios from '../../universal/scenarios.json'; const { Option } = Select; const getCurrentScenarioName = () => { // return 'index' const list = location.href.split('/'); return list[list.length - 1].replace('.html', ''); } function Switcher(props: any) { return () } ``` 最后通过export关键字导出的scenarioSwitcher，是一个箭头函数，按照[官方文档](https://lowcode-engine.cn/docV2/ibh9fh)的说法，这被叫做“pluginConfigCreator”。 ```typescript export const scenarioSwitcher = (ctx: ILowCodePluginContext) => { return { name: 'scenarioSwitcher', async init() { const { skeleton } = ctx; skeleton.add({ name: 'scenarioSwitcher', area: 'topArea', type: 'Widget', props: { align: 'right', width: 80, }, content: Switcher, }); }, }; }; scenarioSwitcher.pluginName = 'scenarioSwitcher'; ``` 箭头函数接收一个ILowCodePluginContext类型的参数ctx，[看过文档](https://lowcode-engine.cn/docV2/ibh9fh)了解到，插件可以通过这个ctx，获取低代码引擎提供的[各种API](https://lowcode-engine.cn/docV2/vlmeme)，比如之前见过的[project](https://lowcode-engine.cn/doc?url=dcrbff)，[skeleton](https://lowcode-engine.cn/docV2/bv3und)和[setters](https://lowcode-engine.cn/docV2/xwnsu3)等等：因为这个scenarioSwitcher组件是要放在低代码编辑器顶部区域，所以这里使用[skeleton](https://lowcode-engine.cn/docV2/bv3und)向顶部区域（area: 'topArea'）添加了一个Widget（type: 'Widget'），其他参数可以参考[skeleton的官方文档](https://lowcode-engine.cn/docV2/bv3und)。最后需要注意的是这个pluginName 字段，它是插件必须挂载的，而且需要确保全局唯一，否则 register 时会报错。嗯，这个scenarioSwitcher函数，就是“插件”本件了，原来它最终的形式、是一个挂载了pluginName字段的函数。 ### 5. src/setters/*，一个setters是怎么开发的在低代码引擎编辑器里，对一个组件进行可视化搭建——拖拽组件进入画布是一个关键步骤，而对当前选中组件进行设置是另一个关键步骤——现在我们看到的这些setters，正是对组件进行设置的关键部分。作为一个前端我们知道，封装好一个组件之后，往往是需要别人传递props参数给到组件的。props参数是有类型的，而且类型是多种多样的——比如string、number、boolean、object、array、function等等。而在可视化搭建的时候，低代码引擎允许低代码开发者通过[setters](https://lowcode-engine.cn/docV2/xwnsu3)的可视化配置、给组件传递props参数。因为props参数是多种多样的，所以[setters](https://lowcode-engine.cn/docV2/xwnsu3)也就多种多样。官方通过[@alilc/lowcode-engine-ext](https://github.com/alibaba/lowcode-engine-ext)扩展包，已经提供了各种各样的[setters](https://lowcode-engine.cn/docV2/xwnsu3)。在lowcode-demo/src/setters文件夹下，有两个setter的实现，比如src/setters/custom-setter，就是一个普通的React组件，能从props中接受包括defaultValue/value/onChange等等参数： ```typescript import React, { Component } from 'react'; // import classNames from 'classnames'; class CustomSetter extends Component { render() { const { defaultValue, value, onChange } = this.props; const { editor } = this.props.field; return

hello world

; } } export default CustomSetter; ``` 而CustomSetter的注册，则是通过plugin的形式、使用[setters](https://lowcode-engine.cn/docV2/xwnsu3) API进行注册的： ```typescript const customSetter = (ctx: ILowCodePluginContext) => { return { name: '___registerCustomSetter___', async init() { const { setters } = ctx; setters.registerSetter('CustomSetter', CustomSetter); }, }; } customSetter.pluginName = 'customSetter'; await plugins.register(customSetter); ``` ### 6. src/preview.tsx，搭建后的页面、是怎样渲染的使用低代码引擎搭建完页面，就会生成一个包含页面Schema信息、组件信息的JSON文件，这个信息可以直接使用preview.tsx进行渲染——大部分H5应用也是这样：JSON Schema + 组件，进行页面的渲染实现。我们使用低代码引擎进行可视化搭建，最终搭建得到的成果就是一个[project](https://lowcode-engine.cn/doc?url=dcrbff)模型，可以持久化的形式就是一个JSON Schema。而从src/preview.tsx文件中我们可以看到，我们把搭建的产物/JSON Schema、以及组件等等信息作为参数，给到@alilc/lowcode-react-renderer模块，就能够实现搭建的页面的渲染。 ```typescript import ReactRenderer from '@alilc/lowcode-react-renderer'; // ... 其他代码 const { schema, components } = data; if (!schema || !components) { init(); return ; } return (

); ``` 这种方式是常用的渲染方式，如果你做过H5可视化编辑器的开发的话，或者你考察过其他低代码编辑器的实现的话，就会发现大家差不多都是“JSON Schema + 组件”的方式实现渲染，这是一种通用的做法。 ### 7. One more thing：出码，一个可以激发很多可能的插件 One more thing——出码模块，是另一个非常让我激动的插件了，我之前开发过H5可视化编辑器，都是止步于“JSON Schema + 组件”进行页面渲染，而低代码引擎又往前多走了一步，进行前端代码生成，带来了更大的想象空间。说实话，这个[“出码模块”](https://github.com/alibaba/lowcode-engine/tree/main/modules/code-generator)对我来说是一个意外惊喜。我之前做过H5可视化搭建，我也看过很多其他可视化搭建平台，差不多都止步于“JSON Schema + 组件”了。其实JSON Schema作为搭建的产出物，已经可以满足页面可视化搭建、渲染的要求了。然而，如果使用[出码模块](https://github.com/alibaba/lowcode-engine/tree/main/modules/code-generator)，把JSON Schema转换为正常的前端源代码的话，就可以考虑发布到npm仓库，使得可视化搭建的产出物、作为一个正常的npm组件、被其他开发者使用，进入正常前端开发环节中。比如一些设计师，就可以通过低代码平台只设计一些纯UI组件，组件转换为源代码、发布到npm仓库之后，其他前端开发者也可以引用使用。当然，更多想象空间，大家可以补充，我觉得这个模块可以激发更多可能，接下来可以仔细研究一下。