vite技术揭秘--hmr（客户端的建立与连接）

2022-09-03 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

上一节，我们分析了实现hmr的核心步骤，但是对其实现细节只字未提，本节就着重来看向hmtl塞client.js的过程

$\bullet$ 思考

抛开源码不谈，我想大部分人的实现思路肯定是这样的：获取html文件，生成script标签并添加进源码，然后再在node端监听特定的请求，像去年我手写的简易cli工具就是秉持这一思路

$\bullet$ 源码

上一节已经提到过，vite中是利用中间件对.html文件的请求做了拦截

$\ast$ 获取文件路径

当拦截到后会先获取html的文件绝对路径，即C:/Users/11574/Desktop/xxx/vite-learn/index.html

$\ast$ 获取源码

此时的html源文件如下

$\ast$ 定义生成标签所需内容

$\ast$ 组装成script标签插入源码，最后使用res.send将修改后的源码返回

$\ast$ 监听@vite/client请求

目前为止，我们只是插入了script标签，并利用其src属性建立了请求，还需要对该请求做出响应才行

显然这是一类请求，出于模块化需要，作为一个中间件进行注册

根据保存的模块依赖找到对应的文件位置

这里涉及到插件的运行机制，不过本质上还是使用的nodeApi作读取，然后将code，也就是本地的client.js的代码作为响应返回给浏览器即可