candyTong

之前手写了一个 Vite Server，实现了一些基本的功能，但是这些能力都是写死的，没有任何的可扩展性，这次我们将它改造成插件化架构，通过新增插件来新增能力。

之前写过几篇 Vite 的文章，对 Vite 的概念也有一定的理解了，但理解归理解，仍然觉得很虚，也不知怎么的，这几个概念突然就变成一个这么强大的工具。。。 于是，我决定自己手写一遍 Vite。

本文会用一个极其简单的例子，来说明如何处理一个 Vue 文件，并将其展示到页面中。在这个过程中，介绍 Vue 提供的编译能力，以及如何组合利用这些能力。

最近在看 Vue 团队成员的技术演讲，从中能了解到他们的设计思考以及最佳实践，看完一场收获颇多，里面有文档里学不到的设计思考。

我们知道，Vite 在开发环境下，会打开一个 Dev Server 用于预览开发的页面，那么这个 Dev Server 到底做了什么呢？它是怎么做到将我们的代码展示成页面的，接下来我们就来一探究竟。

我们知道，Vite 开发时，用的是 esbuild 进行构建，而在生产环境，则是使用 Rollup 进行打包。 Vite 官方文档已经做出解析：尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导

准备 拉取源码，安装依赖，并进行一次构建 调试内置项目 vite 的内置项目，在 playground 文件夹内，里面有非常多项目，我们挑选其中的 vue 项目进行测试 watch 模式打包 vite

这篇文章，主要是分析一下，vite 是如何解析它的配置的，我们定义的 vite.config.ts 配置文件，最终会被转换成什么样子，被 vite 的整个执行过程中使用。