前言
上一节，我们分析了实现hmr的核心步骤，但是对其实现细节只字未提，本节就着重来看向hmtl塞client.js的过程
思考
抛开源码不谈，我想大部分人的实现思路肯定是这样的：获取html文件，生成script标签并添加进源码，然后再在node端监听特定的请求，像去年我手写的简易cli工具就是秉持这一思路
源码
上一节已经提到过，vite中是利用中间件对.html文件的请求做了拦截
获取文件路径
当拦截到后会先获取html的文件绝对路径，即C:/Users/11574/Desktop/xxx/vite-learn/index.html
获取源码
此时的html源文件如下
定义生成标签所需内容
组装成script标签插入源码，最后使用res.send将修改后的源码返回
监听@vite/client请求
目前为止，我们只是插入了script标签，并利用其src属性建立了请求，还需要对该请求做出响应才行
显然这是一类请求，出于模块化需要，作为一个中间件进行注册
根据保存的模块依赖找到对应的文件位置
这里涉及到插件的运行机制，不过本质上还是使用的nodeApi作读取，然后将code，也就是本地的client.js的代码作为响应返回给浏览器即可
网友评论