摘要
文章详细分析了 Vite 构建流程中 JSON 和 CSS 内置插件，介绍了构建和 DEV 流程加载插件的区别、JSON 插件功能、CSS 插件复杂逻辑，包括预处理器、postcss 处理等，后续将阐述其他核心插件。
一、构建与 DEV 流程中插件加载
（一）构建生命周期与生成生命周期
文章首先提到之前初步学习了 Vite 构建流程，但跳过了内置插件。现在开始精读内置插件，在这个过程中可能会用到之前阐述 Rollup 生命周期的知识点。
（二）内置插件的加载
1. 构建流程和 DEV 流程的区别
这里需要明确 Vite 构建流程中和 DEV 流程中加载插件的区别，先聚焦构建流程中的插件，DEV 流程中的插件后续再阐述。
2. 构建和 DEV 流程都加载的插件
列出构建和 DEV 流程都加载的插件数组，经统计大概有 19 个插件是两个流程都需要的，之后开始介绍这些插件中的常用插件。
二、vite:json 插件
这个插件相对简单，主要处理 transform 生命周期，不处理 Vite 内部特殊逻辑，它调用 Rollup 插件将 JSON 内容转成 ESM，这里省略了 Vite 额外的边界逻辑处理，以掌握原理为目的，对于框架设计者可自行查看学习这些细节。
三、vite:css 插件
（一）插件整体情况
vite:css 插件代码量较大，主代码 300 多行且调用外部逻辑更多。
（二）buildStart 生命周期
在这个生命周期中主要有初始化缓存逻辑和 CSS 预处理器逻辑。
（三）CSS 预处理器
- 支持的预处理器 Vite 支持 scss、sass、styl、stylus 和 less 等预处理器，本文以 scss 为例阐述。
- 预处理器相关逻辑 在 buildEnd 生命周期中主要是释放资源。load 生命周期中，isCSSRequest 对常见 css 预处理器进行支持，对于 css 资源且查询字符串带?url，在 load 生命周期完成注入逻辑，后续不会对.css?url 这样的资源进行转换。
（四）transform 生命周期
- 相关方法逻辑 在 transform 生命周期中，主要看 compileCSS 方法的逻辑，其中会判断用户选择的 css 后置处理器，这里假设使用 postcss。
- postcss 相关逻辑
（1）加载 postcss 配置
如果没有额外工作（资源是 css 不需要预处理），直接返回 css 内容。
（2）处理预处理器逻辑
这里会等待之前定义的预处理器 process 方法。先看创建 scssProcesser 逻辑中 worker 创建逻辑（if 分支未命中时），由于 Vite 的 scss 编译配置可配置多种 api，以 modern - compiler 为例，这里只是获取 worker 实例。 3. worker 的 run 方法 worker 的 run 方法调用 scss 包暴露的编译方法完成 scss 源码编译。 4. postcss 后续处理 经过 SCSS 预处理后进行 postcss 处理，如果有内联导入会加载 postcss - import 插件，如果是 css - module 语法则引入 postcss - module 插件，最后进行基本的 postcss 处理。
四、小结
vite:css 是处理 css 相关内容的内置插件，对于.css?url 资源不做转化。当 css 资源命中处理器时，若未安装对应预处理器 Vite 会提示错误。Vite 支持多种 css 预处理器格式，经过预处理器处理后的 css 会进行 postcss 处理，根据不同情况加载不同的 postcss 插件并最终完成构建。Vite 的 CSS 处理流程虽复杂，但对用户来说使用难度低，体现了好软件把复杂留给自己、方便留给用户的特点。
五、总结
本文阐述了 JSON 和 CSS 这两个 Vite 内置插件，后续文章将继续阐述 Vite 中的核心插件。