umi插件开发 - 第一个插件

567 阅读1分钟

umi插件开发

插件是umi的一个重要组成部分,像webpack一样,插件贯穿了umi的整个生命周期,因此了解umi的插件原理是理解umi的重要环节。

本章将开发一个最简单的插件,先对插件开发有一个简单的认识。

环境准备

  • 创建umi项目 yarn create umi,具体可参考 快速上手 | UmiJS
  • 进入项目根目录,创建plugin文件夹 mkdir plugins

image.png

创建第一个插件

进入plugin文件夹,新建文件first-plugin.ts

// first-plugin.ts
import { IApi } from "umi";

export default (api: IApi) => {
  api.onStart(() => {
    console.log("First Plugin");
  });
};

在配置中添加插件

// .umirc.ts
import { defineConfig } from "umi";

export default defineConfig({
    plugins: [
        './plugin/first-plugin',
    ],
});

使用命令查看当前插件

.\node_modules\.bin\umi plugin list 可在最后一行看到插件已被加载

image.png

启动umi项目

运行yarn dev,可以看到插件中打印的文字已经出现在控制台上:

image.png

总结

至此我们就完成了第一个umi插件的开发:

  • 创建一个普通的umi项目
  • 创建插件文件
  • 在umi配置中加载插件

【额外小知识】约定的插件文件

在前面我们创建的插件是通过配置文件加载的,如果直接在项目根目录下创建plugin.ts,umi会自动加载这个插件,不需要通过配置指定:

// plugin.ts
import { IApi } from "umi";

export default (api: IApi) => {
  api.onStart(() => {
    console.log("AUTO Plugin");
  });
};

查看插件加载列表可以看到umi已经成功加载插件:

image.png

参考文章

开发插件 | UmiJS

Umi4插件开发 - 最简最快上手的 Umi 插件 Api 快速指南 - 掘金 (juejin.cn)