Vite工作流程

执行 pnpm dev 后的流程

1. 在命令行执行pnpm dev后，会读取当前文件夹下package.json文件中的scripts部分，找到’dev‘键；
2. 接着执行pnpm vite...,启动Vite开发服务器；
3. Vite会根据项目开发目录找到vite.config.ts文件，这个配置文件包含了开发服务器、构建配置、插件等设置。比如，开发时的端口号、代理设置、路径别名、是否启用热模块替换（HMR）等；
4. 启动 Vite 的开发服务器后，Vite 会将开发环境的配置传递给本地服务器，通常它会运行在 http://localhost:3000（默认端口）
5. Vite会找到index.html，并分析文件中所有的 <script type="module"> 标签，解析这些标签中的 JavaScript 模块。它会根据这些标签导入的模块，生成依赖图，并加载模块。
6. Vite 会检查 main.js 文件，识别它依赖的其他模块（如 import 语句），并根据模块的关系来动态处理这些依赖。
7. 由于Vite使用现代浏览器的原生 ES Modules（ESM）特性，所以 Vite 直接通过 HTTP 发送原始的 ES Module 代码，而不需要像传统的打包工具那样进行整个应用的打包。Vite 会按需加载模块，并通过浏览器的原生模块机制进行处理。

处理 node_modules 和依赖

1. 对于 node_modules 目录中的依赖，Vite 会使用 esbuild 来进行优化和预构建。这样做的目的是为了让开发环境更加高效，减少每次页面加载时的构建时间。（通常这个过程只需要几秒钟的时间，而且结果会缓存下来，除非依赖发生变化）

   • Vite 会在开发服务器启动时，对 node_modules 中的 CommonJS 模块进行转换，使用 esbuild 将其转换为浏览器可以直接运行的 ESM 模块。

   • 这样做的好处是减少了浏览器加载模块时的延迟，因为浏览器可以直接处理 ESM 格式的模块，而不需要额外的转换步骤。