AI + 低代码 技术解密（六）：包结构和 Monorepo

本文档概述了 VTJ 低代码平台的 monorepo 结构、软件包依赖关系和构建系统组织。它概述了包的组织方式、它们之间的关系以及编排开发和部署的构建系统。有关核心架构组件的信息，请参阅核心架构 。

Monorepo 结构概述​

VTJ 平台使用 PNPM 工作区和 Lerna 进行包管理，以 monorepo 的形式进行组织。存储库包含组织为逻辑层的包，其工作区依赖项通过 workspace：~ 引用进行管理。monorepo 结构支持跨所有软件包的同步版本控制、共享工具和协调发布。

软件包描述和用途​

VTJ 平台由以下主要软件包组成：

包依赖项和关系​

基础层：Core、Base 和 Utils​

基础层为整个平台提供了必要的构建块。

@vtj/base​

基础包提供基本实用程序、类型和帮助程序函数。它包含：

• 类型定义
• 常用接口
• 加密实用程序
• 使用 dayjs 进行日期格式化
• Lodash 实用程序扩展

@vtj/utils​

utils 包基于 base 构建，并提供更专业的 Utility 函数：

• 基于 axios 的 HTTP 请求实用程序
• Cookie 管理
• 浏览器存储抽象
• 常见的帮助程序函数
• 路径匹配实用程序

@vtj/core​

核心包定义了低代码平台的主要数据模型和抽象：

• 项目模型
• 块模型
• 节点模型
• 状态管理
• 事件处理
• 数据绑定

此包是系统的概念核心，它定义了为低代码体验提供支持的域特定语言 （DSL）。

运行时层：Renderer、Parser 和 Coder​

@vtj/renderer​

renderer 包负责：

• 在运行时将 DSL 模型转换为 Vue 组件
• 管理组件 state 和 props
• 处理事件和数据流
• 支持动态插槽渲染
• 为组件通信提供上下文

@vtj/parser​

parser 包提供：

• 将 Vue SFC 文件转换为 DSL 模型
• 使用 Babel 进行 AST 遍历和分析
• CSS 解析和提取
• 使用 Vue 编译器解析模板

@vtj/coder​

coder 包处理：

• 从 DSL 模型生成 Vue 源代码
• 使用 Prettier 进行格式化
• 模板生成
• 脚本和样式生成

设计层：Designer 和本地服务​

设计层提供可视化设计环境和本地开发能力。

@vtj/designer​

Designer 包包含：

• 画布和属性面板组件
• 组件拖放功能
• 使用 Monaco Editor 的代码编辑器
• 组件树导航
• 预览模拟
• AI 辅助集成

@vtj/local​

本地服务包提供：

• 本地文件系统集成
• 项目加载和保存
• 将代码生成到文件
• 本地开发服务器集成
• 文件上传处理

平台实施​

VTJ 通过专用软件包支持多个平台目标：

@vtj/web​

Web 包提供标准的 Web 实现，包括：

• 特定于 Web 的组件
• 与 Element Plus 集成
• 图表集成
• Web 运行时支持

@vtj/pro​

pro 包是完整的 IDE 体验，结合了：

• 设计师
• 本地服务
• 材料
• 运行时渲染器
• 平台集成

@vtj/uni 和 @vtj/uni-app​

这些 packages 为 UniApp 开发提供支持：

• UniApp 组件映射
• H5 和小程序支持
• UniApp 专用渲染
• 与 UniApp 框架集成

开发工具​

@vtj/cli​

CLI 软件包提供开发和构建工具：

• 项目脚手架
• 构建配置
• 开发服务器
• 测试实用程序
• 插件支持

@vtj/node​

点包提供：

• 文件系统实用程序
• 用于服务器端作的 HTTP 实用程序
• 配置管理
• 项目模板处理

Monorepo 管理和构建系统​

工作区配置​

VTJ monorepo 使用带有 Lerna 的 PNPM 工作区进行包管理。工作区配置在 pnpm-lock.yaml 中定义，并使用 workspace：~ 说明符通过工作区依赖项进行管理。

PNPM 工作区结构：

包版本控制策略​

所有 VTJ 软件包都遵循同步版本控制策略。大多数软件包的当前版本为 0.12.40，CLI 版本为 0.12.4。此同步通过根 package.json 中定义的 Lerna 命令进行管理。

版本管理命令：

• lerna version patch --yes - 修补程序版本更新
• lerna version minor --yes - 次要版本更新
• lerna version prerelease --yes - 预发行版本
• pnpm -r publish --access public - 同步发布

构建系统架构​

构建系统使用通过 npm 脚本编排的工具组合：

构建工具：

• Vite - 软件包的主要构建工具
• Vue-tsc - Vue 组件的 TypeScript 编译
• Unbuild - Node.js 包的统一构建系统
• Rollup - 使用插件捆绑模块
• Terser - JavaScript 缩小
• Sass - CSS 预处理

构建编排：

该平台使用：

• 具有同步版本的语义版本控制
• 使用 PNPM 工作区和 Lerna 进行 Monorepo 管理
• 跨所有包的协调构建管道
• 自动化测试和覆盖率报告

在应用程序中使用包​

应用程序可以通过多种方式使用 VTJ 软件包：

1. 使用完整的 PRO 体验：

ts

import { createApp } from 'vue';
import { VtjPro } from '@vtj/pro';

const app = createApp(App);
app.use(VtjPro);

1. 仅使用 Web 渲染器：

ts

import { createApp } from 'vue';
import { VtjWeb } from '@vtj/web';

const app = createApp(App);
app.use(VtjWeb);

1. 使用 UniApp 集成：

ts

import { createSSRApp } from 'vue';
import { VtjUniApp } from '@vtj/uni-app';

export function createApp() {
  const app = createSSRApp(App);
  app.use(VtjUniApp);
  return { app };
}

应用实例​

该存储库包含几个示例应用程序：

这些示例展示了 VTJ 支持的不同集成方法和平台目标。

源码仓库 https://gitee.com/newgateway/vtj