Vite 绝对于 Webpack 上手难度小，简略的配置，开箱即用。尽管目前生态不如 Webpack，不过生态也逐步的丰盛起来。

通过了一些 Vite 插件编写实际，明天来说说虚构模块（Virtual Modules ），也顺便介绍下 vite-plugin-project-info 插件。

虚构模块的概念

虚构模块是 Vite 沿用 Rollup 的虚构模块，虚构模块相似 alias 别名，然而模块的内容并非间接从磁盘中读取，而是编译时生成。

虚构模块是一种很实用的模式，使你能够对应用 ESM 语法的源文件传入一些编译时信息。

虚构模块实现例子

首先你可能须要先理解插件编写的 API。

这里间接搬运官网的例子：

export default function myPlugin() {  const virtualModuleId = 'virtual:my-module'  const resolvedVirtualModuleId = '\0' + virtualModuleId  return {    name: 'my-plugin',    resolveId(id) {      if (id === virtualModuleId) {        return resolvedVirtualModuleId      }    },    load(id) {      if (id === resolvedVirtualModuleId) {        return `export const msg = "from virtual module"`      }    }  }}

而后代码中引入这些模块：

import { msg } from 'virtual:my-module'console.log(msg)

实际剖析: vite-plugin-project-info

<img width="500" src="https://user-images.githubusercontent.com/1954171/182008160-4030aaf4-46e1-4e99-bace-d27ad9a48814.png"/>

vite-plugin-project-info 是 Vite 我的项目信息插件，应用后会在 Conole 面板输入版本、构建工夫等信息。

配合虚构模块实现插件

  1. resolveId 钩子函数：实在虚构模块 ID 转换为外部虚构模块 ID。
  2. load 钩子函数：匹配外部虚构模块 ID，并返回编译时的代码，最终实现了 virtual:project-info 模块。

  3. transform 钩子函数：实现主动 import 性能

    截止第二步其实曾经实现了虚构模块的性能，然而咱们

export default function projectInfoPlugin(opts: ProjectInfoPluginOptions = {}): PluginOption {  const { entry = path.resolve('src/main'), locale } = opts;  const lastEntry = entry.split('.')[0];  const virtualModuleId = 'virtual:project-info';  const resolvedVirtualModuleId = '\0' + virtualModuleId;  return {    name: 'vite:project-info',    enforce: 'pre',    resolveId(id) {      if (id === virtualModuleId) {        return resolvedVirtualModuleId;      }    },    load(id) {      if (id === resolvedVirtualModuleId) {        return createCode({          locale,        });      }    },    transform(code, id) {      if (id.includes(path.resolve(lastEntry).replace(/\\/g, '/'))) {        return {          code: `import '${virtualModuleId}';\n${code}`,          map: this.getCombinedSourcemap(),        };      }    },  };}

性能应用

反对间接在浏览器 Console 中输入相干我的项目信息，同时反对如下代码应用：

import projectInfo from 'virtual:project-info';console.log(projectInfo.version); // 版本信息console.log(projectInfo.buildTime); // 构建工夫console.log(projectInfo.name); // 项目名称console.log(projectInfo.description); // 我的项目形容console.log(projectInfo.repository); // 仓库链接console.log(projectInfo.author); // 我的项目负责人或者作者