前言
这篇文章还会接着向大家介绍VITE的内置插件，在这篇文章的3个插件解读完成之后，VITE的DEV和构建阶段共用的插件我们就只讲这么多了，然后我们会挑一些在VITE构建阶段中比较重要的插件进行讲解。
vite:import-glob
这是Vite提供的一个批量导入资源的语法糖
先看一下这个插件运行起来的效果：
源码：
编译结果：
Vite其实就是帮我们做了一个批量导入，避免了我们自己亲自去一个一个的编写导入代码，
这个插件牵涉到了一些词法分析，词法分析的具体实现我们就跳过了，我们就对主要流程进行分析即可。
如果源码中包含批量导入的语法，则进行转换，否则不转换。
接下来，我们看看
transformGlobImport函数完成的逻辑：
然后，拿着合法的
glob语法，使用tinyglobby去加载文件了：
对于eager参数，生成的代码模板不一样，如果eager设置为true的话，即带副作用的静态引入，否则就是使用ES6的
import函数加载资源。
vite:resolve
接下来这个插件，是VITE处理资源路径的核心实现，主要能力包括：
- 支持多种模块路径（相对路径、绝对路径、NPM 包路径等）。
- 内置了优化依赖的逻辑，提升开发体验。
- 在不同环境中（如浏览器、Node.js）采取不同的解析策略。
这个插件的核心就只在resolveId生命周期中处理逻辑，接下来我们开始看。
VITE跳过了虚拟模块或者带有__vite-browser-external这样的标识的内容：
然后是尝试处理相对路径：
然后就是处理不带前缀，需要从
node_modules加载的内容了：
如果命中了依赖预构建的话，则尝试加载已经处理过的内容，进而得到加载性能的优化。
最后，如果加载的内容是NodeJS的内建模块的话，则尝试打印错误信息通知开发者。
在
load生命周期中，主要是针对一些异常case的错误信息打印：
vite:css-post
之前我们讲过Vite处理CSS，并且讲述了Vite是如何支持各种CSS预处理器的。
vite:css只处理了CSS文件的编译工作，vite:css-post处理的是编译得到的CSS的内容的后续内容。
这个插件的处理也是超级复杂，在webpack中，我记得似乎是第三方团队的插件完成的这个事儿（style-loader+extract-css-webpackplugin）
对于DEV和构建，有两种不同的处理方式。
如果大家留意过Vite的开发过程的CSS处理的话，应该知道DEV阶段的处理过程CSS是依托JS进行处理的。
对于DEV阶段的处理，Vite将其css转换成一个JS文件，CSS的内容编码在JS中，然后Vite在客户端注入的工具方法，就知道把这个JS文件的内容解析出来，创建style标签，插入到DOM中完成样式的导入。
我们来看一下这个插件是如何处理DEV阶段的：
如果是构建阶段，我们知道，Vite会将我们的CSS打包成一个文件，我们来看一下Vite是如何处理的：
先从之前建立的哈希表中读取CSS内容，合并成一个最终的CSS文件内容：
然后将CSS文件内容中包含资源导入的内容提取出来：
然后，将CSS文件写入到bundle中（此刻还是开启CSS代码分割，得到的分割结果文件，并不是css最终的bundle结果），在Rollup的世界中，不能直接在bundle中增加
Key-Value的映射，这样会导致Rollup无法追踪资源，所以得用Rollup提供给我们的插件上下文，emitFile
返回最终的结果（最终bundle需要的css内容）：
再次调用
emitFile，生成最终的css bundle文件：
可以看到，这个插件的逻辑真的是超级复杂，各位读者需要耐心体会。
结语
考虑到篇幅的关系，我们在本文中就只聊这个三个插件，VITE的核心且插件我们已经讲了很多了，应该还有2-3篇文章我们就能完成内置插件相关的分析，在分析完成插件之后，就可以读VITE的核心其它流程进行分析，各位读者请耐心等待。
