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 体验：

import { createApp } from 'vue';
import { VtjPro } from '@vtj/pro';
const app = createApp(App);
app.use(VtjPro);

2. 仅使用 Web 渲染器：

ts

import { createApp } from 'vue';
import { VtjWeb } from '@vtj/web';
const app = createApp(App);
app.use(VtjWeb);

3. 使用 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