Vite，上手难度低于Webpack，配置简单，即用型。虽然现在的生态还不如Webpack，但是生态在逐渐丰富。写完一些Vite插件，今天就来说说VirtualModules，顺便介绍一下vite-plugin-project-info插件。虚拟模块的概念虚拟模块是Vite遵循Rollup的虚拟模块。虚拟模块类似于alias别名，但模块内容不是直接从磁盘读取，而是在编译时生成。虚拟模块是一种有用的模式，允许您使用ESM语法传递有关源文件的一些编译时信息。虚拟模块实现示例首先你可能需要了解插件编写的API。下面是直接导入官网的例子：exportdefaultfunctionmyPlugin(){constvirtualModuleId='virtual:my-module'constresolvedVirtualModuleId='\0'+virtualModuleIdreturn{name:'my-plugin',resolveId(id){if(id===virtualModuleId){returnresolvedVirtualModuleId}},load(id){if(id===resolvedVirtualModuleId){return`exportconstmsg="fromvirtualmodule"`}}}}然后导入这些模块代码中：import{msg}from'virtual:my-module'console.log(msg)实用分析：vite-plugin-project-infovite-plugin-project-info是一个Vite项目信息插件，会输出使用后Console面板上的版本和构建时间等信息。配合虚拟模块实现插件resolveId钩子函数：将真实虚拟模块ID转换为内部虚拟模块ID。loadhook函数：匹配内部虚拟模块ID，并返回编译后的代码，最终实现virtual:project-info模块。transformhookfunction：实现自动导入功能。到第二步，虚拟模块的功能其实已经实现了，但是我们exportdefaultfunctionprojectInfoPlugin(opts:ProjectInfoPluginOptions={}):PluginOption{const{entry=path.resolve('src/main'),locale}=选择；constlastEntry=entry.split('.')[0];constvirtualModuleId='virtual:project-info';constresolvedVirtualModuleId='\0'+virtualModuleId;返回{name:'vite:project-info',enforce:'pre',resolveId(id){if(id===virtualModuleId){returnresolvedVirtualModuleId;}},load(id){if(id===resolvedVirtualModuleId){returncreateCode({locale,});}},transform(code,id){if(id.includes(path.resolve(lastEntry).replace(/\\/g,'/'))){return{code:`import'${virtualModuleId}';\n${code}`,地图:this.getCombinedSourcemap(),};}},};}函数支持在浏览器控制台直接输出项目相关信息，支持如下代码用法：importprojectInfofrom'virtual:project-信息';控制台日志（projectInfo.version）；//版本信息console.log(projectInfo.buildTime);//构建时间console.log(projectInfo.name);//项目名称console.log(projectInfo.description);//项目描述console.log(projectInfo.repository);//仓库链接console.log(projectInfo.author);//项目负责人或作者
