本文档介绍了 Vite 的构建系统,该系统将应用程序源代码从开发环境转换为生产就绪的包。它涵盖了开发服务器的按需转换管道以及生成优化静态资源的生产打包过程。
有关构建期间的资源处理信息,请参阅 资源处理。有关 CSS 特定处理,请参阅 CSS 处理。有关 ESBuild 转译集成,请参阅 ESBuild 集成。
Vite 采用双模式构建系统,为开发和生产环境提供根本不同的方法。在开发过程中,Vite 提供带有按需转换的原生 ES 模块,而生产构建则使用 Rollup 创建优化的包。
来源: packages/vite/package.json1-203
构建系统为不同的构建场景公开了几个关键函数
主要的构建函数接受一个配置对象并协调整个生产构建过程,而 createServer() 则处理开发时的构建和实时转换。
来源: packages/vite/package.json19-33
生产构建遵循结构化的流程,通过多个阶段转换源代码
该流程广泛利用 Rollup 的插件系统,Vite 为不同的转换阶段提供专用插件。
来源: packages/vite/package.json84-89
Vite 的构建系统集成了几个关键工具,用于构建过程的不同方面
| 工具 | 版本 | 目的 | 构建阶段 |
|---|---|---|---|
rollup | ^4.40.0 | 包生成 | 生产 |
esbuild | ^0.25.0 | 快速转译 | 两者 |
postcss | ^8.5.3 | CSS 处理 | 两者 |
picomatch | ^4.0.2 | 文件模式匹配 | 两者 |
fdir | ^6.4.4 | 快速目录扫描 | 两者 |
tinyglobby | ^0.2.14 | Glob 模式解析 | 两者 |
构建系统通过统一的插件接口协调这些工具,该接口抽象了它们各自的 API。
来源: packages/vite/package.json83-90
构建系统根据目标环境实施不同的策略
开发构建优先考虑速度和开发者体验,而生产构建则侧重于优化和最小化包大小。
来源: packages/vite/package.json70-72
构建过程会生成多种类型的输出文件,它们各有不同的用途
清单文件提供了原始文件名与其哈希后的生产版本之间的映射,从而能够与后端框架和 SSR 系统集成。
来源: packages/vite/package.json47-55
构建系统提供了许多钩子,插件可以在其中拦截和修改构建过程
插件可以参与开发和生产构建,构建系统会自动确定哪些钩子与每种模式相关。