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

news/2024/7/9 5:40:24

项目场景:

一个使用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',
},

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


感谢观看!!!


http://lihuaxi.xjx100.cn/news/497287.html

相关文章

jQuery index()

jQuery index() 概述 在jQuery中,我们可以使用index()方法来获取当前jQuery对象集合中“指定元素”的索引值。 语法 $(元素).index()说明 index()方法可以接受一个“jQuery对象”或“DOM对象”作为参数,不过一般情况下,我们很少会使用到…

Node.js--》Node环境及nvm版本管理安装及使用

目录 初识Node.js Node.js环境安装 nvm的安装 Node.js环境执行JS代码 初识Node.js Node.js是一个开源、跨平台的 JavaScript 运行时环境。其中文的官方网址为:Node.js官方网址 注意:浏览器是JavaScript的前端运行环境;Node.js是JavaScri…

20221226关于电商平台呼叫中心相关指标的预测(cpo、订单瑕疵、客诉率、服务率等)

一、背景:呼叫中心的人力招聘、排班强依赖业务对服务率和订单的预测,预测的精准度直接影响成本和客户体验。 1.对成本的影响: ①客服招聘过多,造成人力冗余,导致服务成本增加; ②客服招聘少,需要启动临时招聘和借调,造成服务成本增加; ③客服排班人多,造成客服工作不…

基于redis缓存查询店铺

基于redis缓存查询店铺 Overridepublic Result queryById(Long id) {//从redis中查询商铺缓存String shopJson stringRedisTemplate.opsForValue().get(CACHE_SHOP_KEY id);//判断缓存是否命中if (StrUtil.isNotBlank(shopJson)){//命中,则返回店铺信息Shop shop …

第二十六章 数论——欧拉函数(详解与证明)

第二十六章 数论——欧拉函数(详解与证明)欧拉函数1、互质2、欧拉函数的定义3、欧拉函数的公式4、欧拉函数的证明5、欧拉函数的使用(1)问题一:思路代码(2)问题二:思路case1case1case…

IB体育评估哪些内容?

"IB体育"这个词的内涵太广了,覆盖的课程也很多!这个IB体育是一般体育课还是某个具体的IB科目呢?是MYP阶段的体育还是DP阶段的呢?其实很多人都是很懵,通过收集资料,可以分享一下,仅供参…

少儿Python每日一题(3):数字排序

原题解答 本次的题目如下所示(原题出处:蓝桥杯): 【编程实现】 连续输入5个正整数(正整数之间以英文逗号隔开),然后将五个正整数按照 从大到小的顺序输出(输出排序后的正整数之间以英文逗号隔开,相同大小的 正整数并列输出)。 输入描述:输入5个正整数以英文逗号隔开 输…

广播机制-案例

广播机制-案例 1.静态注册案例-接收开机广播 1.案例:接收开机的广播 创建自定义的BroadcastReceiver用于处理监听到的系统广播。//接收系统开机的广播事件 public class BootCompleteReceiver extends BroadcastReceiver {Overridepublic void onReceive(Context co…