一步一步学习微前端

我正在参加「掘金·启航计划」

为什么需要微前端?

当我们开发大型的前端应用时,通常需要将应用拆分为多个子应用进行开发和维护。这时候微前端就显得尤为重要。

微前端是一种架构模式,它将前端应用程序拆分为多个更小的、相对独立的部分,每个部分都可以独立开发,测试,部署和扩展。在微前端架构中,每个子应用都是一个独立的应用程序,可以独立部署和运行。

这样,我们就可以将前端应用程序的开发,测试,部署和维护工作分解成多个更小的任务,提高应用程序的可维护性和可扩展性。微前端的实现方式有多种,其中比较常见的是通过iframe,web,compponnets或者js模块加载器实现子应用的隔离和独立运行,通过这些方式,不同的子应用之间可以相互独立、相互通信,从而实现一个完整的前端应用程序。

主要分为:

  1. 主应用: 负责整个应用的框架搭建、路由分发和子应用的注册和协调管理。
  2. 子应用:独立开发的前端应用程序,可以独立运行,也可以作为主应用的一个子模块运行。

搭建小demo:

  1. 首先需要创建主应用,我们可以使用create-react-app快速创建一个react应用:
npx create-react-app demo
  1. 安装微前端插件

……..任意即可,文末有推荐的npm插件

  1. 就可以在主应用的入口文件src/index.ts中定义子应用列表,注册这个子应用。
import React from 'react'
import ReactDOM from 'react-dom'
// 定义子应用
const apps = [
    {
      name:'react-app', //唯一性(名称)
      entry:'//locathost:8081',(子应用的入口url)
      container: '#subapp-viewport', (子应用渲染的容器,通常是一个dom或选择器)
      activeRule:'/react-app'(子应用激活规则,指定该子应用应该在哪些url下被激活)
    }
]
// 注册子应用
registerMicroApps(apps)
// 启动微前端插件
start()

eg: registerMicroApps中是一个数组,其中包含了注册子应用的配置信息,每个配置项是一个对象,至少包含以下几个属性:name,entry….

  1. 创建子应用:react应用

再次创建一个react应用

npx create-react-app subapp-react

安装依赖npm install;

进入到src/idnex.ts中加入以下代码:

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App';  
  
let instance = null;  
  
function render() {  
  ReactDOM.render(<App />document.getElementById('root'));  
}  
  
// 开发环境下直接渲染  
if (process.env.NODE_ENV === 'development') {  
  render();  
}  
  
// 导出渲染函数,微前端会调用此函数渲染子应用  
export async function bootstrap() {}  
export async function mount() {  
  render();  
}  
export async function unmount() {  
  instance.$destroy();  
}

这里同样定义了子应用的渲染函数,用于在主应用中渲染子应用。在开发环境下直接渲染,而在生产环境下则通过导出三种函数,由微前端调用。

启动应用:

我们分别启动主应用和子应用,就可以实现两个文件夹同时运行在一个页面中啦。
and,可以在主应用中设置共享状态,并传递给子应用。插件中自行探索.

分享微前端插件 : qiankun

原文链接:https://juejin.cn/post/7228882326699884603 作者:霍格沃茨魔法师

(0)
上一篇 2023年5月4日 上午11:08
下一篇 2023年5月5日 上午10:00

相关推荐

发表评论

登录后才能评论