zepto.js 使用时 $(window).width()运行报错

[jawn-ha]

代码在内网，不方便导出
初步排查报错的代码是 clappr 这个视频播放包
大佬们，有解决方案吗？

[yiludege]

收到，我来复现一下哈

[jawn-ha]

我是通过 script 标签加载 umd 包直接引入的

[yiludege]

定位到是 Zepto.js 引入的问题

[jawn-ha]

定位到是 Zepto.js 引入的问题

有什么解决方案吗？

[yiludege]

这个地方能否打个断点，查看一下this、r 之类的变量具体是什么

[jawn-ha]

目前看来，this和r好像都是 Window的proxy对象

另外，我把clappr.js exclude掉，页面没有报错了，但依旧无法展示。

[yiludege]

已经查明问题：

• 子应用中 window 是一个 proxy 对象
• zepto.js 调用 $(window).width() 时会判断传进来的 window 是否是是 window 对象，如果不是的话进一步判断是不是 document 对象
• 判断方式如下

  function isWindow(obj)     { return obj != null && obj == obj.window }
  function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }

• 结果 proxy 对象 isWindow 返回 false（没有代理 window属性），而 isDocument 返回 true（nodeType、DOCUMENT_NODE都为false），程序认为 window 对象是一个 document 对象从而直接读取 document 属性导致出错

[yiludege]

注意到 zepto.js 直接使用 npm install zepto 安装，import $ from 'zepto'使用在 webpack 框架中打包会出现错误，因为webpack 的 chunck 运行时 this 指向为 {}，这个问题详见 issue，虽然 pr 已经合入但是仍然没有发版，建议不要使用 zepto.js 这个5年前的包了。