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

一、前言

最近在学习 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插件配置项就可以了。

php 复制代码

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` 数组中声明

6、总结

这一套流程下来，你已经理解了 Umi 插件的基本结构,能在本地测试插件(npm link 插件名称),成功将插件发布到 npm,

并能被其他项目直接安装使用。

值得一提的工具

nrm包镜像源管理工具类似于nvm，管理镜像源
如果要在npm公布上传插件包，需要切换到对应npm镜像源然后登录
如果公司内网也需要切换到内网镜像源
相关命令为 nrm ls 查看当前镜像源以及使用的镜像源
nrm use 切换镜像源