qiankun 的子应用docx-preview失效(本质上是jszip.js中的setimmediate失效)

现象

qiankun中子应用中使用docx-preview无法正常生效,会卡在renderAsync异步方法,

调试

以下操作均在子应用中完成

  1. 删除npm管理的的docx-preview,

  2. 通过github docx-preview中的cdn引用方式,把docx-preview.jsjszip.js下载到本地,在index.html中引用。

  3. 在使用的地方改成docx.renderAsync

  4. 在下载到本地的两个js中写debugger打断点

  5. 最终定位到关键代码var onGlobalMessage这个函数中有个if语句event.source === global

    image.png

  6. 在qiankun中global会被qiankun代理,外层包裹一个proxy不再等于event.source,然后导致永远无法执行下面的方法去postmessage

修改

  1. 重新安装docx-preview
  2. 使用pnpm pactch 对node_module中的docx-preview进行打补丁,具体教程自行搜索 pnpm pactch使用
  3. 关键改动:在jszip.min.js中搜索e.source===r,然后改成(e.source===r||r.__POWERED_BY_QIANKUN__),对应的jszip.js的代码是
    image.png

深入

深入研究后发现,这不是jszip包的问题是引用的setimmediate包的问题,定位到这一行setImmediate-Line87
至此彻底搞明白了问题关键。

其他解决方法

还有一个简单的解决办法,在主应用index.html中用cdn方式引用docx-preview.min.js,jszip.min.js可以快速解决问题,适合快速修复。不过比较粗暴。
比较推荐上面在子应用中pnpm patch的方式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容