lowcode-engine源码阅读 - 01、前端工程与架构设计 - 《低代码引擎文章专区》

这篇文章的主要内容有：
相关资料

:::info 💡 据说，最好的学习方式之一，是把自己学到的内容教授给别人。现在阅读低代码引擎的开源代码有一段时间了，在不断的阅读过程中、我学到了好多东西，心里的兴奋憋不住、有股冲动想要跟别人分享，所以就有了这篇文章，接下来我也打算继续阅读代码/继续写，争取把低代码引擎的源代码吃透，大家一起“猛啃”吧。 :::

代码仓库	https://github.com/alibaba/lowcode-engine
作者	王士江
状态	容易
简介	作为一个前端工程师，我阅读/上手一个新的前端项目/工程时，总会先关注这个前端项目/工程的目录结构，而且这个目录结构往往展示了项目的架构设计。接下来，我想从以下几个方面，分享一下我阅读低代码引擎源代码时的理解。

这篇文章的主要内容有：

接下来，我会从以下几个方面，谈谈我对lowcode-engine的理解。

01、前端工程与架构设计 - 图1

1、MonoRepo工程

MonoRepo(Monolithic repository，单体式仓库)是指在一个代码仓库（repo）中管理多个模块/包(package)，包括Babel、React、Vue等等在内的项目，大都采用了MonoRepo的方式进行代码管理，这样在主包版本更新的时候，其他相关模块可以方便地进行同步更新。

使用git clone [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine)命令下载完lowcode-engine源代码之后，首先查看项目的目录结构、还有package.json，发现低代码引擎主包lowcode-engine的目录结构是一个MonoRepo结构，在这个代码仓库里面、包含了低代码引擎核心的4大模块。

打开package.json，看到scripts里面有很多lerna命令，而且在项目根目录下、有一个lerna.json文件，看来是使用lerna进行项目的多包管理，而且各个模块都放在了packages/文件夹下面；而且lerna.json文件中，标明了npmClient使用的是yarn，看来是使用yarn进行node_modules依赖管理。

{
  "lerna": "4.0.0",
  "version": "1.0.5",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "packages": [
    "packages/*"
  ],
}

再接着看package.json，发现scripts中除了熟悉的start``build等等命令之外，里面还有一个setup命令，官方文档里面讲过，可以直接执行npm run setup进行依赖的安装。

{
  "scripts": {
    "setup": "./scripts/setup.sh",
    "start": "./scripts/start.sh",
  },
  "engines": {
    "node": ">=14.17.0 <16"
  },
}

为了避免安装过程中出现错误，首先确保本地已经全局安装了lerna和yarn，再接下来就执行命令npm run setup安装相关依赖，最后执行npm start来启动项目。

npm install -g lerna yarn
npm run setup
npm start

通过阅读官方文档了解到，可以使用XSwitch进行低代码引擎相关资源的代理，方便进行调试。

2、模块划分

低代码引擎lowcode-engine中的4大功能模块，分别对应的代码模块目录。

通过阅读官方文档可以知道，低代码引擎核心包含了4大功能模块——入料模块，编排模块，渲染模块和出码模块。
引擎内核.png
通过查看低代码引擎lowcode-engine的各个功能模块引用关系，大概可以将4大功能模块与代码模块的对应关系梳理如下：
01、前端工程与架构设计 - 图4

在lowcode-engine的根目录下，有一个modules文件夹，这里面有低代码引擎的两个模块，分别是入料模块（modules/material-parser）和出码模块（modules/code-generator）。

而在[lowcode-engine](https://github.com/alibaba/lowcode-engine)/packages目录下，存放着低代码引擎的编排模块（packages/engine）和渲染模块（packages/renderer-core）。

注意到在[lowcode-engine](https://github.com/alibaba/lowcode-engine)/packages目录下，有一个名称为ignitor的文件夹，存放着一个名称为@alilc/lowcode-ignitor的模块，这个模块的package.json中的说明是“点火器，用于启动低代码引擎项目”。

{
  "name": "@alilc/lowcode-ignitor",
  "description": "点火器，bootstrap lce project",
  "private": true,
  "scripts": {
    "start": "build-scripts start --disable-open --port 5555"
  },
  "devDependencies": {
    "@alib/build-scripts": "^0.1.18",
    "fs-extra": "^10.0.0"
  }
}

这个项目中没有src目录、没有其他源代码，通过阅读这个项目的build.json文件看到，这个项目添加了三个入口文件：engine/src/index.ts、react-simulator-renderer/src/index.ts和rax-simulator-renderer/src/index.ts。

{
  "entry": {
    "engine-core": "../engine/src/index.ts",
    "react-simulator-renderer": "../react-simulator-renderer/src/index.ts",
    "rax-simulator-renderer": "../rax-simulator-renderer/src/index.ts"
  },
}

我们在[lowcode-engine](https://github.com/alibaba/lowcode-engine)根目录下、执行npm start时，启动的其实就是这个项目，这是一个为调试低代码引擎而生的项目。

#!/usr/bin/env bash
pkgName="@alilc/lowcode-ignitor"
if [ "$1" ]; then
pkgName="$1"
fi
lerna exec --scope $pkgName -- npm start

3、插件机制/微内核架构设计

微内核架构（Microkernel Architecture）也叫 Plugin Architecture，是一种基于插件的架构方式，通过编写精简的微内核来支撑以 plugin 的方式来添加更多丰富的功能。

微内核架构在我们常用的应用和框架里面非常常见，比如工具有 IntelliJ、Chrome、VS Code等等。前端框架中的 jQuery、Babel、Webpack等等，也都采用了微内核架构，利用插件机制带来框架的扩展性和灵活性。

通过阅读低代码引擎扩展相关官方文档、以及官方的lowcode-demo可以了解到，低代码引擎也使用插件机制/微内核架构，使得开发人员在不修改引擎源代码的情况下、通过开发插件的形式对引擎进行扩展。

插件可以扩展的功能，被叫做扩展点（ExtensionPoint），低代码引擎提供的扩展点包括物料、插件（低代码编辑器的功能和面板）和设置器，官方的扩展架构图如下：
从可扩展项目的视角，可以把低代码引擎架构.png

4、分层系统设计

为了方便理解，我把低代码引擎提供的各个API划分成三类，分别是组件系统，对象系统，事件系统。

“分类法”能够方便理解一个领域的相关知识，比如学习设计模式时，23个设计模式被划分为创建型、结构型和行为型三类，23个数量虽然多，但是划分成3类意图之后、理解上就很明显容易一点了。

而低代码引擎提供了[9大类API](https://lowcode-engine.cn/docV2/vlmeme)，我也把它划分为三类，分别是组件系统，对象系统和事件系统。
组件系统是指skeleton（面板）、material（物料）、setters（设置器）等等，跟组件开发相关的模块。
事件系统是指event（事件）、hotkey（快捷键）等等，跟内外部事件相关的模块。
对象系统就是除了上述的模块的其他模块，比如project（模型），就是对UI可视化搭建的面向对象建模。

当然上面只是我个人的一家之言，大家如果有其他想法，欢迎也写文章进行分享。

01、前端工程与架构设计

这篇文章的主要内容有：

1、MonoRepo工程

2、模块划分

3、插件机制/微内核架构设计

4、分层系统设计

相关资料