一个umi4的项目适配到FireFox60.7.1esr版本上的从头到尾

项目场景:

一个使用umi4创建的大屏项目,用户的浏览器使用的是火狐60.7.1的稳定版。然后就报错了!!!

为什么不让用户换谷歌嘞,咱也不知道。那咱就搞兼容吧~~

贴个浏览器的版本图片:


问题历程

先看出现的问题吧
ReferenceError: globalthis is not defined

ok,上百度。答案都是大同小异,需要自己去定义一下globalThis
但是,感觉不应该这么搞!!!
先查查globalThis是啥吧,这里这里MDN
OK,又get一个知识点~~~

感觉还是得去umi官方文档上去找,他们肯定会考虑到这种浏览器环境变量啥的问题吧。
这时leader发来一个链接,这不就是了吗。
在这里插入图片描述
好吧,我得先在我电脑上安个旧版本的火狐。
好家伙,幸好提前发现了这个,要不然又得浪费时间,拿出了尘封的windows10。
火狐各版本的下载地址


loading~~~
终于整好了,确实有错。不光build完有错,运行时也有错!!!
搞代码:

  1. 直接目标火狐60:
targets: {
    firefox: 60,
  },
  1. 以防万一,es5也给他整上(后期试过了,不加也可以)
jsMinifier: 'terser',
cssMinifier: 'cssnano',

run start ~~~~
天灵灵地灵灵 ~~~~


我就知道没这么简单,第二个问题出现了!!!

Table组件出现了问题,就是antd的那个table。
先看看是不是组件兼容性问题,直接在我还热乎的60的firefox上打开antd的官方。找到table组件的页面,报错了。哈哈,不是代码的问题~~~

上百度~~~~ ,找到了
降版本 npm i antd@4.15.3 ~~~~
run start ~~~~
天灵灵,地灵灵 ~~~~


服了这个老六,升个版本能咋了。
新问题Bug

应该是antd版本低没有这个全局的样式变量了吧?

继续百度,这个这个
代码走起:

theme: {
  'primary-color-hover': '#1890FF7F',
  'primary-color': '#1890FF',
},

哇咔咔,终于好了~~
打包再看看。哇塞,也好着嘞。


感谢观看!!!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值