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

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

• 實現微前端，我想了一想，大概有十種方式
• 想學習微前端的小夥伴，能夠看我以前對微前端源碼解析、加載方式、以及我開源的微前端框架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,感受對你有幫助，能夠右下角點個在看，關注一波公衆號:[前端巔峯]