所有文章

这个`src/client/client.ts`是HMR的客户端，我们之前提到过，HMR是通过WebSockets来做的，那它肯定是需要一个客户端和一个服务端的，通常就是客户端来连接服务端，然后服务端在特定条件下发送消息，客户端接收并处理消息，我们来看下代码主结构：

这个`serverPluginCss`是用来处理CSS文件的，因为在vite里面CSS（包括SCSS这种预处理器）和JSON都被处理成JS module，然后再由HTML里面注入的`src/client/client.ts`来更新页面。

这个`serverPluginClient`是HMR的一部分，它是负责在注入客户端WSS代码的时候，替换里面的协议域名和端口号，这些数据是从配置里面读取的。

这个`serverPluginModuleResolve`文件也是vite 1.0里面非常重要的一个文件，我们需要仔细分析一下，整体结构如下：

这个`serverPluginModuleRewrite`文件是vite 1.0里面非常重要的一个文件，我们需要仔细分析一下，整体结构如下：

这个`serverPluginServeStatic`文件的作用就是读取硬盘上的文件并返回。我们可以看下代码：

通常我们开发的网站，第一次加载的就是HTML页面，vite会改写这个HTML，这是通过`src/node/server/index.ts`里面的`htmlRewritePlugin`来实现的。

首先入口文件是`bin/vite.js`，那`bin/vite.js`又是调用的`../dist/node/cli`，这个脚本是在我们编译之后才会有的。具体的编译方法，我们可以参考`package.json`里面的`scripts`。

解读准备主要是要能够修改源代码，然后用我们修改后的代码来运行一个test程序，知道具体运行过程中的一些数据，验证我们的推想。

vite是通过使用[ES Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)来实现开发环境秒开，快速HMR的。这个ES Module说白了我们前端开发者应该每天都在用，因为我们都在用import，export来导入导出模块。不过如果你还是用的CommonJS的require，那就不是ES Module。