起因
事情是这样的,有一次用户突然反馈打开某个页面白屏了,一听白屏,这可是p0级故障,赶紧打开页面看了一下,没问题啊,跳动的心暂时平静了一点。那为什么在我这里没问题,在用户那里就有问题呢?(内心os:那肯定是你的问题)于是想到可能是兼容性问题,下了几个版本的Chrome试了一下,果然在Chrome 50下白屏了,打开console,报错如下:
这是什么错误,没看明白,本地起一下服务,报错如下:
这个错误就很清晰了,spread运算符兼容性问题,验证一下想法,找到这个页面,改掉...,果然,页面出来了,bingo,解决了,可是事情并没有结束,因为我明明配了babel啊,而且更神奇的是,其他页面也有用到...,为什么其他页面没问题,就这个页面有问题呢?
探究原因
带着好奇,继续探索,是不是使用方式问题,因为其他文件用法是{...object1, ...object2}和[...object]形式,这个文件的使用方式是{...object, a: b},正常来说是不会有这个问题的,可这是不正常情况,只能试一下了,试完之后发现也不是这个问题;然后把报错文件的代码移到同一路由的其他文件,也没报错;再把报错文件的调用函数移动到同一个文件直接调用,也没报错;现在可以得出结论了,只在这个文件有问题,其他文件都没问题。可是为什么呢?都在同一个工程啊,都在同一个路由啊,都是同样的配置啊,百思不得其解,这个文件也没有什么特殊的啊,绞尽脑汁,想不出原因,突然,闪过一个念头,赶紧看了一下,果然是这样,然后验证一下自己的想法,浏览器一看,果然正常了,直呼我*,文件缺少了.js后缀,导致没有被babel转译,出现了报错,这尼玛当时是谁埋的坑
总结
我们会遇到很多意想不到的问题,比如我上次还遇到过变量名写错的问题,那行代码只在某个特定的时机被触发,导致一直没被发现,这些问题有时候可能就是一个很低级的问题,低级得让你不会想到是这个问题,这个时候我们就要不断定位,缩小范围,打开思路,突然在某个瞬间有如神助,就找到原因了,解决完了之后你就会直呼我*,竟然还可以这样。