【微前端】微前端最终章-qiankun指南以及微前端整体探索 (3)


我们用main做主应用,micro做子应用,按照我们的api,子应用只需要配置一个register就可以引入子应用了
其中子应用需要调出webpack配置,create-react-app默认是不允许手动配置的,使用命令就可以了
进入micro-app的文件夹目录运行(create-react-app也有overload的办法更改配置,这里为了方便直接用命令调出来):

npm run eject

这样项目的准备工作就做好了。

 

子应用配置

配置子应用两个步骤,一个是生命周期的配置。 我们把生命周期函数写好放到main.js中:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

然后我们把reactDom.render放到mount生命周期里调用,让qiankun在准备好加载mount的时候再去初始化应用:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

unmount的注销操作也不能忘记:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

我们更改一下子应用的根节点id,在父应用中再去引用它(不要忘了html里也需要更改):

【微前端】微前端最终章-qiankun指南以及微前端整体探索

最后再把webpack中的配置修改一下:
1、修改devserver支持cors 修改端口
headers: { 'Access-Control-Allow-Origin': '*', }

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 

【微前端】微前端最终章-qiankun指南以及微前端整体探索


2、修改增加bundle的导出,在webpack.config.js增加配置:

 

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 

父应用配置

然后我们就可以去在main应用中,注册了首先要

npm install qiankun --save

然后在main文件index.js中注册子应用:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 


别忘了我们还需要在public/index.html中写一个div容器,id是我们子应用的那个id,用来承载子应用的渲染:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 

然后我们就可以开始运行看一看了:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 

运行成功,随便改一下micro的样式看看效果:

【微前端】微前端最终章-qiankun指南以及微前端整体探索

 

 

 


接下来我们需要处理一下路由跳转的问题。

 

路由的处理实践

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgypy.html