如何在 Angular 库中添加和安装对等依赖项

即使您在依赖项而不是对等依赖项中定义了包，第二个选项也是最好的，并且由 Angular CLI 建议。以下是 Angular CLI（至少如果您有较新版本的 Angular - 在撰写本文时我有 12.x）将在构建时在控制台中显示的警告消息：“不建议分发带有‘依赖项’的 npm 包.请考虑添加到“peerDependencies”或将其从“dependencies”中删除。

然而，两者之间存在一些差异和权衡，这实际上取决于你来决定哪一个最适合你，但我肯定会选择第二个选择。

方法 1 - 依赖关系

将简化使用应用程序中的设置，因为您不会看到任何有关对等依赖项的警告，并且不需要手动安装依赖项。使用此方法可能会遇到的问题是，如果您已在消费应用程序中使用相同的包，则消费应用程序中可能会出现版本冲突。假设您安装了另一个使用相同对等依赖项但版本不同的软件包。这种方法也会带来性能问题。

方法 2 -peerDependency

第二种方法可能是这两种方法中最好的，因为您需要做的就是将包添加到peerDependency中，然后当该库安装在使用项目中时，您将收到一个很好的警告，表明您需要安装对等依赖项手动。随着应用程序的增长，这种方法通常感觉更好。是的，您会收到有关库安装的警告，但从长远来看，您希望尽可能多地控制消费应用程序中安装的对等依赖项版本。您还希望在您的消费应用程序中安装小软件包。这个选项绝对更安全，也是我所选择的。

这是一个有用的博客，也提到了这个主题 https://tomastrajan.medium.com/the-best-way-to-architect-your-angular-libraries-87959301d3d3

有趣的奖金事实

当我学习 Angular 库中的依赖项时，我还发现，当您选择上面的选项 2（peerDependency）时，这并不一定意味着您不需要在库中访问依赖项，否则 Typescript 将抱怨它找不到类型。

假设您正在以监视模式构建库

ng build <name of library> --watch

Run Code Online (Sandbox Code Playgroud)

这意味着，如果您没有在 node_modules 文件夹中安装依赖包（在库项目文件所在的工作区中），Typescript 将抱怨并且构建将失败。那么，这种情况该怎么办呢？好吧，对我来说，解决方案是还添加在 devDependency 中构建库所需的依赖项。这就是我的意思。这是我在撰写本文时的库 package.json 文件：

"name": "@alexrebula/ngx-giselle-ui",
"version": "0.0.8",
"peerDependencies": {
    "@angular/common": "^12.2.0",
    "@angular/core": "^12.2.0",
    "bulma": "^0.9.3",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@googlemaps/markerclustererplus": "^1.2.0",
    "googlemaps-ts-rich-marker": "0.0.4"
},
"dependencies": {
    "tslib": "^2.3.0"
},
"devDependencies": {
    "@types/googlemaps": "^3.43.3",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@googlemaps/markerclustererplus": "^1.2.0",
    "googlemaps-ts-rich-marker": "0.0.4"
}

Run Code Online (Sandbox Code Playgroud)

看看我是如何从字面上复制 devDepenccies 中的peerDependency 的吗？当然，除了 Bulma（一个 CSS 框架），因为没有 CSS 不会破坏库编译，所以我只需要在消费应用程序中安装 Bulma 即可。

学分和贡献

如果您想尝试这个研究案例、查看代码或者甚至在这个学习路径上与我合作，我建议您前往https://www.npmjs.com/package/@alexrebula/ngx-giselle- ui和https://github.com/AlexRebula/GiselleUI。对于我在图书馆中所写或所做的任何评论或反馈将不胜感激，特别是如果您认为我在发现道路上的某个地方犯了错误。谢谢你！

归档时间：	6 年，4 月前
查看次数：	19053 次
最近记录：	4 年，7 月前