我的第一个 umi 插件

光说不练假把式

继上文「umi 插件体系的一些初步理解」从理论层面分析 umi 插件后，本文将实战一个迷你 umi 插件。
代码源码在此：https://github.com/frontend9/umi-plugin-demo
可以码文互看😄

第一步，创建 umi 简单应用

首先，安装 umi

tnpm i umi -S

其次，编写示例页面，得益于 umi 的「约定优于配置」理念，只需要一个文件即可

// pages/index.js
export default () => <div>Index Page</div>

OK，跑一下

npx umi dev

第二步，创建 umi 简单插件

新建 umi-plugin-hello 文件夹，在里面添加 package.json 及 src/index.js

// package.json
{
    "name": "umi-plugin-hello",
    "version": "0.0.2",
    "main": "./lib/index.js",
    "scripts": {
      "build": "node_modules/babel-cli/bin/babel.js src --out-dir lib"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-preset-es2015": "^6.24.1"
    },
    "babel": {
      "presets": ["es2015"]
    }
  }

这里使用 babel 配置 build 命令，这样在构建时就会把源码中 ES6 转码为 ES5（社区约定，一般 npm 包都是转码的）。

// src/index.js
export default function(api, opts = {}) {
    api.register('modifyHTML', ({ memo }) => {
      memo = memo.replace(
        '</head>',
        `
  <script>alert("Wow~~~ it works.")</script>
  </head>
      `.trim(),
      );
      return memo;
    });
  }

这个就是插件逻辑了：

1. 调用 modifyHTML 这个 hook 点，并且提供一个 function 用于改写 HTML 文件。

2. 这个 function 会传入 memo，这个 memo 即是 umi 在执行插件 hook 时的 HTML 全文内容。

3. 很显然，这个插件的作用就是通过文本替换，给 HTML 文件注入一个 alert。

然后，依次执行

1. tnpm i

2. tnpm run build

3. tnpm pack

就会在本地生成一个 npm 包。

第三步，引入 umi 插件

回到工程根目录，执行

tnpm i ~/tmp.729/umi-plugin-hello/umi-plugin-hello-0.0.2.tgz

安装上一步产出的 umi 插件 npm 包。（注意：npm 包路径使用全路径。）

然后，新建 .umirc.js 引入插件

// .umirc.js
export default {
    plugins: [
      'umi-plugin-hello',
    ],
  };

最后，重新 run 一下工程，就可以了！