umi插件开发
插件是umi的一个重要组成部分,像webpack一样,插件贯穿了umi的整个生命周期,因此了解umi的插件原理是理解umi的重要环节。
本章将开发一个最简单的插件,先对插件开发有一个简单的认识。
环境准备
- 创建umi项目
yarn create umi
,具体可参考 快速上手 | UmiJS - 进入项目根目录,创建plugin文件夹
mkdir plugins
创建第一个插件
进入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
可在最后一行看到插件已被加载
启动umi项目
运行yarn dev
,可以看到插件中打印的文字已经出现在控制台上:
总结
至此我们就完成了第一个umi插件的开发:
- 创建一个普通的umi项目
- 创建插件文件
- 在umi配置中加载插件
【额外小知识】约定的插件文件
在前面我们创建的插件是通过配置文件加载的,如果直接在项目根目录下创建plugin.ts
,umi会自动加载这个插件,不需要通过配置指定:
// plugin.ts
import { IApi } from "umi";
export default (api: IApi) => {
api.onStart(() => {
console.log("AUTO Plugin");
});
};
查看插件加载列表可以看到umi已经成功加载插件: