0.前言

本篇博客梳理我写的第一个 umi 插件。

希望实现的功能：在当前运行工程的全局对象 window 中注入依赖包 的版本信息。

具体实现思路：在 src/.umi/umi.ts 中注入代码，如 windows.xxx = { pkgName1: v1.0.1 , pkgName2: v1.0.2}。

之前看到一篇博客提到了一个需求，就是当线上产品频繁更新部署时，希望做到通知用户手动触发页面刷新行为。那篇文章的具体解决思路是，设计一个轮询函数，频繁去比较当前工程的版本信息，当发现当前运行版本小于远端版本时，提示用户刷新。

1. UMI 插件：注入静态信息。

import { IApi } from "umi";
import { join } from "path";
import * as utils from "@umijs/utils";
const { winPath, glob } = utils; // 在 umi 中已经内置常用的一些工具库

export default (api: IApi) => {
  api.describe({
    key: "static",
    config: {
      shema(Joi) {
        return Joi.alternatives().try(
        	Joi.object(),
          Joi.boolean().invalid(true),
        );
      },
      // 当配置修改后，自动去重新构建插件
      onChange: api.ConfigChangeType.regenerateTmpFiles,
    },
    enableBy: api.EnableBy.config
  });

  // 可以通过 path 获取当前工程的 `node_modules` 文件夹
  const { path:{absNodeModulesPath} } = api;
  const basePath = winPath(absNodeModulesPath || "");

  // 使用 glob 去收集 node_modules 的版本信息
  // 这里既要去读取 `@umijs/*/package.json` 也要读取 `xxx/package.json`
  let versionContent = glob.sync("{@umijs,xxx}{/*,}/package.json",{
    cwd: basePath;
  }).reduce((res, pkgName) =>{
    if(是否包符合要求){
      // 读取package.json 中的 name 字段和 version 字段。
      const { name, version } = require(join(basePath, pkgName));
      if(name && version) res[name] = version;
    }
    return res;
  }, {});

  // 可以往 .umi/umi.ts 注入版本信息
  api.addEntryCode(()=>{
    return `window.xxxVersions = ${JSON.stringify(versionsContent)};`
  })
}