目录结构
总体截图
docs
文档相关，这里只做大体预览，后面会有单独讲解
packages
该文件夹是 vite 核心功能与官方插件，还有 create-vite（vite-cli）
playground
该文件夹内容比较多就不截图了，主要就是主流项目的一些 demo 示例
scripts
一些脚本，使用 TypeScript 编写，还单独配置了 tsconfig.json 文件
下面来看看 publishCI.ts 的执行 ，很简单是不是，大家可以在自己项目中需要执行脚本文件的地方用起来！！！💕
为什么要单独讲目录结构？
这是一个典型的 monorepo 结构的项目，学习优秀的目录结构可以帮助我们强化架构项目方面的知识，学习最佳👍
另外，学习整体的目录结构有助于我们理清项目思路，类似书本的目录一样，我们了解了每一章讲解什么，方便我们翻阅定位查看。
如果有心，在阅读 vite 源码的时候你会像与作者思维沟通一般，优雅的查看目录、启动项目、调试项目等等。
docs
从以下几点慢慢了解 Vite 的官方文档：
- 文档的形式
- 如何本地调试文档
- 文档是怎样生成的
文档的形式
采取静态网站的形式，那么何为静态网站呢？
下面是百度百科的定义
静态网站是指全部由HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果，如GIF动画、FLASH动画、滚动字幕等，而网站主要是静态化的页面和代码组成，一般文件名均以htm、html、shtml等为后缀。
有点官方了，能否再通俗一点？
简单理解就是，我们所写的文档在上线后发现某个地方有错别字，这时候我们想改的话就得重新上线，与之相对立的是动态网站，如果我们所写的文档是在动态网站上发布，当我们发现有错别字的时候就可以修改文档重新提交。
当然，这背后是由服务端与数据库所支撑的。
如何本地调试文档
执行 pnpm run docs 然后对 docs 中的文件做些改变吧。
另外，值得注意的是在 vitepress@v1.0.0-alpha.4 中 mac 执行 docs-serve 命令会有些问题，详情查看这个 issue
如果大家觉得 vitepress 默认的主题不好看，可以在下图的文件中导出自定义的模板
有兴趣的同学可以点这里，查看 vitepress 自定义主题详细介绍。
文档是怎样生成的
这部分涉及到了编译器相关的知识，感兴趣的同学可以给我评论留言，后续我考虑单独出一期文章专门讲解 vitepress 是如何将 .md 文件转为 vue 文件并且为它穿上漂亮的衣服。
那现在我们简单来看下 vitepress dev docs 这行命令做了什么的流程图吧：
浅浅总结一下：
- cli 文件，分析命令行解析参数
- 判断如果是 dev 环境调用 createServer 方法
- 根据 vite 创建 server
- 解析 .vitepress 文件夹中的 config 文件
- 解析各个文件路径
- 创建 plugins 逻辑，md 文件转 vue 文件就是这里
packages
这个部分是整个 Vite 的核心区，主要分三部分：
-
create-vite(vite-cli)
-
官方插件
- plugin-legacy
- plugin-react
- plugin-vue
- plugin-vue-jsx
-
vite-core
create-vite
vite 工程脚手架
上图为官方内置的模板
pnpm create vite
首先还是一如既往的截取命令行中的参数，其次就是利用 prompts 来一步一步引导创建模板。
vite-core
为什么直接跳过官方插件来讲 vite-core ？
因为插件是为 vite 流程服务的，需要先了解 vite 流程，然后再来看是在哪里注册的插件，其次就是插件的细节实现了。
先来从 vite build 来看整个 vite 流程
流程图
解析
深绿色的是整体 vite build 的流程，罗列出来就是：
- 解析 vite-config
- 配置 rollup
rollup.rollup()rollup 打包方法- 将打包后的文件写入本地文件夹
然后注意看 resolveConfig 所对应的步骤，插件所挂载的步骤是在 resolve plugins 中。
其实，仔细想想，vite build 的流程也没什么，不过就是解析 config，然后配置 rollup，利用 rollup 来进行打包。如果想要做一些适配等操作的话就去写一些插件，因为在整个 rollup 打包过程中会将插件注入。
不过，它的代码封装与整体结构思路是很清晰的，这点是值得我们学习和借鉴的。
总结
到这里，本次 vite 我们分析了前期部分内容，从目录结构到官方文档详细分析，最后是 packages 包中的 vite 流程。
希望通过此次学习，可以学到 vite 的优秀目录设计、清晰的代码逻辑还有最重要的一点就是消除对学习源码的恐惧。
感谢阅读 ❤️
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
