react,webpack,antd的版本依赖关系

版本依赖现象

调试react导航栏的时发现，

react

webpack

antd

这三个基础框架之间隐含这版本兼容性关系。

也就是说，这几个框架的版本必须协调适应。如果不匹配对应的版本，就会出现各种各样的报错问题，比如导航栏样式问题，比如启动报错问题等等。

 

测试验证

尝试了两种版本组合，版本组合如下

 

组件	react	webpack	antd	兼容性
版本组合1	16.13.1	4.42.0	4.6.1	兼容
版本组合2	18.2.0	5.64.4	5.1.6	兼容
版本组合3	18.2.0	5.64.4	4.6.1	不兼容

 

经测试验证后，发现，版本组合1，版本组合2都能正常使用，

但是版本组合3构建的界面，导航栏样式是空白的，很明显没有布局，没有色彩，没有风格，修改样式代码也是无效的。

注意，这里版本组合3和版本组合2的差别就是antd的版本是不同的。

 

分析

仔细看了一下antd 4.6.1和5.1.6版本的源码，发现里面确实隐含指定了某种react版本

例如

antd-4.6.1的package中含有如下内容：

  "devDependencies": {
     ...
    "@types/react": "^16.9.21",
    "@types/react-color": "^3.0.1",
    "@types/react-copy-to-clipboard": "^4.3.0",
    "@types/react-dom": "^16.9.5",
     ...
    "react": "^16.9.0",
     ...
  },
  "peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
  },

antd-4.6.1虽然 peerDependencies部分要求版本react的版本>=16.9.0，而devDependencies部分也明确要求react版本16.9.0以上了。

再看另一个版本

antd-5.1.6的package中含有如下内容：

 "devDependencies": {
     ...
    "@types/react": "^18.0.0",
    "@types/react-color": "^3.0.1",
    "@types/react-copy-to-clipboard": "^5.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-highlight-words": "^0.16.4",
    "@types/react-resizable": "^3.0.0",
    "@types/react-window": "^1.8.2",
     ...
    "react": "^18.0.0",
     ...
  },
  "peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
  },

antd-5.1.6虽然 peerDependencies部分要求版本react的版本>=16.9.0，但其实devDependencies部分明确要求react版本18.0.0以上了。

我估计是这个开源项目的开发者忘记更新peerDependencies部分的版本要求了。

 

这足以说明，蚂蚁金服的antv研发团队，发布antd的时候，是基于某些react和webpack的版本范围进行调试后才发布antd的版本的。

 

我们再来看看react-18.2.0的源码的package.json中含有的如下内容：  

  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/code-frame": "^7.10.4",
    "@babel/core": "^7.11.1",
    "@babel/eslint-parser": "^7.11.4",
     ...
     ...
    "core-js": "^3.6.4",
     ...
    "eslint": "^7.7.0",
    ...
    "typescript": "^3.7.5",
    ...
    "webpack": "^4.41.2",
    ...
  },

　　

react-18.2.0虽然 devDependencies部分要求版本webpack的版本>=4.41.2，但其实没有指明如果webpack版本的上限，如果是webpack 5以上的版本其实未必支持。

事实表明react-18.2.0支持webpack 5以上版本，但是webpack 4.41.2以下版本肯定不支持。

 

结论

可以肯定， react, webpack, antd这些组件之间绝对有版本依赖隐含关系。

明确的说，react和webpack，react和antd， webpack和antd 这些框架两两之间也存在版本兼容适应关系。

那些学习和使用antd的项目必须注意这个问题，否则就会有一些很奇怪的问题，或者一堆的调试报错问题。