构建过程与脚本

相关源文件

• CHANGELOG.md
• package.json
• packages/compiler-sfc/package.json
• packages/server-renderer/package.json
• packages/template-compiler/package.json
• scripts/build.js
• src/platforms/web/entry-compiler.ts

本文档详细介绍了用于将 Vue.js 2.7 从源代码编译成各种分发格式的构建过程和脚本。它涵盖了构建配置、输出格式以及促进构建过程的脚本。有关分发格式本身的信息，请参阅分发格式。

构建系统概述

Vue.js 使用基于 Rollup 的构建系统将源代码编译成各种分发格式。构建过程通过 package.json 中定义的 npm 脚本进行编排，并主要在 scripts/build.js 文件中实现。

构建系统旨在生成多种分发格式以支持不同的使用场景

• 完整构建（含编译器）
• 仅运行时构建
• ES 模块构建
• CommonJS 构建
• UMD 构建
• 生产（已压缩）和开发构建

来源: package.json41-62 scripts/build.js1-97

构建脚本

Vue.js 提供了几个 npm 脚本来简化构建过程。以下是主要脚本：

npm run build          # Build all formats
npm run dev            # Development build in watch mode (full build)
npm run dev:cjs        # Development CommonJS build in watch mode
npm run dev:esm        # Development ES module build in watch mode
npm run dev:ssr        # Development server-renderer build in watch mode
npm run build:ssr      # Build runtime-cjs and server-renderer

主构建脚本 (build) 调用 node scripts/build.js，该脚本处理所有构建配置，除非在命令行参数中指定了特定的格式。

来源: package.json41-62

构建流程

下面是说明 Vue.js 构建过程的图表：

构建过程从源代码开始，然后通过构建脚本进行处理。该脚本从 scripts/config.js 读取配置，该文件定义了所有构建格式。构建可以根据命令行参数进行筛选。然后，每个构建都通过 Rollup 进行处理，如果是生产构建则进行压缩，并写入到 dist/ 目录。对于生产构建，还会创建一个 gzipped 版本以供大小参考。

来源: scripts/build.js21-36 scripts/build.js38-61 scripts/build.js63-84

构建配置和输出

构建系统针对不同的用例生成各种分发格式。每个构建都使用特定的配置进行定义，包括格式、入口点和输出目的地。

以下是主要输出文件的细分：

文件名	格式	描述
vue.js	UMD	完整构建（含编译器），开发版本
vue.min.js	UMD	完整构建（含编译器），生产版本
vue.runtime.js	UMD	仅运行时构建，开发版本
vue.runtime.min.js	UMD	仅运行时构建，生产版本
vue.common.js	CommonJS	Node.js 的完整构建（含编译器）
vue.runtime.common.js	CommonJS	Node.js 的仅运行时构建
vue.esm.js	ES 模块	用于打包器的完整构建（含编译器）
vue.runtime.esm.js	ES 模块	用于打包器的仅运行时构建
vue.runtime.mjs	ES 模块	Node.js 的仅运行时构建（带 ES 模块）

来源: package.json6-9 package.json19-38

分发结构和包

Vue.js 还构建了几个单独发布的关联包

每个包都有自己的 package.json 文件和特定的作用：

• @vue/compiler-sfc：用于单文件组件（.vue 文件）的编译器
• vue-template-compiler：Vue 2.0 的模板编译器
• vue-server-renderer：服务器端渲染能力

来源: package.json11-18 packages/compiler-sfc/package.json1-37 packages/server-renderer/package.json1-44 packages/template-compiler/package.json1-35

开发模式

为了开发目的，Vue.js 提供了几个在观察模式下运行 Rollup 的脚本，允许在源文件更改时进行实时重建。

这些开发脚本对于实时测试更改非常有用，无需每次都运行完整的构建过程。

来源: 42-46

生产版本

生产构建会经过额外的步骤来优化代码：

1. 代码压缩：使用 Terser 通过移除空白、缩短变量名和应用各种优化来减小文件大小。
2. 死代码消除：使用 pure_funcs 选项移除未使用的代码。
3. Gzip 压缩：创建 gzipped 版本以检查压缩后的大小。

生产构建通过文件名中的 .min.js 后缀或 prod.js 后缀来标识。

来源: scripts/build.js38-61 scripts/build.js63-84

构建系统演进

构建系统随着时间推移不断演进，在 Vue 2.7 中有显著变化：

• 在 package.json 中增加了 exports 字段支持，以提高 ESM 兼容性
• 增加了对带 .mjs 扩展名的 Node.js ESM 的支持
• 将 compiler-sfc API 更接近 Vue 3 对齐
• 改进了类型定义生成

引入这些更改是为了更好地兼容现代 JavaScript 工具，并使 Vue 2 和 Vue 3 之间的过渡更顺畅。

来源: CHANGELOG.md260-568

自定义构建

你可以通过向构建脚本传递逗号分隔的构建名称列表来定制要生成的构建。

这在开发过程中需要更快迭代，或者只需要特定构建格式时特别有用。

来源: scripts/build.js13-19