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

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

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

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

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

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

本篇文章解读的主要是 vite 源码本体，vite 通过 connect 库提供开发服务器，通过中间件机制实现多项开发服务器配置。而 vite 在本地开发时没有借助 webpack 或是 rollup 这样的打包工具，而是通过调度内部 plugin 实现了文件的转译，从而达到小而快的效果。

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

vite dev

项目目录

本文阅读的 Vite 源码版本是 2.8.0-beta.3，如果你想要和我一起阅读的话，你可以在这个地址下载 Vite 源码。

我们先来看看 Vite 这个包的项目目录吧。（如下图）

这是一个集成管理的项目，其核心就是在 packages 里面的几个包，我们来分别看看这几个包是做什么的吧。（如下）

包名	作用
vite	Vite 主库，负责 Vite 项目的本地开发（插件调度）和生产产物构建（Rollup 调度）
create-vite	用于创建新的 Vite 项目，内部存放了多个框架（如 react、vue）的初始化模板
plugin-vue	Vite 官方插件，用于提供 Vue 3 单文件组件支持
plugin-vue-jsx	Vite 官方插件，用于提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。
plugin-react	Vite 官方插件，用于提供完整的 React 支持
plugin-legacy	Vite 官方插件，用于为打包后的文件提供传统浏览器兼容性支持
playground	Vite 内置的一些测试用例及 Demo

这几个源码仓库其实有阅读的价值，但是我们这次还是先专注一下我们本期的主线 —— Vite，从 Vite 开始吧。

接下来我们重点解读 vite 本地开发服务命令 —— vite / vite dev / vite serve。

vite dev

我们来了解一下 vite dev 命令，也就是本地开发服务的内部工作流程。

vite dev 调用了内部的 createServer 方法创建了一个服务，这个服务利用中间件（第三方）支持了多种能力（如 跨域、静态文件服务器等），并且内部创建了 watcher 持续监听着文件的变更，进行实时编译和热重载。

而 createServer 做的事情就是我们需要关注的核心逻辑。

在 createServer 方法中，首先进行了对配置的收集工作 —— resolveConfig。

vite 支持的配置

我们正好可以通过源码看看 vite 项目支持的配置，你也可以直接参照 Vite 官方文档。（如下）

配置名称	配置说明
configFile	配置文件，默认读取根目录下的 vite.config.js 配置文件
envFile	环境变量配置文件，默认读取根目录下的 .env 环境变量配置文件
root	项目的根目录，默认值是执行命令的目录 —— process.cwd()
base	类似于 webpack 中的 publicPath，也就是资源的公共基础路径
server	本地运行时的服务设置，比如设置 host（主机地址）、port（运行端口）…详细配置可以参考 vite 文档
build	构建生产产物时的选项，可以参考 vite 文档
preview	预览选项，在使用了 build 命令后，可以运行 vite preview 对产物进行预览，具体配置可以参考 vite 文档
publicDir	静态资源目录，用于放置不需要编译的静态资源，默认值是 public 目录
cacheDir	缓存文件夹，用于放置 vite 预编译好的一些缓存依赖，加速 vite 编译速度
mode	编译模式，本地运行时默认值是 development，构建生产产物时默认是 production
define	定义全局变量，其中开发环境每一项会被定义在全局，而生产环境将会被静态替换
plugins	配置 vite