Vite源码学习--调试源码

简介

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

调试过程

1、环境准备

编辑器使用vscode

使用npm或yarn创建一个Vue的调试项目，项目创建好了就完成环境的准备了。

npm init vite@latest <project-name>
2# 或者
3yarn create vite <project-name>

2、准备调试

我们需要修改package.json文件

然后点击DeBug,然后再点击上面弹窗的dev --debug就可以启动Vite源码调试了。

3、vite的目录结构

通过上面的步骤，我们已经启动了vite源码调试了，但是我们没有打断点，也起不到调试的作用。
下面先看看源码调试的入口文件。

入口文件

我们学习源码一般都先看源码的package.json，文件node_modules\vite\package.json，执行vite命令的入口，bin/vite.js

在bin/vite.js的start函数了打个断点，确实进入了start函数，start函数里面引入了/dist/node/cli.js文件模块，

然后我们进入/dist/node/cli.js文件，阅读源码，我们启动的是dev 命令，应该会进入dev相关的脚本里面，会调用createServer函数，创建本地服务器。

总结

这一篇博客主要讲解了vite怎么进行源码调试，接下来我会带着大家进一步学习vite预构建，资源编译，请求拦截，热更新。