实现微前端的十种方式-第一种

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

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