UMI与Antd融合构建具备微前端平台的前端中台
2023-11-21 07:36:33
前言
在当今数字化的时代，企业对前端中台的需求日益增长。前端中台作为承载各项目组开发的应用平台，需要具备微前端架构、模块化开发、UI组件统一、以及路由管理等功能。
本文将介绍如何利用UMI、Antd、qiankun搭建一个具备微前端平台的前端中台，分享我在项目实践中获得的经验和解决办法，期望对您有所帮助。
构建思路
整体架构
前端中台的整体架构如下图所示：
┌──────────────────────────────────────┐
│ │
│ 前端中台 │
│ │
├──────────────────────────────────────┤
│ │
│ 应用1 │ 应用2 │ 应用3 │
│ │
├──────────────────────────────────────┤
│ │
│ 微前端平台 │
│ │
└──────────────────────────────────────┘
前端中台由微前端平台和应用组成。微前端平台负责应用的加载、卸载、路由管理等功能。应用是独立的业务模块，可以独立开发和部署。
技术栈选择
前端中台的技术栈如下：
- 框架： UMI
- UI组件库： Antd
- 微前端框架： qiankun
UMI是一个前端框架，具有路由管理、状态管理、国际化等功能，非常适合构建大型前端应用。Antd是一个UI组件库，提供了一系列高质量的UI组件。qiankun是一个微前端框架，可以帮助我们轻松地将多个应用集成到一个平台中。
搭建过程
安装依赖
首先，我们需要安装必要的依赖：
npm install umi antd qiankun
创建项目
接下来，我们创建一个新的UMI项目：
npx create-umi-app my-app
集成Antd
为了使用Antd，我们需要在项目中安装Antd的依赖：
npm install antd
然后，在项目根目录下的.umirc.js文件中添加如下配置：
module.exports = {
// ...
antd: {},
};
集成qiankun
为了使用qiankun，我们需要在项目中安装qiankun的依赖：
npm install qiankun
然后，在项目根目录下的.umirc.js文件中添加如下配置：
module.exports = {
// ...
qiankun: {
master: {},
},
};
构建微前端平台
微前端平台是一个独立的应用，需要负责应用的加载、卸载、路由管理等功能。我们可以使用UMI创建一个新的应用作为微前端平台。
在项目根目录下创建master目录，并在其中创建一个src目录和一个.umirc.js文件。在.umirc.js文件中添加如下配置：
module.exports = {
// ...
qiankun: {
slave: {},
},
};
在src目录下创建App.js文件，并添加如下代码：
import { useEffect } from 'react';
import { registerMicroApps, start } from 'qiankun';
const apps = [
{
name: 'app1',
entry: '//localhost:3001',
container: '#app1',
},
{
name: 'app2',
entry: '//localhost:3002',
container: '#app2',
},
];
function App() {
useEffect(() => {
registerMicroApps(apps, {
beforeLoad: (app) => {
console.log('before load', app.name);
},
afterLoad: (app) => {
console.log('after load', app.name);
},
beforeMount: (app) => {
console.log('before mount', app.name);
},
afterMount: (app) => {
console.log('after mount', app.name);
},
beforeUnmount: (app) => {
console.log('before unmount', app.name);
},
afterUnmount: (app) => {
console.log('after unmount', app.name);
},
});
start();
}, []);
return (
<div>
<div id="app1"></div>
<div id="app2"></div>
</div>
);
}
export default App;
构建应用
应用是独立的业务模块，可以独立开发和部署。我们可以使用UMI创建一个新的应用作为子应用。
在项目根目录下创建app1目录，并在其中创建一个src目录和一个.umirc.js文件。在.umirc.js文件中添加如下配置：
module.exports = {
// ...
qiankun: {
slave: {},
},
};
在src目录下创建App.js文件，并添加如下代码：
function App() {
return (
<div>
<h1>App1</h1>
</div>
);
}
export default App;
在项目根目录下创建app2目录，并在其中创建一个src目录和一个.umirc.js文件。在.umirc.js文件中添加如下配置：
module.exports = {
// ...
qiankun: {
slave: {},
},
};
在src目录下创建App.js文件，并添加如下代码：
function App() {
return (
<div>
<h1>App2</h1>
</div>
);
}
export default App;
启动项目
最后，我们可以通过如下命令启动项目：
npm start
访问http://localhost:8000，即可看到微前端平台。点击"App1"和"App2"，即可加载对应的应用。
总结
本文介绍了如何利用UMI、Antd、qiankun搭建一个具备微前端平台的前端中台。通过将应用集成到微前端平台，我们可以实现应用的模块化开发和管理，提高开发效率和降低维护成本。
希望本文对您有所帮助。如果您有任何问题，欢迎留言讨论。
