micro微前端心得

微前端的架构理念：将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用

微前端框架对比

1. micro-app single-spa qiankun

single-spa是通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染。single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount。qiankun是基于single-spa进行封装，所以这些特点也被qiankun继承下来，并且需要对webpack配置进行一些修改。

micro-app是借鉴了WebComponent的思想。基应用与子应用 之间通过micro-app进行相互联系，micro-app 由CustomElement + 自定义的ShadowDom组成的。修改和配置最少的

2.基应用控制子应用路由展示

需求：跳转基座应用的my-app页面，my-app页面中嵌入子应用，我们要展现子应用的page1页面。

那么浏览器地址应该为：域名/my-page/page1，我们在基座中跳转的参数为：router.push('/my-page/page1')

此时流程为：基座应用匹配到/my-page路径并渲染my-app页面，因为my-app页面中嵌入了子应用，此时子应用开始加载并渲染，子应用在渲染时会匹配到/my-page/page1并渲染page1页面

1） 基座应用是history路由，子应用也是history路由

2） 基应用配置路由my-page，并跳转

  ```
  {
    path: '/my-page/:page*',
    name: 'my-page',
    component: () => import(/* webpackChunkName: "about" */ '../views/MyPage.vue')
  }
  router.push('/my-page/page1')
  ```
  

3） 基应用 嵌套子应用, 设置子应用的基础路由my-page

  ```
  <micro-app url='http://www.xxx.com/index.html' baseroute='/my-page'></micro-app>
  ```
  

4） 子应用 设置基础路由，配置路由page1

  ```
  const baseUrl = (window as any).__MICRO_APP_BASE_ROUTE__ ?? '/'
    const router = createRouter({
      history: createWebHistory(baseUrl),
      routes
    })
  ```

3. Property 'MICRO_APP_BASE_ROUTE' does not exist on type 'Window & typeof globalThis

1. (window as any).MICRO_APP_BASE_ROUTE
2. 在src下创建 xxx.ts 文件，定义全局Window类型，会默认编译文件

    interface Window {
      __MICRO_APP_ENVIRONMENT__: boolean;
      __MICRO_APP_NAME__: string;
      __MICRO_APP_BASE_ROUTE__: string;
      __MICRO_APP_PUBLIC_PATH__: string;
      __MICRO_APP_BASE_APPLICATION__: boolean
    }

4.子应用在沙箱环境中如何获取到真实window

• 1、new Function("return window")() 或 Function("return window")()
• 2、(0, eval)('window')
• 3、window.rawWindow

5. 子应用间控制

基应用创建 object(一个属性是函数)， 子应用接收数据并 调用函数.

removeDomScope 打破作用域， 可以跳转到其他子应用

<micro-app name='子应用名称' url='url' :data='microAppData' ></micro-app>

microAppData: { pushState: (path) => { 
    removeDomScope() 
    this.$router.push(path) 
} }

子应用调用函数

window.microApp.getData().pushState(path)

6. 子应用axios网络请求使用绝对路径或相对路径

相对路径 baseURL= '/' 基座应用域名 + /xxxx, 生产环境 基座应用nginx文件 绝对路径 baseURL= 'http://xxx' 子应用域名 + /xxx , 生产环境 子应用nginx文件