实现微前端的十种方式 【一】

  • 实现微前端，我想了一想，大概有十种方式
  • 想学习微前端的小伙伴，可以看我之前对微前端源码解析、加载方式、以及我开源的微前端框架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,感觉对你有帮助，可以右下角点个在看，关注一波公众号:[前端巅峰]