解决依赖组件版本冲突

版本冲突相信大家经常遇到，如果有一天你发现升级了一个组件导致页面挂了，报出来的异常明显是某个组件中的，比如redux，那么可以大胆猜想可能是依赖的该组件版本冲突导致的。

关于版本冲突 #

比如项目中依赖A、B两个组件，A依赖C@^1.0.1版本，B依赖C@^3.0.1版本，那么打包时候如果没有明确指定C的版本，打包时候看项目中安装的是哪个版本，最后打包出来的C就是哪个版本，如果B中用了一个高级的API，低版本中不存在，那么页面解析代码时候就会挂了。

解决方法

一般有两种解决办法，一种是通过软件包别名，指定依赖的子软件包的各自版本。另一种是通过锁版本来处理，就是软件包统一版本，需要修改A、B组件，依赖同一个C版本。

软件包别名 #

这种方法是通过别名安装两个软件包，然后在构建代码中分别指定各自代码库的软件包。

从npm v6.9.0开始， npm现在支持软件包别名。它实现了与Yarn相同的语法：

    npm install jquery2@npm:jquery@2
    npm install jquery3@npm:jquery@3

这会将以下内容添加到package.json：

    "dependencies": {
       "jquery2": "npm:jquery@^2.2.4",
       "jquery3": "npm:jquery@^3.4.1"
    }

也可以使用这种语法直接从GitHub安装。例如，如果您要安装软件包的npm注册表版本和GitHub分支foobar：

    npm install foobar
    npm install foobar-fork@github:username/foobar

然后在webpack配置中写：

module.rules: [
    {
        include: path.resolve(__dirname, "node_modules/A-component"),
        resolve:{
            alias: { "juery": "jquery2" }
        }
    },{
        include: path.resolve(__dirname, "node_modules/B-component"),
        resolve:{ alias: { "juery": "jquery3" }}
    } 
]

锁版本 #

锁版本就比较简单了，在项目package.json中写明依赖组件C的版本。然后在webpack配置中指定统一的alias即可：

alias：{ "juery": "jquery3" }