前言
上一篇文章中我们初步认识了一下Vite
在这一篇中我们将详细介绍vite dev命令背后的运行原理
我们不采用脚手架创建的项目来辅助演示，依旧使用手动创建的项目作为我们本次旅行的基建
目录结构介绍
- 上一篇中我们手动创建了一个Vite初体验的项目如下所示
- index.html是vite默认的入口文件
- main.js是我们创建的一个js文件用于演示
Vite dev的工作原理
本地打开入口文件
- 浏览器是可以直接识别html，css，js文件的，所以我们右键index.html文件在浏览器中打开，也可以访问入口文件
- 这种方式浏览器是通过file协议获取的本地文件，而我们在index.html中加载了main.js作为脚本，会发现浏览器提升跨域，这是由浏览器的同源策略导致的
vite dev启动项目
- 在命令行中执行yarn vite dev 后，vite会在我们本地启动一个开发服务器，设置访问端口为5173，同时将我们当前的项目目录作为服务器的访问目录，index.html文件作为入口文件，因此我们在浏览器中访问localhost:5173可以访问到index.html
- 这种方式浏览器是通过http协议获取的服务器的文件，同时浏览器并没有报错，这就是vite为我们做的第一件事，为所有的浏览器请求在响应头中加上允许跨域配置项。
vite处理模块化
- 现在我们来编写一个模块化的文件，首先安装loadsh，yarn add lodash
- 现在在main.js中导入lodash，如下
- 页面自动热更新，并有如下结果，我们可以看出main.js中的内容和我们实际编写的是不一样的，如下
- 导入语句被替换成了 import __vite__cjsImport0_lodash from "/node_modules/.vite/deps/lodash.js?v=5ca39abe";
- 默认情况下在导入第三方模块时，是从当前目录开始往外查找node_modules目录，直到找到对应的目录名为止。
- 但是我们发现，上述的路径中是在node_modules下的.vite/deps中查找目录名，这是vite为我们做的第二件事，对导入的非绝对路径和非相对路径的模块进行依赖预构建。
-
- 依赖预构建首先会调用esbuild将这些模块统一为esmodule规范。
- 将这些转换后的模块放到node_modules/.vite/deps中方便访问和后续路径处理时的重写
- 分析并重写这些模块内导入的其他模块，将其导入语句导入的模块，直接继承在当前文件中，防止多个导入导致的多个网络请求问题
总结
基于我们当前项目分析
- vite dev 帮我们搭建了服务器模拟真实项目的访问方式，解决了跨域问题
- 对我们的文件进行了读写，并返回给浏览器
- 统一第三方模块化规范，重写模块内容，优化网络性能
