盘一盘antd4升级到antd5的坑-烟雨网

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

在某个风和日丽的周一早上，我依旧沉浸在周六日的欢愉中，看了一看手头的并不“充裕”的工作，打算摸摸鱼度过这美妙的周一。突然一条消息打破了这难的宁静，“你是不是没啥工作了，上周五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>
}

咋回事啊，怎么月份跟星期跟年份不一致呢，这咋还一半好使一半不好使呢。我看了看官方老哥是咋说的，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>
}

生产环境

这个问题就搞定了，还在心想我真厉害，这我都能发现。当我打包看一下生产环境效果的时候他有出现意外了。是的，他又变成“英格丽史”了，此时我的头已经很大了。这又是为啥捏，打包出错了？于是，我在本地打印了一下引入的语言包。

console.log(zhCN, 'zhCN');

在我还在想是不是打包的问题时，神奇的事情发生了是一个关于组件的对象结构，用在这里刚好，所以本地是正常的。我们看一下生产环境打印。这里打印出来的结果明显是和上面不同，多了一层关于__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.x中我们使用Modal.confirm等方法都是可以获取到主题色，但是antd5.x版本的CSS-In-Js中没有less静态变量使用，我们不能在confirm，等方法生成的模态框中获取到主题色，

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

官方建议通过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>
}

该方法可以获取到context主题色，但是老项目全部改成hook的写法，成本是比较高的，这里只是通过修改全局样式的方式来强行更改Modal method的按钮颜色。

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

兼容性问题

我们看看官网描述，目前主流的浏览器只是支持最新的两个版本，并且不再支持IE浏览器，这个对我于我们开发人员来说影响可能比较小，但是对于客户五花八门的浏览器来说，就是比较困难的事情，比如360急速浏览器、搜狗浏览器等国内双核浏览器，在上面几乎是丢失了所有样式。我们可以看到两种表现下用户的体验是极差的，对于样式的兼容，antd提出的@babel/preset-env方案和360浏览器提出的加入<meta name="renderer" content="webkit">标签都是无效。产生这个原因是:where Selector带来的兼容性问题，antd5使用CSS-in-JS库，而该库为了降低优先级就大量使用:where选择器来进行样式的添加，但是国内浏览器对于该样式的兼容性只有61%。我们可以等待一下antd官方的更新。