本文档涵盖了 Mermaid monorepo 中使用的构建系统架构、包管理和打包过程。它详细介绍了项目如何将 TypeScript 源代码转换为可分发的 JavaScript 模块,并管理多个包之间的依赖关系。
有关 CI/CD 流水线和自动化构建的信息,请参阅 CI/CD 流水线。有关与构建流程集成的测试基础设施的详细信息,请参阅 测试框架。
Mermaid 使用由 pnpm 工作区管理的 monorepo 结构,其中包含多个相互关联的包,这些包会一起构建和打包。
来源: package.json1-146 pnpm-lock.yaml12-521 packages/mermaid/package.json1-140 packages/mermaid/src/docs/package.json1-12
Monorepo 使用 pnpm 作为包管理器,工作区配置在根目录的 package.json 中定义。工作区结构支持:
workspace:^ 语法进行跨包链接| 包 | 目的 | 导出格式 |
|---|---|---|
mermaid | 核心库 | ESM (mermaid.core.mjs) |
parser | 语言解析 | ESM |
mermaid-example-diagram | 外部图表示例 | ESM (mermaid-example-diagram.core.mjs) |
mermaid-layout-elk | ELK 布局引擎 | ESM |
mermaid-zenuml | ZenUML 集成 | ESM |
来源: package.json7 packages/mermaid/package.json6-15 packages/mermaid-example-diagram/package.json6-15
构建过程结合了多种工具,将 TypeScript 源代码转换为适合各种消费模式的优化 JavaScript 包。
来源: package.json18-23 .vite/build.ts85-96
构建过程由 .vite/build.ts 中的 getBuildConfig 函数编排,该函数为每个包创建 Vite 配置。
根包提供了多个构建命令来编排整个构建过程。
| 脚本 | 目的 | 依赖项 |
|---|---|---|
build | 完整构建 | build:esbuild + build:types |
build:esbuild | 编译源代码 | clean + tsx .esbuild/build.ts |
build:types | 生成 TypeScript 定义 | types:build-config + tsx .build/types.ts |
build:mermaid | 仅构建 mermaid 包 | build:esbuild --mermaid |
build:viz | 使用捆绑分析进行构建 | build:esbuild --visualize |
打包过程将单个 TypeScript 模块转换为优化的 JavaScript 包以供分发。
来源: .vite/build.ts125-140 .vite/build.ts85-96
每个包都会生成优化的 ESM 包,并带有特定的配置。
包的命名遵循以下模式:{packageName}.esm${minify ? '.min' : ''}.mjs
构建系统通过监视模式、开发服务器和热重载支持高效的开发工作流。
来源: package.json24-26 .vite/build.ts127-133
构建系统实现了监视模式,以实现快速开发迭代。
这使得在监视的目录中源文件发生更改时可以自动重新构建。
构建系统与 Docker 集成,以提供一致的开发和部署环境。
来源: Dockerfile1-14 docker-compose.yml1-37 .node-version1-2
Docker 环境提供了具有以下特点的一致的构建上下文:
NODE_OPTIONS="--max_old_space_size=8192" 进行内存优化来源: Dockerfile5-13 docker-compose.yml8-18
构建系统包含包分析功能,用于优化和调试。
visualizerOptions 函数生成不同类型的图表进行包分析,并为主包和完整包分别生成输出。
来源: .vite/build.ts26-39 package.json21
可视化系统跟踪: