开启生长之旅！这是我参与「日新计划 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官方的更新。