处理 NPM 同行依赖冲突

在我的一篇先前的文章中，我讨论了npm install和npm ci之间的区别[1]。这次我想讨论一下同级依赖冲突，以及如何使用--legacy-peer-deps或--force选项来安装依赖项。

有时，解决与依赖相关的冲突可能需要使用额外的选项，比如 --legacy-peer-deps 或 --force 来安装依赖项。

这些选项的问题在哪里？

使用如 --legacy-peer-deps 或 --force 这样的选项可以绕过同级依赖检查，并可能引发兼容性问题或意外行为。虽然它们可能提供暂时的解决办法，但使用时需谨慎。一般建议通过更新包版本或调整依赖声明来解决同级依赖冲突，尽量通过更新包版本或调整依赖声明来解决同级依赖冲突。

最近几个月，我注意到开发人员在努力应对npm依赖的安装问题，尤其是在遇到所谓的peer依赖冲突时。以下是我遇到的一些相关问题：

我运行了**npm install --legacy-peer-deps**，但在构建时收到了错误，提示某些依赖项缺失。

所有冲突的依赖项将会被跳过安装。在这种情况下，需要使用 npm i --force。

我运行了**npm install --force**，但在构建时收到了错误，提示某些依赖项缺失。

在这种情况下，_.npmrc_ 中的设置会覆盖手动添加的选项。安装时设置了 legacy-peer-deps=true，并使用 npm install --legacy-peer-deps 进行了安装。

我运行了**npm install --legacy-peer-deps**，但在构建时由于缺少依赖项而遇到了错误。为解决此问题，我删除了**package-lock.json**文件并重新尝试了安装。然而，运行**npm install --force**并没有解决问题。为什么不起作用？我原本以为会解决这些问题。

由于没有 package-lock.json，在安装过程中重新生成了它，导致 --legacy-peer-deps 选项产生了不同的依赖树。因此，在安装过程中跳过了这些依赖项，因此它们不会出现在新的 package-lock.json 中。因此，即使是运行 npm install --force 也无法解决问题。必须撤销 package-lock.json 中的更改，然后再运行 npm install --force。

这些问题的根本原因在于相互冲突的依赖项，这意味着如果没有额外的选项，直接运行npm install无法解决这些问题。这种状况不仅让人感到沮丧，还需要额外的时间和精力去解决。

让我们看看怎么有效解决这个问题。

这里有一些同辈间依赖冲突及其解决方法的例子。

1.同伴依赖冲突

之间存在@angular/compiler、@angular/compiler-cli 和 @angular-devkit/build-angular 之间的版本不一致。

    npm ERR! 在解析 test-ui@1.0.22 时失败  
    npm ERR! 找到：@angular-devkit/build-angular@16.2.1 作为依赖  
    npm ERR! node_modules/@angular-devkit/build-angular  
    npm ERR!   从根项目中 dev @angular-devkit/build-angular@"^16.2.12"  
    npm ERR!   
    npm ERR! 无法解析依赖项：@angular-devkit/build-angular@"^16.2.12"  
    npm ERR!   
    npm ERR! 同级依赖冲突：@angular/compiler@16.2.12  
    npm ERR! node_modules/@angular/compiler  
    npm ERR!   @angular/compiler@"16.2.12" 从属于 @angular/compiler-cli@16.2.12  
    npm ERR!   node_modules/@angular/compiler-cli  
    npm ERR!     @angular/compiler-cli@"^16.2.4" 作为根项目依赖  
    npm ERR!     @angular/compiler-cli@"^16.0.0" 作为 @angular-devkit/build-angular@16.2.14 的依赖  
    npm ERR!     node_modules/@angular-devkit/build-angular  
    npm ERR!       dev @angular-devkit/build-angular@"^16.2.12" 从根项目  
    npm ERR!     另外两个依赖 (@angular/localize, ng-packagr)

2.解答

确保所有 Angular 包的版本兼容，并使 @angular/compiler、@angular/compiler-cli 和 @angular-devkit/build-angular 的版本保持一致。

// 开发依赖项
    "devDependencies": {  
      "@angular-devkit/build-angular": "16.2.12",  
      "@angular/compiler-cli": "16.2.12",  
      "@angular/compiler": "16.2.12",  
    }

2. _依赖性冲突

@angular/elements 需要版本 16.2.12，却发现 @angular/core 是版本 16.2.4。

