在前面的一些介紹,相信你對微前端已經(jīng)有了一個相對完整的認知.
下面介紹一下,再開發(fā)過程中我的一些小技巧與處理方法.

動態(tài)入口

當有新的子模塊會掛載到項目中的時候,在UI中肯定需要一個新的入口進入子模塊的UI.
而這樣一個入口,是需要動態(tài)生成的.

image

例如:圖中左邊的菜單,不應該是代碼寫死的.而是根據(jù)每個模塊提供的數(shù)據(jù)自動生成的.

不然每次發(fā)布新的模塊,我們都需要在最外面的這個框架修改代碼.這樣就談不上什么獨立部署了.

靜態(tài)數(shù)據(jù)共享

想要達到上面所的效果,我們可以這樣做.

// ~/common/menu.js

import { isUrl } from '../utils/utils'
let menuData = [
  {
    name: '模塊1',
    icon: 'table',
    path: 'module1',
    rank: 1,
    children: [
      {
        name: 'Page1',
        path: 'page1',
      },
      {
        name: 'Page2',
        path: 'page2',
      },
      {
        name: 'Page3',
        path: 'page3',
      },
    ],
  }
]
let originParentPath = '/'
function formatter(data, parentPath = originParentPath, parentAuthority) {
    ...
}

// 在這里,我們對外導出 這個模塊的菜單數(shù)據(jù)
export default menuData

// Store.js
import { createStore, combineReducers } from 'redux'
import menuDate from './common/menu'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
...

// 我們拿到數(shù)據(jù)之后,用一個reducer函數(shù)返回我們的菜單數(shù)據(jù).
function menu() {
  return menuDate
}

...


// 最終以Store.js對外導出我們的菜單數(shù)據(jù),在注冊的時候,每個應用都可以拿到這個數(shù)據(jù)了
export const storeInstance = createStore(combineReducers({ namespace: () => 'list', menu, render, to }))

當我們的Base模塊,拿到所有子模塊的菜單數(shù)據(jù),把他們合并后,就可以渲染出正確的菜單了.