以前在下家企业，看朋友用qiankun把一个项目集成到另一个工程中，并且并没iframe引入新项目的割裂感，获得了大伙儿浓浓的一波钦佩~ 其中就包括我。
总算，在最近的一次需求迭代中，拥有微前端的立足之地。我连忙毛遂自荐与产品友善沟通了一下，并确认了应用qiankun。
随后，正式开始漫长碰到坑，填大坑的一个过程~~~
正片开始
什么叫微前端?qiankun也是啥？
微前端是一种前端架构方式，将一个大型新项目拆分成好几个小程序，每一个小程序都能够自主开发、评估和布署，最终通过类似元件的方法组成一个完整的新项目。
single-spa是一个开源系统的微前端ui框架，qiankun都是基于single-spa开发设计框架，它带来了一套完整的微前端解决方法，包含子应用软件的申请注册、载入、通信和生命周期管理等服务。qiankun能够帮助开发者迅速搭建一个具有较高的可扩展性、高扩展性跟高协调能力的前端项目。
什么场景中，我应该用qiankun?
- 在一个远程仓库中协同开发，是一个SPA网页页面，新项目根据路由器3D渲染不一样部件。可是项目体量太大，架包太多，造成webpack搭建时间太长。
- 在各个仓库里，不一样子运用单独SPA网页页面，用iframe置入，主要缺点自动跳转不一样子运用体验感受隔断。
- 在各个库房分别开发设计各自，独立部署，是一个MPA网页页面，根据nginx分析为二级目录，每一次点一下新的路由，都是会重新加载一个最新项目，割裂感比iframe还比较严重。而且由于是一个完善新项目，类似网页页面不可以重复使用。
有以上三种比较常见的任意一种，都 '墙裂' 建议使用微前端(包含但是不限于qiankun)进行改善。
qiankun快速应用到工程中
qiankun官网项目实战：qiankun.umijs.org/zh/guide/tu…
朋友们不要心急，跟随实例教程没脑子一步步的配备就行啦！实例教程较为详尽，直接用拷贝粘贴秘笈就完事。
新项目实践中踩雷和填大坑方式
第一个坑
主运用：qiankun vue2
子运用：qiankun react
难题：新项目初次载入，子运用展现正常的。开启工程中的vue路由器，展现正常的。然后打开子运用，全部网页都白了
缘故：初次载入时是子运用便会开启, 初次载入是工程中的vue路由器也就没有这种情况
处理：
- 方案一：新创建loading网页页面做转站，初次载入去loading网页页面，然后去子运用
- 方案二：全局性申请注册（registerMicroApps）子运用改成部分申请注册（loadMicroApp）
- 计划方案三：强烈推荐主运用只作为一个铁架子，与众多子运用进行数据/事情通讯。
第二个坑
难题：当地正常的，公布到线上报跨域问题
缘故：由于父子俩运用的网站域名不一样，一些需求场景下，cros同源策略可能引发跨域问题
处理：在工程库房里的default.conf文档中配备nginx，还可以让后面人员配备
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
第三个坑
难题：网上子运用无法显示字体图标
处理：webpack中配备url-loader，把标志变为base64文件格式
基本webpack配备
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp|woff2?|eot|ttf|otf)$/i,
use: [
{
loader: 'url-loader',
options: {limit: 999999999,}, // 这里随意
},
],
},
],
},
};
react新项目 craco.config.js配备
const urlLoader = {
test: /\.(webp|woff2?|eot|ttf|otf)$/i,
include: paths.appSrc,
loader: require.resolve('url-loader'),
options: {
limit: 999999999,
},
};
addAfterLoader(webpackConfig, loaderByName('url-loader'), urlLoader);
craco加上loader的书写和webpack不一样，能去craco官方网站瞧瞧
第四个坑
难题：有关qiankun子应用使用monaco-editor在线编辑器，自定提醒无法显示
缘故：经由一天一夜的清查，后来发现是css影响...（那时候心理状态差点儿崩盘了）
处理：
- 方案一：qiankun带有的防护-严苛沙盒和试验性沙盒（不建议，应用之后会有任何问题）
- 方案二：全局性给class加前缀，选用postcss-selector-namespace软件，见postcsss编码
- 计划方案三：vue的scope ， react的 css in js是属于css隔离作法
- 计划方案四：BEM书写，主人运用尽量减少同名的class，新项目一开始就定位好（强烈推荐）
//postcsss编码
//新创建postcss.config.js 此js能自动被webpack分析
module.exports ={
plugins:{
'postcss-selector-namespace':{
namespace(){
return '.single-vue-child'
}
}
}
}
BEM
第五个坑
难题：运用载入时，出错：window.Vue.use is not a fuinction
处理：主人运用window目标矛盾了，主运用中的 window.Vue = this 关键字掩藏
第六个坑
情景：
- react 选用 css in js技术性做为子运用
- 主运用选用registerMicroApps全局性申请注册子运用
难题：主运用非第一次转换到react子应用中，子运用的样式遗失，内容排版紊乱
缘故：又是一天一夜的在网络上漂泊~~~ ,才发现是cssom造成
处理：主运用选用loadMicroApp载入子运用，页面刷新时卸载掉
第七个坑
难题：主人运用中存有重复请求，反复公共性自变量
处理：
重复请求计划方案：
- 方案一：应用sessionstorage归纳当前页要求，主人运用要求时按照其确定是否已要求过
- 方案二：与后端沟通交流，每一个要求加上uuid做唯一标识，同样期限内只有要求一次
反复公共性自变量计划方案
- 依据情景看它的能否改造成私有属性，标准取名，假如是公共性自变量就可以通过缓存文件或是initGlobalState界定全局状态
这一个, 也不能说是坑，可以说是一种优化策略吧。
完成
实际上几集需求迭代出来，qiankun在工程中的实践活动感觉没大伙儿想象中坑点满满的。
只要我们早期整体规划协商好，能避免许多坑人的发生。
例如：
- 主运用只作为一个铁架子，储放一些公共性情况/自变量，与众多子运用进行数据/事情通讯
- 主人运用中的一些css的取名参照文中的BEM开展有效的沟通并将其落地式
最终，本文这是我在工程中的一些实践心得，在这儿转发给朋友们，期待能让小伙伴们少花一点时间在填大坑的过程当中。
期待朋友们给我一个免费体验关注点赞，祝愿大家事事顺心，事事顺心。
