开发者工具

相关源文件

• .github/contributing.md
• packages-private/sfc-playground/src/download/download.ts
• packages-private/sfc-playground/src/download/template/package.json
• pnpm-lock.yaml
• 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 核心仓库中提供的开发工具和实用程序。这些工具便于核心贡献、调试和探索 Vue 的内部工作原理。有关面向应用程序开发者的终端用户开发者工具的信息，请参阅 高级特性。

Vue 开发者工具概览

Vue.js 提供了一些专门的开发工具，可帮助进行核心贡献、调试和理解 Vue 在幕后的工作原理。

来源： .github/contributing.md114-126 scripts/utils.js1-114

开发脚本

Vue.js 提供了许多开发脚本来促进核心贡献。这些脚本通常使用 @antfu/ni 命令的简写形式，或直接通过 npm run 命令调用。

主要的开发命令

命令	目的	描述
nr dev	通用开发	以开发模式打包指定的格式的目标包，支持热更新。
nr dev-sfc	SFC 演练场	在本地开发模式下启动 SFC Playground
nr dev-esm	ESM 开发	构建并监视包含内联依赖项的 ESM 包
nr dev-compiler	模板浏览器	构建、监视并服务模板浏览器
nr build	生产构建	为生产环境构建所有或特定的包
nr test	测试	使用 Vitest 运行测试
nr check	类型检查	对整个代码库进行类型检查

来源： .github/contributing.md126-240 scripts/dev.js1-163

构建系统

构建系统结合使用了 Rollup（用于生产）和 esBuild（用于开发）。

来源： scripts/build.js1-266 .github/contributing.md127-142 rollup.dts.config.js1-205

构建格式选项

使用构建脚本时，您可以指定不同的格式

nr build runtime-core -f global      # Only build global format
nr build runtime-core -f esm-browser,cjs  # Build multiple formats

可用格式包括

• global - IIFE，通过 script 标签直接在浏览器中使用
• esm-bundler - ESM，用于打包器（webpack, rollup, vite）
• esm-browser - ESM，直接在浏览器中使用
• cjs - CommonJS，用于 Node.js

来源： .github/contributing.md143-157 scripts/dev.js45-54

SFC 演练场

SFC Playground 是一个交互式的 Web 工具，用于实验 Vue 单文件组件。它已持续部署在 https://play.vuejs.org。

来源： .github/contributing.md202-205 packages-private/sfc-playground/src/download/download.ts1-43 packages-private/sfc-playground/src/download/template/package.json1-18

使用 SFC Playground

要在本地运行 SFC Playground

这提供了最快的反馈循环，用于调试可在 SFC Playground 中重现的问题。

项目下载功能

SFC Playground 允许下载包含当前代码的完整项目设置。这会创建一个可直接使用的 Vite 项目，其结构如下：

• index.html - 主 HTML 文件
• package.json - 项目配置
• vite.config.js - Vite 配置
• README.md - 文档
• src/ - 源文件，包括您的组件代码

来源： packages-private/sfc-playground/src/download/download.ts10-42

模板浏览器

Template Explorer 是一个专门用于调试 Vue 模板编译过程的开发工具，已持续部署在 https://template-explorer.vuejs.org/。

来源： .github/contributing.md211-213 scripts/pre-dev-sfc.js1-28

使用模板浏览器

要在本地运行模板浏览器

这会构建、监视并以 http://:3000 上的模板浏览器。该工具对于理解 Vue 编译器如何将模板转换为渲染函数非常有用，在处理与编译器相关的问题时无价。

来源： .github/contributing.md211-213

构建和发布工具

Vue.js 包含用于构建和发布软件包的复杂工具。

来源： scripts/release.js1-592 scripts/build.js1-266

发布流程

发布脚本（scripts/release.js）处理以下事项：

1. 版本选择（patch、minor、major 等）
2. 跨依赖项更新
3. Changelog 生成
4. Lockfile 更新
5. Git 提交和标记
6. 包发布

发布系统支持多种选项：

• 常规发布
• 预发布（alpha、beta、rc）
• Canary 构建
• 试运行

来源： .github/contributing.md118-240 scripts/release.js500-564

构建过程特性

构建系统（scripts/build.js）提供：

1. 构建多种格式（global、esm-bundler、esm-browser、cjs）
2. 源代码映射生成。
3. 包大小报告
4. 并行构建包
5. TypeScript 声明文件生成

来源： scripts/build.js83-113 scripts/build.js218-265

TypeScript 集成

Vue.js 广泛使用 TypeScript，并包含用于类型检查和声明文件生成的工具。

来源：.github/contributing.md336-339 tsconfig.json1-43 tsconfig.build.json1-25 rollup.dts.config.js1-205

类型声明生成

Vue.js 通过两步流程生成类型声明

1. TypeScript 编译器生成原始 .d.ts 文件
2. rollup-plugin-dts 将它们打包成单个声明文件

通过以下方式执行此过程

此操作为所有包构建类型声明，使 TypeScript 用户能够使用它们。

来源：.github/contributing.md176-179 rollup.dts.config.js43-186

类型测试

Vue.js 包含一个专门的系统来测试类型声明

此命令将

1. 构建类型声明
2. 对照 `packages-private/dts-test` 中的测试用例进行验证
3. 确保类型在实际使用场景中能够正常工作

这有助于维护类型安全并防止类型系统出现回归。

来源：.github/contributing.md336-339

结论

Vue.js 核心中的开发者工具提供了一个全面的环境，用于核心开发、调试和探索。这些工具对于贡献者理解 Vue 的内部工作原理和为框架做出有效贡献至关重要。

SFC Playground 和 Template Explorer 对于理解 Vue 的编译和渲染过程特别有用，而构建和发布工具则确保了包分发的统一性和可靠性。