antd 日期组件英文

在使用antd的过程中，遇到了一个展示的问题：

image.png

第一次尝试

大概第一反应是双语化，于是按照官网的教程，完成了改造：

import zhCN from 'antd/es/locale/zh_CN';

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

当我满怀期待的打开页面后发现只好了一半：

image.png

第二次尝试

问题产生了就得解决，这个问题应该很多人遇到，于是我就去查，大概查到了是因为还要引入moment的双语化，于是变成了这样：

import zhCN from 'antd/es/locale/zh_CN';
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

走到这里，很多人都成功了，但是我这里却例外了，依然老样子：

image.png

第三次尝试

到了这里算是卡住了，不过，网友是强大的，有的人说把node_modules删除就能解决这个问题，我照做了，却并没有什么不一样。
然而机智的我，却灵机一动，一个想法开始成型了：

会不会是moment版本问题呢？antd本身其实是有一个自己依赖的moment的，但是在引入antd之前，我自己也是引入了moment的。

如果两个版本不一致，我这里设置的moment.locale("zh-cn")仅仅是针对我的moment版本，但是，antd引用的moment却是另一个。

也就是我的代码里有两份moment。

为了求证，打开了node_modules，发现果然如我所料:

1. node_modules目录下有一个moment
2. node_modules/antd/node_modules下也有个一个moment

真相就在眼前，于是我移除了之前自己引入的moment:

yarn remove moment

再次打开页面：

image.png

后记

虽然找到了问题所在，不过node_modules真的有点坑，尽管能方便的解决依赖问题，但是同样的库在一个项目里有好几个版本，想想就不舒服，重复代码得多少呀。