这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战
概述
首先介绍一下 Vite。
在 Vite 出现前，前端已经习惯了使用 Webpack、parcel、rollup 等打包工具将我们的源码模块串联成可以在浏览器中运行的文件。但是随着应用越来越大、逻辑越来越复杂，打包的时间也会越来越慢。
但是，随着现代浏览器的快速发展，类似 snowpack、Vite 这类工具利用了现代浏览器 ESM 的特性，从而使得前端开发得以摆脱 “打包” 的步骤，从而实现 nobundle 的新时代。
本文假设读者已经了解了 Vite 的基本用法及 ESM 相关的概念。在接下来的几篇文章中将会从源码的层面来更深入分析 Vite 的工作原理。
项目架构
Vite 使用了 yarn workspace 来管理 Vite 官方生态库。其中包含核心库 vite、create-app、create-vite，以及官方插件，例如 plugin-vue、plugin-react-refresh 等。
整体项目架构如下：
- packages
- create-app [deprecated]
- create-vite
- playground [demos]
- plugin-legacy
- plugin-react-refresh
- plugin-vue
- plugin-vue-jsx
- vite
由于 Vite 使用 Typescript 开发，在本系列的分析中，会对实现原理以及涉及到的 Typescript 特性一同进行概述，帮助大家来更好的理解开源库的实现原理、代码组织方式等。
packages/vite
先来看下 packages/vite 下的代码架构：
- packages
- vite
- src
- client
- node
由于原生 ESM 无法处理类似 import Vue from 'vue' 类似的绝对路径的资源，所以在一些 nobundle 的库的实现中，都会启动一个开发服务器，它们会将 vue 修改为 ./node_modules/vue/dist/index.js 类似的引用，从而解决原生 ESM 不能解决的一些问题。
所以在 vite 中，包含了 client 客户端以及 node 服务端这两端的代码。
来看看官方文档中对 vite 特点的介绍。
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
在后续的文章中，会分别介绍 client、node 所涉及到的代码及其原理。
packages/create-vite
这个库是被用作初始化 Vite 项目，允许快速生成一个使用 Vite 与 vue、react、preact、svelte 等框架集成的快速开发脚手架。
packages/plugin-legacy
对不支持 native ESM 的浏览器提供支持的插件。
packages/plugin-react-refresh
开发期间对 JSX 特性提供 React Refresh 功能。
packages/plugin-vue
vue 定制化特性功能的支持。
packages/plugin-vue-jsx
为 Vue3 的 JSX、TSX 写法提供 HMR 支持。
小结
通过以上的介绍，相信你已经对 Vite 仓库有了一个整体的认识。
后面的文章会深入分析每个 package 都做了哪些具体的功能，实现了哪些特性。
