vite源码学习

源码地址,目前版本是

image.png

核心目录主要是vite\packages下的几个包

image.png

image.png

vite 支持的配置

配置 Vite | Vite 官方中文文档 (vitejs.dev)

启动

image.png

image.png

image.png

dev

首先是sever文件下的createServer，先试整合配置文件vite.config.js 和 命令行里的配置到config中并对解析插件并排序。

image.png

image.png

先处理httpserver的相关配置然后启动一个http(s)server,并升级为websocket

image.png

image.png

使用 chokidar监听文件变化（这是进行热更新的基础）

image.png

常见配置项

• persistent:bollean,与原生fs.watch一样,表示是否保护进程不退出持久监听，默认值为true
• ignored:string,所要忽略监听的文件或者文件夹
• ignoreInitial:bollean,表示是否对增加文件或者增加文件夹的时候进行发送事件，默认值为false表示add/addDir会触发事件
• cwd:string类型，没有默认值，类似于appBasepath，监听的paths所相对的路径。
• usePolling:bollean，表示是否使用前面提到的fs.watchFile()进行轮询操作，由于轮询会导致cpu飙升，所以此选项通常在需要通过网络监视文件的时候才设置为true即使用fs.watchFile()，默认值为false
• depth:number类型,没有默认值，如果设定则表示限定了会递归监听多少个子目录。
• ignorePermissionErrors，忽略权限错误。
• disableGlobbing，如果为 true，所有 globs都被视为字面路径名称，即使它们具有特殊字符。

根据container生成moduleGraph,然后将所有的plugin统一进行处理，保存到container中。

image.png

moduleGraph主要是将传入的插件容器container挂载到this上，并初始化 4 个属性urlToModuleMap、idToModuleMap、fileToModulesMap、safeModulesPath，Vite 为每个模块创建一个ModuleNode对象，对象内包含模块间的引用关系以及模块信息。模块信息包含绝对路径、转换后的代码、接收的热更新模块等。

image.png

• resolveUrl，调用所有插件的resolveId钩子函数，根据当前被请求模块的url，获取该文件的绝对路径，最后返回[url, 文件绝对路径]。

• ensureEntryFromUrl，根据模块路径创建ModuleNode对象，将对象收集到ModuleGraph的属性中；最后返回这个对象。

  
  
  image.png
• onFileChange，根据传入的file获取并清空对应ModuleNode对象的transformResult属性值。
• updateModuleInfo，用于构建和更新模块之间的引用关系。

初始化后面要返回的vite-dev-server,绑定了一些属性和方法

image.png

没怎么看懂推荐一下这篇博客vite中的vue-dev-server。

watcher发生变化的时候，进行相应的热更新处理

image.png

执行vite 钩子 configureServer,这里postHooks只收集有configureServer的plugin

image.png

中间件的使用

image.png

• baseMiddleware，用来处理配置项中的 base 选项（开发或生产环境服务的公共基础路径）。我们的代码在部署到生产环境时，一般会部署到某一个特定的目录下，这时访问请求的 url 会带上这个特定目录的前缀，也就是这里的 base 选项。baseMiddleware 会删除 base 前缀。
• servePublicMiddleware，响应 public 文件夹下的请求。vite 默认会将 public 文件夹下的文件当作项目根目录下的文件，且不做任何转义处理。
• transformMiddleware，用来转义处理 js、ts、css、png 等资源文件，这是 vite 最核心的代码实现。在这个中间件中会执行 resolveId、load、transform 这三个钩子函数。如果我们想对代码做些什么，可以通过写插件的方式实现这三个钩子。
• serveStaticMiddleware，用来响应不需要转义的的资源文件请求，比如页面中的 img 标签发出的图片请求。
• indexHtmlMiddleware，用来处理 html 文件请求。

执行posHooks里的plugins

image.png

几个重要的插件：

• importAnalysisPlugin，实现了 transform 钩子，当请求的是 js 脚本时，会通过 es-module-lexer 这个库分析出所有 import 语句。如果是裸导入，就分析出这个裸导入真正要导入的文件地址，然后转换为正确的导入 url。这个插件还会对 import.meta 进行增强，实现一些标准没有的功能，比如import.meta.hot。
• assetPlugin，实现了 load 钩子，让我们可以在代码中通过import imgUrl from './logo.png';的方式获得资源的 url。通过 import 导入的 png 图片，服务器不直接返回图片的数据，而是返回一个 js 模块，在模块中通过 export default ${imgUrl}的方式导出要请求的图片的 url。
• resolvePlugin，实现了 resolveId 钩子，是一个比较重要的插件，用来转换 url 为真实路径。importAnalysisPlugin 插件中获取裸导入真正的文件地址的功能就是调用了这个插件实现的。
• esbuildPlugin，实现了 transform 钩子，使用 esbuild 将ts、tsx 转换为 js。

转换index.html

image.png

在listen()之前执行vite钩子 buildStart，和runOptimize(),进行启动前的优化。然后返回server。

image.png

image.png