Published on

vite-1.0 client插件解读

Authors
  • avatar
    Name
    祝你好运
    Twitter

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

  1. 客户端请求HTML页面
  2. 服务端通过serverPluginHTML注入导入/vite/client的代码
  3. 客户端浏览器发请求获取/vite/client文件
  4. 服务端通过serverPluginClient这个插件来替换变量。

看明白主流程之后,再看下面的具体代码就很简单了。这里的协议也可以替换的,因为有可能是HTTP协议,也可能是HTTPS协议,这个在src/node/server/index.ts的150行的resolveServer里面有处理。47行以后的代码的是处理历史遗留问题,可以不看。

client-plugin