debug-vite插件入口

88 阅读1分钟

Vue 文件编译为 JavaScript 文件是一个毛线团,那么他的线头一定是 vite.config.ts 文件中使用 @vitejs/plugin-vue 的地方。通过这个线头开始 debug 我们就能够梳理清楚完整的工作流程。

image.png

vuePlugin 函数

image.png

@vitejs/plugin-vue 是作为一个 plugins 插件在 Vite 中使用,vuePlugin 函数返回的对象中的 buildStart、 transform 方法就是对应的插件钩子函数。Vite 会在对应的时候调用这些插件的钩子函数,比如当 Vite 服务器启动时就会调用插件里面的 buildStart 等函数,当 Vite 解析每个模块时就会调用 transform 等函数。

image.png

省略中间几万字bug过程。。。。。。

通过 debug 的方式一步一步了解 Vue 文件编译成 JavaScript 文件的完整流程,下面是一个完整的流程图。 template script css 是有 vue/compiler-sfc 是分开编译,最后生成一个新的字符串

【整个过程可以简单理解为字符串替换过程】

image.png