前端学堂
学有所用

解决依赖组件版本冲突

版本冲突相信大家经常遇到,如果有一天你发现升级了一个组件导致页面挂了,报出来的异常明显是某个组件中的,比如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" }

 

赞(0) 打赏
未经允许不得转载:前端学堂 » 解决依赖组件版本冲突

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