菜单

构建与打包

相关源文件

本文档涵盖了 Mermaid monorepo 中使用的构建系统架构、包管理和打包过程。它详细介绍了项目如何将 TypeScript 源代码转换为可分发的 JavaScript 模块,并管理多个包之间的依赖关系。

有关 CI/CD 流水线和自动化构建的信息,请参阅 CI/CD 流水线。有关与构建流程集成的测试基础设施的详细信息,请参阅 测试框架

Monorepo 架构

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-elkELK 布局引擎ESM
mermaid-zenumlZenUML 集成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 配置。

来源: .vite/build.ts48-110

构建脚本

根包提供了多个构建命令来编排整个构建过程。

脚本目的依赖项
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

来源: package.json18-22

打包过程

打包过程将单个 TypeScript 模块转换为优化的 JavaScript 包以供分发。

包生成流水线

来源: .vite/build.ts125-140 .vite/build.ts85-96

捆绑包配置

每个包都会生成优化的 ESM 包,并带有特定的配置。

包的命名遵循以下模式:{packageName}.esm${minify ? '.min' : ''}.mjs

来源: .vite/build.ts53-60

开发工作流

构建系统通过监视模式、开发服务器和热重载支持高效的开发工作流。

开发服务器配置

来源: package.json24-26 .vite/build.ts127-133

监视模式实现

构建系统实现了监视模式,以实现快速开发迭代。

这使得在监视的目录中源文件发生更改时可以自动重新构建。

来源: .vite/build.ts103-107

Docker 集成

构建系统与 Docker 集成,以提供一致的开发和部署环境。

Docker 构建环境

来源: Dockerfile1-14 docker-compose.yml1-37 .node-version1-2

容器构建过程

Docker 环境提供了具有以下特点的一致的构建上下文:

  • Node.js 22.12.0 配合 Alpine Linux
  • 预启用的 pnpm 包管理器
  • Git 配置,用于安全的目录访问
  • 通过 NODE_OPTIONS="--max_old_space_size=8192" 进行内存优化
  • 端口转发,用于开发和文档服务器

来源: Dockerfile5-13 docker-compose.yml8-18

包分析与优化

构建系统包含包分析功能,用于优化和调试。

可视化工具

visualizerOptions 函数生成不同类型的图表进行包分析,并为主包和完整包分别生成输出。

来源: .vite/build.ts26-39 package.json21

捆绑包大小监控

可视化系统跟踪:

  • 未压缩的包大小
  • Gzip 压缩率
  • Brotli 压缩率
  • 模块依赖关系
  • 代码拆分有效性

来源: .vite/build.ts34-36