记录一次es5兼容问题

测试提了一个bug,说有页面在华为P8上空白页。
然后通过usb调试发现,该设备不支持const,let代码。原因找到了,接下来就是该怎么解决它。

找到问题代码

项目执行npm run build,接着在vscode上查询const 关键字。如下:

查询来源

点开39.xxxx.js。格式化下,搜索下const 关键字发现处于"52Kp": function这个函数里面。

通过关键字找到对应的库

通过grep命令查找
grep -rl "atobPolyfill" ./node_modules

点进去一看,发现base64.mjs这个文件是es6代码。
然后判断webpack打包时引用的是base64.mjs。

在哪里使用了js-base64

在vscode上查询js-base64关键字。如下:

将import { Base64 } from 'js-base64';改为import { Base64 } from 'js-base64/base64.js';
再执行npm run build,就没有const关键字了。

为什么会出现这种情况

package.json 中 你还不清楚的 browser,module,main 字段优先级
总结:优先级是 browser = browser+mjs > module > browser+cjs > main
而js-base64的package.json是怎么样的呢?

最后怎么解决问题的

下面的方法任意选择一个就好啦

  1. 将import { Base64 } from 'js-base64';改为import { Base64 } from 'js-base64/base64.js';
  2. webpack配置有个target:'web'。理论上web是默认值,不知道为什么我这里没效果。
  3. webpack配置别名,直接指向目标js
  resolve: {
    alias: {
      'js-base64':path.resolve("node_modules/js-base64/base64.js"),
    }
  },
posted @ 2022-07-01 21:42  被咯苏州  阅读(44)  评论(0编辑  收藏  举报