前言
上一节,我们分析了实现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的代码作为响应返回给浏览器即可