4-6 Umi常见的插件集成
Umi 插件体系概述
Umi 的核心理念是"插件化"——所有功能都通过插件提供，开发者按需开启。以下是国内企业级项目中最常用的插件集成方案。
Sass 样式方案
Umi 内置支持 Sass，无需额外安装：
// .umirc.ts
export default {
sass: {},
// 或使用 CSS Modules（推荐）
cssLoader: {
modules: {
auto: true, // 自动识别 .module.scss 文件
},
},
};
typescript
// src/pages/Home/index.module.scss
.container {
padding: 24px;
.title {
font-size: 24px;
color: #333;
}
}
scss
// src/pages/Home/index.tsx
import styles from './index.module.scss';
export default function Home() {
return (
<div className={styles.container}>
<h1 className={styles.title}>Home Page</h1>
</div>
);
}
tsx
DVA 数据流管理
DVA 是基于 Redux 的数据流方案（类似 Vue 中的 Vuex），在 Umi 中通过插件集成：
// .umirc.ts
export default {
dva: {},
};
typescript
传统 DVA Model（Umi 3 风格）
// src/models/user.ts
export default {
namespace: 'user',
state: {
list: [],
total: 0,
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryUsers, payload);
yield put({ type: 'save', payload: response });
},
},
};
typescript
函数式 Model（Umi 4 / Umi Max 推荐）
// src/models/userModel.ts
import { useState, useCallback } from 'react';
import { fetchUsers } from '@/services/user';
export default function useUserModel() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(false);
const [total, setTotal] = useState(0);
const loadUsers = useCallback(async (params?: QueryParams) => {
setLoading(true);
try {
const { data, total } = await fetchUsers(params);
setUsers(data);
setTotal(total);
} finally {
setLoading(false);
}
}, []);
return { users, loading, total, loadUsers };
}
typescript
Qiankun 微前端集成
qiankun 是蚂蚁集团出品的微前端框架，Umi 通过插件方式深度集成：
// .umirc.ts
export default {
qiankun: {
master: {
// 主应用配置
apps: [
{
name: 'sub-app-1',
entry: '//localhost:8001',
},
{
name: 'sub-app-2',
entry: '//localhost:8002',
},
],
},
},
};
typescript
主应用加载子应用
// src/pages/Layout.tsx
import { MicroApp } from 'umi';
export default function Layout() {
return (
<div>
<nav>主应用导航</nav>
<MicroApp name="sub-app-1" />
</div>
);
}
tsx
子应用配置
// 子应用 .umirc.ts
export default {
qiankun: {
slave: {},
},
};
typescript
微前端架构示意：
主应用（Umi + qiankun master）
├── 导航栏
├── 侧边栏
└── 内容区域
├── 子应用1（React + Umi slave）
├── 子应用2（Vue）
└── 子应用3（Angular）
text
Request 请求方案
Umi Max 内置了基于 umi-request 的请求封装：
// src/app.ts（全局请求配置）
export const request = {
timeout: 10000,
errorConfig: {
errorHandler(error) {
if (error.response?.status === 401) {
// 跳转登录
}
},
},
requestInterceptors: [
(url, options) => {
const token = localStorage.getItem('token');
return {
url,
options: {
...options,
headers: {
...options.headers,
Authorization: `Bearer ${token}`,
},
},
};
},
],
};
typescript
// src/services/user.ts
import { request } from 'umi';
export async function fetchUsers(params?: { page?: number; size?: number }) {
return request('/api/users', {
method: 'GET',
params,
});
}
export async function createUser(data: CreateUserDTO) {
return request('/api/users', {
method: 'POST',
data,
});
}
typescript
插件配置汇总
| 插件 | 配置项 | 用途 |
|---|---|---|
sass | sass: {} | Sass/Less 样式支持 |
dva | dva: {} | 状态管理 |
antd | antd: {} | Ant Design 组件库 |
qiankun | qiankun: { master/slave } | 微前端 |
locale | locale: {} | 国际化 |
access | access: {} | 权限管理 |
request | 内置 | HTTP 请求封装 |
model | 内置 | 函数式数据模型 |
这些插件的共同特点是配置简洁、中文文档完善，使得 Umi + Ant Design + DVA 成为国内企业级 React 开发的首选三件套。
↑