欢迎关注微信公众号:前端阅读室
什么是 UmiJS?
Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
什么是 qiankun?
Qiankun enables you and your teams to build next-generation and enterprise-ready web applications leveraging Micro Frontends. It is inspired by and based on single-spa.
A quick recap about the concept of Micro Frontends:
Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends
新建 Umi 工程
我们一共需要新建 3 个 Umi 工程:1 个主应用和 2 个子应用 app1、app2。
开发主应用
编写 Layout 代码
新建 src/layouts/index.tsx,编写代码如下:
import React from "react";
import { Link } from "umi";
const Layout: React.FC = ({ children }) => {
return (
<div>
<div>
<div>
<Link to="/app1">app1</Link>
</div>
<div>
<Link to="/app2">app2</Link>
</div>
</div>
{children}
</div>
);
};
export default Layout;
安装 @umijs/plugin-qiankun
yarn add @umijs/plugin-qiankun -D
配置主应用
在 .umirc.ts 中添加配置如下:
qiankun: {
master: {
// 注册子应用信息
apps: [
{
name: 'app1',
entry: 'http://localhost:8001',
},
{
name: 'app2',
entry: 'http://localhost:8002',
},
],
// 配置微应用关联的路由
routes: [
{
path: '/app1',
microApp: 'app1',
},
{
path: '/app2',
microApp: 'app2',
},
],
},
},
开发子应用
修改 index page 代码
为了方便区分 app1 和 app2,我们将 app1 和 app2 工程的 src/pages/index.tsx 分别修改为:
// app1/src/pages/index.tsx
import React from "react";
import styles from "./index.less";
const Index: React.VFC = () => {
return (
<div>
<h1 className={styles.title}>App1</h1>
</div>
);
};
export default Index;
// app2/src/pages/index.tsx
import React from "react";
import styles from "./index.less";
const Index: React.VFC = () => {
return (
<div>
<h1 className={styles.title}>App2</h1>
</div>
);
};
export default Index;
安装 @umijs/plugin-qiankun
yarn add @umijs/plugin-qiankun -D
配置子应用
给 .umirc.ts 增加 qiankun 配置即可:
qiankun: {
slave: {},
},
效果演示
参考
欢迎关注微信公众号:前端阅读室