Vite 入门以及从 webpack 切换到 Vite 遇到的问题总结，web网页开发工具

可以看到，涉及到js的一共三块：

• client，请求路径为/@vite/client,请注意这个路径，这是vite本身的依赖的路径；

• react-refresh的模块代码，这是插件react-refresh注入的代码；代码内部又请求了@react-refresh，这是插件react-refresh的sdk的请求；

• main,请求路径为/src/main/tsc，这是与咱们项目中的真实代码相关的；

除了上面的三个外，还有一个env,请求路径为/@vite/env.js，这个就是@vite/client内部发出的对env依赖的请求：import '/node_modules/vite/dist/client/env.js';;

当然还有@react-refresh的sdk请求；

除了上面所提到的js之外，其他的请求其实就是我们项目代码里面的请求了；

client第一步要做的事情就是建立websocket通信通道，可以看到上面的websocket类型的localhost请求，这就是client与server端通信，进行热更新等的管道。

vite- server

============

说完了client，我们回到server部分，入口文件为packages/vite/src/node/serve.ts，最主要的逻辑其实是在packages/vite/src/node/server/index.ts;我们暂且把server端称为node端，node端主要包含几种类型文件的处理，毕竟这只是个代理服务器；

image.png

我们从几个部分来看看这几种类型的处理

node watcher

---

watcher的主要作用是对于文件变化的监听，然后与client端进行通信：

监听的目录为整个项目的根目录，watchOptions为vite.config.js里面的server.watch配置，初始化代码如下：

// 使用chokidar进行对文件目录的监听，

const watcher = chokidar.watch(path.resolve(root), {

ignored: [‘/node_modules/’, ‘/.git/’, …ignored],

ignoreInitial: true,

ignorePermissionErrors: true,

…watchOptions

}) as FSWatcher

启动对文件的监听：

// 如果发生改变，调用handleHMRUpdate，

watcher.on(‘change’, async (file) => {

file = normalizePath(file)

// invalidate module graph cache on file change

moduleGraph.onFileChange(file)

if (serverConfig.hmr !== false) {

try {

await handleHMRUpdate(file, server)

} catch (err) {

ws.send({

type: ‘error’,

err: prepareError(err)

})

}

}

})

// 增加文件连接

watcher.on(‘add’, (file) => {

handleFileAddUnlink(normalizePath(file), server)

})

// 减少文件连接

watcher.on(‘unlink’, (file) => {

handleFileAddUnlink(normalizePath(file), server, true)

})

监听对应的事件所对应的处理函数在packages/vite/src/node/server/hmr.ts文件里面。再细节的处理，我们不做说明了，其实里面逻辑是差不太多的，最后都是调用了websocket，发送到client端。

node 依赖类型