开启生长之旅!这是我参与「日新计划 12 月更文应战」的第2天,点击查看活动概况

前语

在某个风和日丽的周一早上,我依旧沉浸在周六日的欢愉中,看了一看手头的并不“充裕”的作业,计划摸摸鱼度过这美妙的周一。突然一条音讯打破了这难的宁静,“你是不是没啥作业了,上周五antd5发布了,把咱们的组件库晋级一下下”。我心里咯噔一下,

盘一盘antd4晋级到antd5的坑

我美妙的一天啊,并且还不知道有什么样的坑,我极其不情愿的开始了作业,趁便我盘点一下遇到的坑。

国际化问题

语言包的引进

antd在<ConfigProvider />中供给了柔和的api能够完成国际化功能。需要注意的是这儿移除了antd/es/locale的目录,替换成了antd/locale,咱们以<DatePicker />为例,看一下国际化的能力怎样。

import React from 'react';
import { ConfigProvider, DatePicker } from 'antd';
import zhCN from 'antd/locale/zh_CN'export default function App() {
  return <ConfigProvider locale={zhCN} >
    <DatePicker />
  </ConfigProvider>
}

盘一盘antd4晋级到antd5的坑
盘一盘antd4晋级到antd5的坑

咋回事啊,怎样月份跟星期跟年份不一致呢,这咋还一半好使一半不好使呢。我看了看官方老哥是咋说的,Ant Design 默许运用 Day.js 来处理时刻日期问题,除了antd之外还需要dayjs供给的语言包。

import React from 'react';
import { ConfigProvider, DatePicker } from 'antd';
import zhCN from 'antd/locale/zh_CN'
import 'dayjs/locale/zh-cn'export default function App() {
  return <ConfigProvider locale={zhCN} >
    <DatePicker />
  </ConfigProvider>
}

盘一盘antd4晋级到antd5的坑

出产环境

这个问题就搞定了,还在心想我真厉害,这我都能发现。当我打包看一下出产环境作用的时候他有出现意外了。是的,他又变成“英格丽史”了,此刻我的头现已很大了。

盘一盘antd4晋级到antd5的坑

这又是为啥捏,打包出错了?于是,我在本地打印了一下引进的语言包。

console.log(zhCN, 'zhCN');

在我还在想是不是打包的问题时,神奇的事情发生了

盘一盘antd4晋级到antd5的坑
是一个关于组件的目标结构,用在这儿刚好,所以本地是正常的。咱们看一下出产环境打印。
盘一盘antd4晋级到antd5的坑
这儿打印出来的成果显着是和上面不同,多了一层关于__esModule的描绘,属性default中才是咱们要的语言包,那这儿到底是什么呢__esModule,这儿咱们偏重怎样处理,其实这儿做一个简略的判别就可以处理。

<ConfigProvider locale={zhCN.default ?? zhCN} >
  <DatePicker />
</ConfigProvider>

这时,打包线上也就没有问题了。

Modal款式问题

咱们经过theme属性为咱们的组件供给主题色

export default function App() {
  return <ConfigProvider locale={zhCN} theme={{
    token: {
      colorPrimary: '#ff4d4f'
     }
   }}>
    <Button type='primary'>点击我</Button>
  </ConfigProvider>
}

盘一盘antd4晋级到antd5的坑

在antd4.x中咱们运用Modal.confirm等办法都是可以获取到主题色,可是antd5.x版别的CSS-In-Js中没有less静态变量运用,咱们不能在confirm,等办法生成的模态框中获取到主题色,

  useEffect(() => {
    Modal.confirm({title: 'confirm'})
   }, [])

盘一盘antd4晋级到antd5的坑
官方主张经过hook的方式生成新的模态框。

export default function App() {
  const [modal, contextHolder] = Modal.useModal();
​
  useEffect(() => {
    modal.confirm({title:"hook confirm"})
   }, [])
   
  return <ConfigProvider locale={zhCN} theme={{
    token: {
      colorPrimary: '#ff4d4f'
     }
   }}>
     {contextHolder}
    <Button type='primary'>点击我</Button>
  </ConfigProvider>
}

盘一盘antd4晋级到antd5的坑
该办法可以获取到context主题色,可是老项目全部改成hook的写法,成本是比较高的,这儿仅仅经过修改大局款式的方式来强行更改Modal method的按钮颜色。

:global(.ant-btn-primary) {
  background-color: #ff4d4f;
}

兼容性问题

盘一盘antd4晋级到antd5的坑
咱们看看官网描绘,现在主流的浏览器仅仅支撑最新的两个版别,并且不再支撑IE浏览器,这个对我于咱们开发人员来说影响可能比较小,可是关于客户五花八门的浏览器来说,便是比较困难的事情,比方360急速浏览器、搜狗浏览器等国内双核浏览器,在上面几乎是丢掉了一切款式。
盘一盘antd4晋级到antd5的坑
盘一盘antd4晋级到antd5的坑

咱们可以看到两种表现下用户的体会是极差的,关于款式的兼容,antd提出的@babel/preset-env计划和360浏览器提出的加入<meta name="renderer" content="webkit">标签都是无效。发生这个原因是:where Selector带来的兼容性问题,antd5运用CSS-in-JS库,而该库为了降低优先级就很多运用:where选择器来进行款式的增加,可是国内浏览器关于该款式的兼容性只要61%。咱们可以等候一下antd官方的更新。

最后

倒腾了半天最后仍是失利了,还耽搁我至少 两天的好心境。

盘一盘antd4晋级到antd5的坑

现阶段仍是先老老实实运用antd4.x,期待antd官方的更新。