ant-design V3升级V4记录（成功篇）

背景：

1、为什么要升级？

升级我个人认为是在研发软件过程中必不可少的，同样也是谨慎的，那为什么还要升级呢？一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。

且能享受到升级框架的优点，如性能、拓展组件等等。

另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。

2、为什么现在升级？

因为现在年底，有时间折腾了。

年后新项目启动后就无法腾出那么多精力了。

也为升级V5打下基础。

好，我们继续....

这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。

第一步：老老实实按照官网升级开始造，从 v3 到 v4 - Ant Design

使用工具antd4-codemod，键入antd4-codemod app 命令开始一顿操作，后续出现的问题及截图如下：

1、静态图片引入项目后，解析失败； 原因配置文件加装file-loader，移除url-loader^6.2.0。

use: [‘file-loader’]

2、浏览器报host 无效；原因：V4版本webpack的allowedHosts属性不适配，降级使用disableHostCheck: true。

3、Plugin/Preset files are not allowed to export objects,only functions.webpack； 原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。

4、You may need an appropriate loader to handle this file type, currently no loaders are configured...

同上。

5、react-hot-loader不生效。原因：配置文件的入口配置

entry: [
        'react-hot-loader/patch',
        path.resolve('', 'app/index.jsx')],

6、Cannot assign to read only property 'exports' of object '#<Object>'。原因：函数式组件 import和module.export 不能搭配使用，切换import+ export default funName{}

7、css不生效或Operation on an invalid type。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。

8、.plugins[0][1] must be an object, false, or undefined。 原因：babel-loader配置错误，查看V4 webpack官网文档即可。

9、antd 按需加载 tree shaking无效。原因：V4本身已包含按需加载功能，未生效可检查babel配置。

10、安装依赖之后，未生效。原因：建议删除node_modules，重新npm i。

11、antd弹窗类打开不了，控制台报错，

12、样式兼容：原因less版本用的V3࿰