实现微前端的十种方式 【第一种】
实现微前端的十种方式 【一】
- 实现微前端，我想了一想，大概有十种方式
- 想学习微前端的小伙伴，可以看我之前对微前端源码解析、加载方式、以及我开源的微前端框架
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.
简单的乞丐版微前端就搞定了，是不是很简单？
- 大道至简
- 即便让你写一个微前端框架其实也很简单的,只要你愿意投入精力～
- 认真收藏这个系列吧,记得点个关注和在看,相信你能收获很多很多~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读