构建系统

相关源文件

• .github/contributing.md
• packages-private/global.d.ts
• packages/global.d.ts
• packages/vue-compat/src/createCompatVue.ts
• packages/vue-compat/src/index.ts
• packages/vue-compat/src/runtime.ts
• packages/vue/src/dev.ts
• packages/vue/src/index.ts
• packages/vue/src/runtime.ts
• rollup.config.js
• rollup.dts.config.js
• scripts/aliases.js
• scripts/build.js
• scripts/dev.js
• scripts/pre-dev-sfc.js
• scripts/release.js
• scripts/utils.js
• tsconfig.build.json
• tsconfig.json

本文档详细介绍了 Vue.js 核心仓库中使用的构建流水线、Rollup 配置和分发格式。它解释了 Vue 包如何为不同的环境和用例进行构建。

概述

Vue.js 使用基于 Rollup 的复杂构建系统进行生产构建，并使用 ESBuild 进行开发构建。构建系统旨在

1. 为各种环境生成不同的分发格式
2. 创建优化的生产构建
3. 支持功能标志和编译时常量
4. 生成 TypeScript 声明文件
5. 为 monorepo 中的所有包创建构建

来源: rollup.config.js57-88 scripts/build.js1-17 scripts/dev.js1-6

构建配置

构建配置主要在 rollup.config.js 中定义。此文件为 Vue.js monorepo 中的所有包设置了构建过程。

核心构建概念

1. 特定包配置：每个包都可以通过其 package.json 文件中的 buildOptions 字段来定义其构建选项。
2. 环境变量：构建过程使用环境变量来控制目标包、格式以及开发/生产模式等。
3. 功能标志：Vue 使用编译时功能标志（例如，__FEATURE_OPTIONS_API__）来实现可选功能的 tree-shaking。

来源: rollup.config.js171-218 rollup.config.js323-356

分发格式

Vue.js 构建提供多种格式以支持不同用例

格式	文件扩展名	描述	用例
ESM 打包器	.esm-bundler.js	ES 模块，依赖项外部化	用于打包器（Webpack、Rollup、Vite）
ESM 浏览器	.esm-browser.js	ES 模块，依赖项内联	用于通过 <script type="module"> 直接在浏览器中使用
CommonJS	.cjs.js	CommonJS 模块	适用于 Node.js 和旧版打包器
IIFE/全局	.global.js	立即执行函数表达式	用于通过 <script> 标签直接在浏览器中使用
仅运行时	.runtime.*	不包含模板编译器的构建	模板预编译时，构建体积更小

生产与开发构建

生产构建（.prod.js）经过压缩，并移除了仅用于开发的的代码。在生产模式下构建时会自动创建。

来源: rollup.config.js57-88 rollup.config.js102-114 scripts/build.js119-200

构建流程

构建过程通过 package.json 中定义的 npm 脚本进行协调，并在 scripts 目录中实现。

主要构建命令

• pnpm build: 构建所有包（或指定特定包）
• pnpm dev: 以开发模式构建特定包，并启用监视模式
• pnpm build-dts: 生成 TypeScript 声明文件

构建管道

1. 初始化构建环境：设置环境变量并确定目标包
2. 清理输出目录：删除现有的 dist 文件夹
3. 打包包：运行 Rollup 以创建所有分发格式
4. 创建生产构建：如果处于生产模式，则压缩生产构建
5. 检查包大小：生成生产构建的大小信息
6. 生成类型声明：如果需要，则创建 .d.ts 文件

来源: scripts/build.js84-113 scripts/build.js160-200

包构建配置

Vue.js monorepo 中的每个包都可以通过其 package.json 中的 buildOptions 字段来自定义其构建过程。

构建系统会读取此配置以确定如何构建每个包。

来源: rollup.config.js46-47 scripts/build.js178-180

功能标志和构建常量

Vue.js 使用编译时功能标志来启用可选功能的 tree-shaking

标志	目的
__DEV__	仅开发代码
__BROWSER__	浏览器特定代码
__GLOBAL__	全局构建特定代码
__ESM_BUNDLER__	ESM 打包器特定代码
__ESM_BROWSER__	ESM 浏览器特定代码
__CJS__	CommonJS 特定代码
__SSR__	服务器端渲染代码
__FEATURE_OPTIONS_API__	Options API 支持
__FEATURE_SUSPENSE__	Suspense 功能
__FEATURE_PROD_DEVTOOLS__	生产环境 DevTools 支持

这些标志会在构建过程中被替换，从而允许 tree-shaking 移除未使用的代码。

来源: rollup.config.js171-218 packages/global.d.ts1-17

开发模式

为了加快开发周期，Vue.js 使用 ESBuild 而非 Rollup。

dev 脚本提供

1. ESBuild 加快构建速度
2. 监视模式，可自动重新构建
3. 支持不同格式
4. 源映射，便于调试

来源: scripts/dev.js1-162

生产优化

生产构建包含多项优化

1. 压缩：使用 SWC 进行高效代码压缩
2. 死代码消除：移除仅开发代码
3. Pure 注释：将某些函数调用标记为 Pure，以实现更好的 tree-shaking
4. 功能标志处理：根据构建配置启用或禁用功能

来源: rollup.config.js359-396 rollup.config.js226-233

类型声明生成

TypeScript 声明文件（.d.ts）在一个单独的过程中生成。

1. TypeScript 编译器（tsc）生成原始声明文件。
2. rollup-plugin-dts 将它们打包成每个包的单个声明文件。
3. 来自 types/ 目录的其他类型文件将被附加。
4. 为了兼容 ES 模块，还会生成 .d.mts 文件。

此过程确保了类型声明准确且为 TypeScript 用户消费进行了优化。

来源: rollup.dts.config.js1-204 scripts/build.js95-109

发布流程

发布流程建立在构建系统之上

1. 更新包版本
2. 为所有包运行构建流程
3. 生成变更日志
4. 将包发布到 npm

这由 scripts/release.js 脚本处理，该脚本确保 monorepo 中所有包的版本一致性。

来源: scripts/release.js487-495

结论

Vue.js 的构建系统旨在通过灵活的配置系统支持多种环境和用例。Rollup 用于生产构建，ESBuild 用于开发构建，这两者的结合提供了优化和开发者体验的优势。

理解构建系统对于为 Vue.js 做贡献或在需要自定义构建的高级使用场景中至关重要。