当前位置：首页 > news >正文

从零到一：编写一个简单的 Umi 插件并发布到 npm

news 2025/11/13 8:00:53

一、前言

最近在学习 Umi 框架时，发现它的插件机制特别灵活。于是我尝试写一个最简单的 Umi 插件，比如在启动项目时输出一句提示语。

做完这个我们可以了解插件的基本规范，以及如何打包发布到npm，如何让别人npm install 直接安装使用。

二、创建插件项目

创建项目文件夹

这样项目就创建好了，而且携带了package.json文件，现在我们需要添加一个依赖umi，然后安装umi。

执行pnpm install 就自动安装好依赖了。

三、注册登录npm然后发布本地插件到npm

注册到npm官网就可以，这里我直接登录好了。

登录之后就可以直接npm publish 直接上传到npm了。

也可以用命令注册，npm adduser 然后输入账户密码就可以了，邮箱也需要填写。

4、发布之后通过npm install 安装插件并且使用

首先可以本地写好插件上传发布之前在自己项目用pnpm link 插件名称本地测试一下。

首先在插件项目目录pnpm link 将插件包link到npm 或者pnpm环境

然后在项目目录npm link 插件包名运行即可

在自己的项目输入npm install 自己的插件名称。

这样插件就安装完成了。

安装完之后我们在自己的umi项目里面，在.umirc.ts配置或者config/config.ts中配置defineConfig中的plugins插件配置项就可以了。

import { defineConfig } from "umi";export default defineConfig({routes: [{ path: "/", component: "index" },{ path: "/docs", component: "docs" },{ path: "/login", component: "login", layout: false },{ path: "/weather", component: "weather" },{ path: "/promise", component: "Promise" },{ path: "/aiChat", component: "aiChat", layout: false },{ path: "/websocket", component: "websocket", layout: false },{ path: "/test", component: "test", layout: false },{ path: "/streamingChat", component: "streamingChat", layout: false },{ path: "/fileUploadDemo", component: "FileUploadDemo", layout: false },],npmClient: "pnpm",mock: {include: ["src/mock/**/*.ts"], // 启用mock功能并指定mock文件位置},plugins: ["umi-plugin-hello-lcy"],
});

运行项目控制台会输出

5、常见问题

问题	原因	解决办法
`npm error EPRIVATE`	`package.json` 中 `"private": true`	删除该字段
`npm error 402 Payment Required`	使用了作用域包（`@xxx/`）且没设置公开	加上 `--access public`
插件未生效	没在 Umi 配置文件中启用	确认在 `plugins` 数组中声明