现象
qiankun中子应用中使用docx-preview无法正常生效,会卡在renderAsync异步方法,
调试
以下操作均在子应用中完成
-
删除npm管理的的docx-preview,
-
通过github docx-preview中的cdn引用方式,把docx-preview.js和jszip.js下载到本地,在index.html中引用。
-
在使用的地方改成docx.renderAsync
-
在下载到本地的两个js中写debugger打断点
-
最终定位到关键代码
var onGlobalMessage
这个函数中有个if
语句event.source === global
-
在qiankun中global会被qiankun代理,外层包裹一个proxy不再等于event.source,然后导致永远无法执行下面的方法去postmessage
修改
- 重新安装docx-preview
- 使用pnpm pactch 对node_module中的docx-preview进行打补丁,具体教程自行搜索 pnpm pactch使用
- 关键改动:在jszip.min.js中搜索
e.source===r
,然后改成(e.source===r||r.__POWERED_BY_QIANKUN__)
,对应的jszip.js的代码是
深入
深入研究后发现,这不是jszip
包的问题是引用的setimmediate
包的问题,定位到这一行setImmediate-Line87
至此彻底搞明白了问题关键。
其他解决方法
还有一个简单的解决办法,在主应用index.html中用cdn方式引用docx-preview.min.js
,jszip.min.js
可以快速解决问题,适合快速修复。不过比较粗暴。
比较推荐上面在子应用中pnpm patch
的方式