Vite源码学习(三)——Vite内置插件

前言

在上一篇文章中,我们分析了JSONCSS处理插件,这篇文章我们继续分析Vite的内置插件。

在这篇文章中,我们将分析4个插件,分别是vite:modulepreload-polyfillvite:definevite:esbuildvite:asset,其中define和asset这两个插件的难度相对要大一些,大家耐心阅读体会即可。

vite:modulepreload-polyfill

这个插件本身的源码实现足够简单。

我们接着看一下那个polyfill函数的来源: 这段代码,如果你阅读过我之前的文章的话,你会觉得非常熟悉,嘿嘿。

曾经我写过一篇关于Vite构建产物分析的文章:vite进阶之构建产物分析

这个插件虽然没有指明应用的阶段,但是在内部逻辑中判断了必须是构建阶段才会生效的。

vite:esbuild

这个插件目前还跟依赖预构建的知识点无关,关于依赖预构建我们会专门拿文章进行阐述。

这个插件主要的目的就是进行编译转换,这也是为什么Vite它能够原生支持TS的原因。 然后在这个transformWithEsbuild方法中,Vite做了一系列的参数抹平和兜底处理之后,调用ESBuild的API:

vite:define

这个插件相对于前面2个插件就有一定的难度了,我们还是来看看实现。

这个插件主要完成的事是两件事儿:

  • 替换用户源码中的import.meta.env.*这样的语句,环境变量
  • 替换用户源码中使用的在配置中define字段配置的环境变量,define配置

我们来看一下这个插件的主要实现:

先拦截掉不做替换的内容。 然后利用ESBuild将环境变量进行替换,得到转换后的代码: 我们需要看一下啊这个replaceDefine这个函数的实现: 上图中的transform方法就是调用的ESBuild的API,符合vite文档所描述的,接下来,我们要看看那个define变量的来源。 getPattern这个方法中,最终调用的是generatePattern,在generatePattern方法中分别处理配置中的环境变量和import.meta.env.*

接着是处理import.meta.env.*:

通过学习这个插件,我们可以得到一个小的结论,Vite在处理环境变量的时候,是整体替换的,比如我们定义一个环境变量import.meta.env.VITE_TEST_ENV,我们有时候可能会尝试打印一些调试信息,觉得import.meta.env预期应该是一个对象,这样的使用方法,在构建的产物中,可能是错误的,这是大家需要注意的

vite:asset

这个插件的内容也不少,我们也需要耐心学习。

Rollup本身不支持图片处理,它需要使用插件才能完成图片处理,Vite在Rollup插件的基础上进一步进行了处理。

这个插件,重要的处理逻辑是在load生命周期和renderChunk的处理上。 对于raw请求,将其转化成一个字符串来处理,对于普通请求,把它转换成base64字符串或者相对于DevServer的相对路径。 在Dev和构建的时候,处理有些许区别。 对于DEV,转换成请求路径,浏览器可以直接访问: 对于构建,转化成base64 有的小伙伴可能会有疑问了,Vite不是支持一个静态资源大小的配置吗,只有小于这个阈值的静态资源才会打包进css,这有点儿不符合预期呢?

有这个疑问的小伙伴明显是好学且记性不错的,Vite现在只是暂时把它打进去了,后续还要把base64这样的的资源再从Chunk的代码中提取出来的。

renderChunk这个生命周期中,Vite会对源码进行抽取: 最后,Vite删除了一些不需要的文件: 因为generateBundle生命周期执行的时候还没有把产物写入磁盘,所以删除了bundle对象上的内容,将来写数据的时候就没有了。

结语

在这篇文章中我们分析了两个重要的插件,vite:assetvite:define,有难度且格外重要的Vite内置插件还有几个,我们需要在后面的文章中继续分析,未完待续......

相关推荐
深职第一突破口喜羊羊33 分钟前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking41 分钟前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆1 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
Edingbrugh.南空1 小时前
Aerospike架构深度解析:打造web级分布式应用的理想数据库
数据库·架构
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati2 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
人生都在赌2 小时前
从拒绝Copilot到拥抱GPT-5 Agent:一个Team Leader的效能革命
人工智能·架构·devops