實現微前端的十種方式 【第一種】

Peter譚金傑發表於2020-07-06
前端

實現微前端的十種方式 【一】

  • 實現微前端，我想了一想，大概有十種方式
  • 想學習微前端的小夥伴，可以看我之前對微前端原始碼解析、載入方式、以及我開源的微前端框架chunchao原始碼

今天講一種最簡單的微前端實現方式

  • Vue和React、Jquery共同開發,通訊
babel配置

{
    "presets": [
        "@babel/preset-react",
        [
            "@babel/preset-env",
            {
                "targets": {
                    "electron": "4"
                },
                "modules": false
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-async-generators",
        "@babel/plugin-syntax-dynamic-import"
    ]
}
  • Jquery相容性最好，vue和react不相上下，需要一些特定的babel進行處理,這裡不做詳細講解

如何做到

  • React的入口
import React from 'react';
import dva from 'dva';
import App from './App';

import demo from '../App/Dva-model/demo.js';
const app = dva();

app.model(demo);
app.router(({ history, app: store }) => (
  <App history={history} getState={store._store.getState} dispatch={store._store.dispatch} />
));

app.start('#root');
  • 以React元件為基座，vue為子應用

進入某個React元件，然後呼叫vue渲染

  • 定義vue入口檔案
function vueRender(props) {
  new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount('#test');
}

export default vueRender;
  • 在React元件中呼叫vue渲染
import vueRender from '@v/startVUe.js';
...
  componentDidMount() {
    vueRender(this.props);
  }
  • 這樣vue能接受到React元件的props，然後也可以正常通過vue渲染，使用vue的技術棧了

如何通訊，資料共享？

  • 這其實是最簡單的，類似redux應該是最簡單的,在基座中生成state和reducer，也可以通過事件匯流排,Map資料維護一份
  • 像dva封裝了dispatch在props中，只要react基座檔案connect了，那麼就可以拿到dispatch，可以呼叫任意的reducer和effects.

簡單的乞丐版微前端就搞定了，是不是很簡單？

  • 大道至簡
  • 即便讓你寫一個微前端框架其實也很簡單的,只要你願意投入精力～
  • 認真收藏這個系列吧,記得點個關注和在看,相信你能收穫很多很多~

最後

  • 如果感覺寫得不錯，關注下微信公眾號 [前端巔峰]
  • 我是Peter，架構設計過20萬人端到端加密超級群功能的桌面IM軟體,我的微信:CALASFxiaotan
  • 另外歡迎收藏我的資料網站:前端生活社群:https://qianduan.life,感覺對你有幫助，可以右下角點個在看，關注一波公眾號:[前端巔峰]

相關文章