vue项目低版本火狐浏览器中的fuse.js插件异常修复
[ 2021/06/10, Vue , 2341阅, 0评 ]

某日被告知某个系统在低版本火狐浏览器打开时一片空白,要求尽快修复,于是卸载本机firefox,安排上表现异常的版本Firefox 42.0,打开目标系统果然一片空白,然后打开控制台,发现提示如下:

SyntaxError: let is a reserved identifier

11.jpg

嗯,看提示是低版本还不支持let语法,按照经验转成 var 就行,于是给安排上babel-polyfill再加上各种转换折腾了一上午,无果emmm,,,

嗯,看来还是想当然了(手动捂脸)。于是换个思路,从抛错点入手,从控制台中打开抛错的文件,发现该function有添加"use strict",暴漏给外部的名称为 6062

22.jpg

于是在可疑的几个js文件中查找 6062,发现其被某个name为Search的组件引用,再根据其别名 p 判断出该代号为6062的模块其实是fuse.js插件

33.jpg

ps:在6062函数继续往下翻到结尾处,可以发现有一个版本号,在本地源码中直接全局查找该版本号,能更快的发现是fuse.js插件。

44.jpg

Search组件中对fuse.js的引用方式如下:

import Fuse from 'fuse.js'

node_modules中找到fuse.js的package.json,发现其打包时被引用的是fuse.esm.js

55.jpg

继续查看fuse.esm.js和fuse.esm.min.js文件,发现let和const等es6特性均未被转换,嗯,罪魁祸首终于被找到了。

66.jpg

fuse.js包中有各种规范下处理好的文件

77.jpg

于是换个文件重新引入,该问题完美解决,测试ok。

import Fuse from 'fuse.js/dist/fuse.js'

该问题其实并不复杂,对症下药,找到准确的切入点才是关键;拒绝“想当然”,浪费时间可耻,,,嗯~记录一下长长记性。

有朋自远方来...评论一下呗O(∩_∩)O