ESBuild 集成

相关源文件

• packages/vite/src/node/__tests__/plugins/esbuild.spec.ts
• packages/vite/src/node/plugins/esbuild.ts
• playground/build-old/__tests__/build-old.spec.ts
• playground/build-old/dynamic.js
• playground/build-old/index.html
• playground/build-old/package.json
• playground/build-old/vite.config.js
• playground/tsconfig-json-load-error/tsconfig.json
• playground/tsconfig-json/__tests__/tsconfig-json.spec.ts
• playground/tsconfig-json/src/decorator.ts
• playground/tsconfig-json/src/main.ts
• playground/tsconfig-json/tsconfig.json

Vite 中的 ESBuild 集成通过 esbuild 打包器提供了快速的 TypeScript/JSX 转译和代码压缩。该系统在开发和生产阶段处理代码转换，支持自动 TypeScript 配置检测以及对现代 JavaScript 特性的支持。

有关 CSS 处理功能，请参阅 CSS 处理。有关整体构建过程的文档，请参阅 构建过程。

核心架构

ESBuild 集成由几个关键组件组成，这些组件协同工作以高效地转换代码

来源： packages/vite/src/node/plugins/esbuild.ts79-301 packages/vite/src/node/plugins/esbuild.ts46-76

开发与生产工作流程

ESBuild 集成根据构建阶段的不同而运行方式不同

开发配置

在开发过程中，ESBuild 专注于快速转译，不进行优化

选项	值	目的
目标	'esnext'	现代开发环境无需转译
压缩	false	跳过压缩以加快构建速度
树摇	false	保留所有代码以进行调试
保留名称	false	允许名称混淆以加快处理速度

生产配置

生产构建根据 config.build.minify === 'esbuild' 进行转译和优化

来源： packages/vite/src/node/plugins/esbuild.ts242-267 packages/vite/src/node/plugins/esbuild.ts380-467

TypeScript 配置集成

该系统使用 tsconfck 库自动检测并应用 TypeScript 配置

配置优先级

系统遵循 TypeScript 选项的特定优先级顺序

1. 显式选项 传递给 transformWithEsbuild
2. 原始 tsconfig 字符串，如果由 tsconfigRaw 提供
3. 解析后的 tsconfig.json 来自文件系统
4. 默认值 用于未定义选项

来源： packages/vite/src/node/plugins/esbuild.ts105-180 packages/vite/src/node/plugins/esbuild.ts495-504

文件处理管道

ESBuild 根据扩展名和配置的过滤器处理文件

默认文件扩展名

扩展	加载器	描述
.ts	ts	TypeScript 文件
.tsx	tsx	TypeScript JSX 文件
.jsx	jsx	JavaScript JSX 文件
.mts, .cts	ts	现代/CommonJS TypeScript
.mjs, .cjs	js	现代/CommonJS JavaScript

来源： packages/vite/src/node/plugins/esbuild.ts87-103 packages/vite/src/node/plugins/esbuild.ts246

生产优化

在生产构建期间，ESBuild 通过 buildEsbuildPlugin 应用额外的优化

库构建优化

对于库构建，ESBuild 处理辅助函数注入，以防止全局命名空间污染

• IIFE 格式：使用 IIFE_BEGIN_RE 模式匹配将辅助函数移入函数包装器内
• UMD 格式：在 "use strict"; 指令之后注入辅助函数
• ES 格式：通过禁用空白符压缩来保留树摇

来源： packages/vite/src/node/plugins/esbuild.ts321-378 packages/vite/src/node/plugins/esbuild.ts303-319

错误处理和开发体验

该系统提供了增强的错误报告和开发时功能

TypeScript 配置热重载

当开发过程中 tsconfig.json 文件发生更改时，系统会自动

1. 清除 TSConfck 缓存 以重新加载配置
2. 使模块图失效 以重新编译受影响的模块
3. 触发完全页面重载 以确保一致性

来源： packages/vite/src/node/plugins/esbuild.ts506-542 packages/vite/src/node/plugins/esbuild.ts469-475