关于前端:Vite-插件编写之虚拟模块

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); // 我的项目负责人或者作者