umijs 接入 icestark

umijs接入文档 https://micro-frontends.ice.work/docs/guide/use-child/others/#umi-%E5%BA%94%E7%94%A8
umijs接入案例 https://github.com/maoxiaoke/icestark-umi-child

  1. pnpm add @ice/stark-app

app.tsx

src/app.tsx

  1. import ReactDOM from 'react-dom';
  2. import { 
  3.   isInIcestark, 
  4.   getMountNode, 
  5.   registerAppEnter, 
  6.   registerAppLeave
  7. } from '@ice/stark-app';
  9. // 在 icestark 中修改渲染的节点
  10. export function modifyClientRenderOpts(memo: any) {
  11.   return {
  12.     ...memo,
  13.     rootElement: isInIcestark() ? getMountNode() : memo.rootElement
  14.   };
  15. }
  17. // 为 icestark 注册生命周期
  18. export function render (oldRender: any) {
  19.   if (isInIcestark()) {
  20.     registerAppEnter(() => {
  21.       oldRender();
  22.     });
  23.     registerAppLeave(() => {
  24.       ReactDOM.unmountComponentAtNode(getMountNode());
  25.     });
  26.   } else {
  27.     oldRender();
  28.   }
  29. }

修改在 icestark 中修改渲染的根节点
umijs midifyConfig https://umijs.org/docs/api/plugin-api#modifyconfig

render

覆写 umijs默认的 render，为 icestark 注册生命周期
https://umijs.org/docs/api/runtime-config#renderoldrender-function

.umirc.ts

修改 umi 子应用 .umirc.ts，通过 base 属性添加路由前缀

app.tsx icestart

完整的子应用接入 icestart配置

  1. /**
  2.  * 运行时配置
  3.  * https://umijs.org/docs/api/runtime-config#dva
  4.  *
  5.  * icestark 微前端接入
  6.  * https://micro-frontends.ice.work/docs/guide/use-child/others
  7.  */
  9. import { useState } from 'react'
  10. import ReactDOM from 'react-dom'
  11. import dayjs from 'dayjs'
  12. import 'dayjs/locale/zh-cn'
  13. import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
  15. import {
  16.     isInIcestark,
  17.     getMountNode,
  18.     registerAppEnter,
  19.     registerAppLeave,
  20. } from '@ice/stark-app'
  22. import { DEFAULT_NAME } from '@/constants'
  23. import Settings from '../config/defaultSettings'
  25. dayjs.locale('zh-cn')
  27. const purePath = [
  28.     '/designer',
  29.     '/publish',
  30. ]
  32. // 在 icestark 中修改渲染的节点
  33. export function modifyClientRenderOpts(memo: any) {
  34.     return {
  35.         ...memo,
  36.         rootElement: isInIcestark() ? getMountNode() : memo.rootElement,
  37.     }
  38. }
  40. // 为 icestark 注册生命周期
  41. export function render(oldRender: any) {
  42.     if (isInIcestark()) {
  43.         registerAppEnter(() => {
  44.             oldRender()
  45.         })
  46.         registerAppLeave(() => {
  47.             ReactDOM.unmountComponentAtNode(getMountNode())
  48.         })
  49.     } else {
  50.         oldRender()
  51.     }
  52. }
  54. // export function rootContainer(container, args) {
  55. //   return React.createElement(ThemeProvider, null, container);
  56. // }
  58. /**
  59.  * 全局初始化数据配置，用于 Layout 用户信息和权限初始化
  60.  * layout 文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
  61.  */
  62. export async function getInitialState(): Promise<{ name: string }> {
  63.     return { name: DEFAULT_NAME }
  64. }
  66. export const layout = () => {
  67.     // eslint-disable-next-line react-hooks/rules-of-hooks
  68.     const [collapsed, setCollapsed] = useState(false)
  70.     return {
  71.         ...Settings,
  72.         pure: !!purePath.find((path) => location.pathname.includes(path)),
  73.         logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
  74.         menu: {
  75.             locale: false,
  76.             type: 'group',
  77.         },
  78.         avatarProps: {
  79.             src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
  80.             size: 'small',
  81.             title: '管理员',
  82.         },
  83.         breakpoint: false,
  84.         // 关闭默认的折叠按钮
  85.         collapsedButtonRender: false,
  86.         collapsed,
  87.         onCollapse: (flag: boolean) => setCollapsed(flag),
  88.         headerContentRender: () => {
  89.             return (
  90.                 <div className="header-render">
  91.                     {collapsed ? (
  92.                         <MenuUnfoldOutlined onClick={() => setCollapsed(!collapsed)} />
  93.                     ) : (
  94.                         <MenuFoldOutlined onClick={() => setCollapsed(!collapsed)} />
  95.                     )}
  96.                 </div>
  97.             )
  98.         },
  99.         menuFooterRender: (props: any) => {
  100.             if (props?.collapsed) return undefined
  101.             return (
  102.                 <p
  103.                     style={{
  104.                         textAlign: 'center',
  105.                         paddingBlockStart: 12,
  106.                     }}
  107.                 >
  108.                     Power by {DEFAULT_NAME}
  109.                 </p>
  110.             )
  111.         },
  112.         bgLayoutImgList: [
  113.             {
  114.                 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
  115.                 left: 85,
  116.                 bottom: 100,
  117.                 height: '303px',
  118.             },
  119.             {
  120.                 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
  121.                 bottom: -68,
  122.                 right: -45,
  123.                 height: '303px',
  124.             },
  125.             {
  126.                 src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
  127.                 bottom: 0,
  128.                 left: 0,
  129.                 width: '331px',
  130.             },
  131.         ],
  132.         // dva: {
  133.         //   hmr: true,
  134.         // },
  135.     }
  136. }
  138. // export function onRouteChange({ location, clientRoutes, routes, action, basename }: any) {
  139. //   console.log(800, location, clientRoutes, routes, action, basename);
  140. // }