Vite 源码解读系列（图文结合） —— 插件篇

哈喽，很高兴你能点开这篇博客，本博客是针对 Vite 源码的解读系列文章，认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。

Vite 是一种新型的前端构建工具，能够显著提升前端开发体验。

我将会使用图文结合的方式，尽量让本篇文章显得不那么枯燥（显然对于源码解读类文章来说，这不是个简单的事情）。

如果你还没有使用过 Vite，那么你可以看看我的前两篇文章，我也是刚体验没两天呢。（如下）

• Vite + Vue3 初体验 —— Vite 篇
• Vite + Vue3 初体验 —— Vue3 篇

本篇文章是 Vite 源码解读系列的第三篇文章，往期文章可以看这里：

• Vite 源码解读系列（图文结合） —— 本地开发服务器篇
• Vite 源码解读系列（图文结合） —— 构建篇

本篇文章解读的主要是 vite 源码本体，在往期文章中，我们了解到：

• vite 在本地开发时通过 connect 库提供开发服务器，通过中间件机制实现多项开发服务器配置，没有借助 webpack 打包工具，加上利用 rollup （部分功能）调度内部 plugin 实现了文件的转译，从而达到小而快的效果。
• vite 在构建生产产物时，将所有的插件收集起来，然后交由 rollup 进行处理，输出用于生产环境的高度优化过的静态资源。

本篇文章，我会针对贯穿前两期文章的 vite 的插件 —— @vitejs/plugin-vue 来进行源码解析。

好了，话不多说，我们开始吧！

vite:vue

vite:vue 插件是在初始化 vue 项目的时候，就被自动注入到 vite.config.js 中的插件。（如下）

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue()
  ]
});

该插件导出了几个钩子函数，这几个钩子函数，部分是用于 rollup，部分是 vite 专属。（如下图）

在开始阅读源码之前，我们需要先了解一下 vite 和 rollup 中每一个钩子函数的调用时机和作用。

字段	说明	所属
name	插件名称	vite 和 rollup 共享
handleHotUpdate	执行自定义 HMR（模块热替换）更新处理	vite 独享
config	在解析 Vite 配置前调用。可以自定义配置，会与 vite 基础配置进行合并	vite 独享
configResolved	在解析 Vite 配置后调用。可以读取 vite 的配置，进行一些操作	vite 独享
configureServer	是用于配置开发服务器的钩子。最常见的用例是在内部 connect 应用程序中添加自定义中间件。	vite 独享
transformIndexHtml	转换 index.html 的专用钩子。	vite 独享
options	在收集 rollup 配置前，vite （本地）服务启动时调用，可以和 rollup 配置进行合并	vite 和 rollup 共享
buildStart	在 rollup 构建中，vite （本地）服务启动时调用，在这个函数中可以访问 rollup 的配置	vite 和 rollup 共享
resolveId	在解析模块时调用，可以返回一个特殊的 resolveId 来指定某个 import 语句加载特定的模块	vite 和 rollup 共享
load	在解析模块时调用，可以返回代码块来指定某个 import 语句加载特定的模块	vite 和 rollup 共享
transform	在解析模块时调用，将源代码进行转换，输出转换后的结果，类似于 webpack 的 loader	vite 和 rollup 共享
buildEnd	在 vite 本地服务关闭前，rollup 输出文件到目录前调用	vite 和 rollup 共享
closeBundle	在 vite 本地服务关闭前，rollup 输出文件到目录前调用	vite 和 rollup 共享

在了解了 vite 和 rollup 的所有钩子函数后，我们只需要按照调用顺序，来看看 vite:vue 插件在每个钩子函数的调用期间都做了些什么事情吧。

config

config(config)