同级依赖冲突

    npm ERR! 在解析 @angular/elements@16.2.12 时遇到问题:  
    npm ERR! 已找到：@angular/core@16.2.4  
    npm ERR! @angular/core 在 node_modules 中  
    npm ERR!   @angular/core@"^16.2.4" 由根项目  
    npm ERR!   peer @angular/core@"16.2.4" 由 @angular/animations@16.2.4  
    npm ERR!   @angular/animations 在 node_modules 中  
    npm ERR!     @angular/animations@"^16.2.4" 由根项目  
    npm ERR!     peerOptional @angular/animations@"16.2.4" 由 @angular/platform-browser@16.2.4  
    npm ERR!     @angular/platform-browser 在 node_modules 中  
    npm ERR!       @angular/platform-browser@"^16.2.4" 由根项目  
    npm ERR!       5 个更多 (@angular/forms, @angular/platform-browser-dynamic, ...)  
    npm ERR!     1 个更多 (@test-platform/core)  
    npm ERR!   22 个更多 (@angular/common, @angular/compiler, @angular/forms, ...)  
    npm ERR!   
    npm ERR! 无法解析依赖关系:  
    npm ERR! peer @angular/core@"16.2.12" 由 @angular/elements@16.2.12  
    npm ERR! @angular/elements 在 node_modules 中  
    npm ERR!   peer @angular/elements@">=14.0.0 <17.0.0" 由 test-library@4.1.2  
    npm ERR! test-library 在 node_modules 中  
    npm ERR!     test-library@"^4.1.2" 由根项目  
    npm ERR!     1 个更多 (@test/test-api)

2. 方法

同级依赖@angular/elements需要更新版本的Angular。因此，我们需要在package.json文件里将此同级依赖指定为直接依赖项。

    "dependencies": {  
        "@angular/animations": "16.2.4",  
        "@angular/common": "16.2.4",  
        "@angular/compiler": "16.2.4",  
        "@angular/core": "16.2.4",  
        "@angular/elements": "16.2.4",  
        ...  
    }

3. 相互依赖冲突.

@ng-select/ng-option-highlight@0.0.7 需要 @angular/common 的版本在 13.0.0 至 14.0.0 之间，然而你的项目正在使用 @angular/common @16.2.12。

    npm ERR! 代码：ERESOLVE  
    npm ERR! ERESOLVE 无法解析：  
    npm ERR!   
    npm ERR! 在解析 @ng-select/ng-option-highlight@0.0.7 时：  
    npm ERR! 找到：@angular/common@16.2.12  
    npm ERR! node_modules/@angular/common  
    npm ERR!   @angular/common@"^16.1.2" 来自根项目  
    npm ERR!   peer @angular/common@"16.2.12" 来自 @angular/forms@16.2.12  
    npm ERR!   node_modules/@angular/forms  
    npm ERR!     @angular/forms@"^16.1.2" 来自根项目  
    npm ERR!     peer @angular/forms@">=14.0.0 <17.0.0" 来自 @test-platform/font@8.1.10  
    npm ERR!     node_modules/@test-platform/font  
    npm ERR!       @ju30-platform/font@"^8.1.1" 来自根项目  
    npm ERR!       更多 3 个 (@test-platform/common, @test-platform/component, @test-platform/core)  
    npm ERR!     更多 3 个 (@test-platform/services, @ng-select/ng-select, @ngneat/reactive-forms)  
    npm ERR!   更多 15 个 (@angular/platform-browser, ...)  
    npm ERR!   
    npm ERR! 无法解析依赖项：  
    npm ERR! peer @angular/common@">=13.0.0 <14.0.0" 来自 @ng-select/ng-option-highlight@0.0.7  
    npm ERR! node_modules/@ng-select/ng-option-highlight：  
    npm ERR!   @ng-select/ng-option-highlight@"^0.0.7" 来自根项目  
    npm ERR!   peer @ng-select/ng-option-highlight@"^0.0.7" 来自 @test-platform/component@8.1.10

3. 解决方法

解决这个问题的最佳方式是将@ng-select/ng-option-highlight在peer dependency指定为直接依赖的仓库中更新。然而，如果这不可行的话，我们可以用支持Angular 16的新版本的@ng-select/ng-option-highlight模块来覆盖该依赖项。

"overrides": {  
    "@ng-select/ng-option-highlight": "11.1.2",  
    // 此配置用于指定 @ng-select/ng-option-highlight 的版本号。
}

4. 解决ChatGPT中的同级依赖冲突问题

当遇到不明显的依赖冲突时，ChatGPT 可以迅速帮我们找出问题。当错误信息不明确时，在这种情况下，我曾经用过它。

此外，ChatGPT 将立即提供解决该问题的方法，从而迅速解决它。

我提到了一些关于冲突的同类依赖项的问题。这些冲突不仅在安装 npm 时让人感到沮丧，还浪费了很多时间。因此，从 package.json 中清理这些冲突非常重要。

此外，我已经展示了如何解决这类冲突，可以通过定义它们为直接依赖，或者在package.json的overrides部分覆盖它们来解决。如果同级依赖冲突问题的根本原因不明显时，可以寻求ChatGPT的帮助以快速解决问题。

我鼓励你，解决与同级依赖相关的冲突。这样做不仅节省大量时间，你的开发人员也会非常感激你。

[1] 停止在CI/CD管道中使用npm install - 为什么你应该避免这样做

谢谢您读到最后啦，在您离开之前，这里还有点东西要说：

• 请考虑点赞和关注作者！👏
• 关注我们 X|领英|YouTube|Discord
• 来我们其他的平台看看：直白易懂|CoFeed|Venture|Cubed
• 厌倦了那些强迫你处理算法内容的博客平台吗？试试 Differ
• 更多内容请点击 Stackademic.com