03 Umi 插件开发 - 牛刀小试 - layout 插件

经过上两节课的简单介绍，相信你已经对 umi 插件的运行和加载有一个简单的了解了。今天我们就来尝试着编写一个 umi 插件。

这里先强调一个观念，经常遇到有网友问我，“我想写一个 umi 插件试试，我要怎么做呢？”

其实这个问题我是没办法回答的，因为我都是依照“遇到问题解决问题，项目中怎么做，其实插件中就怎么做”，你可以简单的理解，umi 插件并不是什么“黑魔法”，它只是对你项目中的代码做一层内置封装复用。它并不是什么高深莫测的“框架开发”，它是人人可用的可编写的“业务交付”。当然了，插件能做的事情还有很多，我们可以在后续的实践中慢慢掌握。现在你只需要记住一点，“先聊需求再聊解法”。

给专栏 demo 增加广告位

我们实现一个简单的需求，给这个专栏的 demo 都添加页眉，页脚的广告链接。效果如下图：

在项目代码中实现

如果你没有 `learn-for-umi-plugin` 项目

你可以根据这个步骤，新建一个。或者直接下载归档的源码learn-for-umi-plugin

添加项目 tsconfig 配置

执行 npx umi g 然后选 typescript

✔ Pick generator type › Enable Typescript -- Setup tsconfig.json
info  - Write package.json
info  - Write tsconfig.json
info  - Write typings.d.ts

info  - Install dependencies with pnpm

会自动修改配置文件和安装需要的模块。

安装 @alita/flow

这个库是我随便写的用来固定页眉和页脚的组件库，你也可以自己写一写样式，通过 position 和 display 来实现。

新建 src/layouts/index.tsx

如果你不知道这是啥，可以看一下这个文章。015 在 Umi 中使用 Ant Design 编写全局布局

逻辑很简单，就是加一个全局 layout 实现简单的布局。

import React from "react";
import { Outlet } from "umi";
import { Page, Content, Header, Footer } from "@alita/flow";

const Layout = ({}) => {
  return (
    <Page>
      <Header></Header>
      <Content>
        <Outlet />
      </Content>
      <Footer></Footer>
    </Page>
  );
};

export default Layout;

详细代码如下：

源码归档 learn-for-umi-plugin@0.0.2

引申讨论

我们在项目中实现有两个主要的问题

1. 我们占用了项目中的全局 layout 入口，如果项目中需要自定义 layout 的时候，就会产生冲突
2. 既然是广告，我们期望我们写好的内容用户是不可修改的。如果暴露在项目中，用户就可以随意更改。

封装成组件

新建 plugin 目录存放我们插件相关的内容，umi 支持从 npm 包和 本地加载插件，但是我们一般提供给别人使用的插件都是 npm 包。为了简化这个演示 demo 的复杂度，我没有使用多包管理，这里我们默认在 plugin 下编写的所有代码，都是非当前项目代码。

初始化插件文件

初始化插件文件 plugin/index.ts，这是上一篇文章的内容，这里不多介绍，内容如下：

import { IApi } from "umi";

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

增加配置

新建 config/config.ts，内容如下：

import { defineConfig } from "umi";

export default defineConfig({
  plugins: [require.resolve("../plugin/index")],
});

编写插件

复制 src/layouts/index.tsx 到 plugin/Layout.tsx。

使用 api.addLayouts 添加全局 layout 组件。 传入的 fn 不需要参数，返回 { id?: string, file: string }。

import { IApi } from "umi";
import { join } from "path";

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

  api.addLayouts(() => {
    return [
      {
        id: "juejin-layout",
        file: join(__dirname, "Layout.tsx"),
      },
    ];
  });
};

运行项目 npx umi dev，你将会看到有两个页眉和页脚。

你可以随意的在 src/layouts/index.tsx 中修改代码，查看表现。并在最终删除 src/layouts/index.tsx 文件，因为此时我们不需要它了。

源码归档 learn-for-umi-plugin@0.0.3

总结

是不是觉得编写插件如此简单？其实和项目中编写没太多实质性的差异，需要注意的是如果是 npm 引入需要处理幽灵依赖问题，后续还要学会如何给 layout 传递参数，如何增加配置，如何生成文件，这些内容会在我们后续的文章中，慢慢掌握。

感谢阅读，如果你对这个内容感兴趣，可以关注这个专栏:Umi 插件开发。如果你觉得这个文章对你有帮助，请点赞评论收藏支持我，并将这个文章分享给更多的朋友，文章的数据是我持续更新的动力。感谢。