Angular CLI 6：将库依赖项放在哪里

Posted 2023-03-07

【中文标题】Angular CLI 6：将库依赖项放在哪里

【英文标题】：Angular CLI 6: Where to put library dependencies

【发布时间】：2018-10-15 19:21:52

【问题描述】：

我正在转换一个库 (ng-app-state) 以使用 angular cli，现在是 v6 supports libraries（耶！）。

在一些代码中搭建和复制之后，这是我的第一个问题：

如何/在哪里添加第 3 方依赖项？

致package.json，还是致projects/ng-app-state/package.json？

【参考方案1】：

应该在package.json中添加为peerDependencies

【讨论】：

Since peerDependencies aren't installed automatically by npm，这不是说从 NPM 导入模块后，我必须在我的应用程序中手动安装所有模块的依赖项吗？

@NathanFriend，是的，你必须这样做。这正是 lib 的 peerDependencies 所指向的 - 请安装以下依赖项以使用该库。

好的，我已经安装了依赖，比如：npm install lodash，那么如何将它导入到管道文件（组件）？

为了自动安装库的 3º 方依赖项，您可以将其添加为依赖项，并在 ng-package.json 中包含此属性，以便 ng-packagr 让构建过程继续。 "whitelistedNonPeerDependencies": [ "fortawesome" ],

【参考方案2】：

第 3 方依赖项应该放在 dependencies 的 projects/ng-app-state/package.json 中

但是，如果 3rd 方依赖项也支持 ng 6，那么您有一个不同的问题，并且超出了此问题的范围。我会简单地说，您可能必须在他们的库上调用 ng update 或开发调用他们的原理图，期望他们的 ng 6 版本的库存在。

【讨论】：

为了自动安装库的 3º 方依赖项，您可以将其添加为依赖项，并在 ng-package.json 中包含此属性，以便 ng-packagr 让构建过程继续。这里是解释：medium.com/@aselvini/…"whitelistedNonPeerDependencies": ["fortawesome"],

这不适用于构建或测试。

【参考方案3】：

原来答案是“两者兼而有之”。理解答案来自于此：

package.json 将在开发过程中使用。您实际上在这里安装了所有库供您自己使用，包括用户也需要的库。您应该只在项目的根目录中有一个 node_modules/ 目录，而不是在库的目录中（所以只在此处运行 npm install 和类似内容）。 projects/ng-app-state/package.json 将被部署到 npm（构建过程添加了一些额外的字段）。所以复制你图书馆的用户需要的dependencies 和/或peerDependencies。将devDependencies 放在这里毫无意义。

---

这就是完整的答案。继续阅读以查看示例。

在我的情况下，package.json 有很多 dependencies 和 devDependencies（你可以看到它here），但所有这些只会影响我（以及任何想为 ng-app-state 做出贡献的人） ）。 projects/ng-app-state/package.json 要小得多，这就是影响我图书馆用户的原因：

  "name": "ng-app-state",
  "version": "8.0.0",
  "author": "Simonton Software",
  "license": "MIT",
  "repository": "simontonsoftware/ng-app-state",
  "peerDependencies": 
    "@angular/common": ">=6.0.0 <7.0.0",
    "@angular/core": ">=6.0.0 <7.0.0",
    "@ngrx/store": ">=6.0.0 <7.0.0",
    "micro-dash": ">=3.5.0 <4.0.0"
  

在运行ng build np-app-state --prod 生成将发布到npm 的内容后，这就是dist/ng-app-state/ 中的内容（应该发布的内容）：

  "name": "ng-app-state",
  "version": "8.0.0",
  "author": "Simonton Software",
  "license": "MIT",
  "repository": "simontonsoftware/ng-app-state",
  "peerDependencies": 
    "@angular/common": ">=6.0.0 <7.0.0",
    "@angular/core": ">=6.0.0 <7.0.0",
    "@ngrx/store": ">=6.0.0 <7.0.0",
    "micro-dash": ">=3.5.0 <4.0.0"
  ,
  "main": "bundles/ng-app-state.umd.js",
  "module": "fesm5/ng-app-state.js",
  "es2015": "fesm2015/ng-app-state.js",
  "esm5": "esm5/ng-app-state.js",
  "esm2015": "esm2015/ng-app-state.js",
  "fesm5": "fesm5/ng-app-state.js",
  "fesm2015": "fesm2015/ng-app-state.js",
  "typings": "ng-app-state.d.ts",
  "metadata": "ng-app-state.metadata.json",
  "sideEffects": false,
  "dependencies": 
    "tslib": "^1.9.0"
  

【讨论】：

所以，我将在根文件夹（应用程序本身，因为只有一个node_modules）安装依赖，并将"materialize-css": "^1.0.0"这一行复制到projects/project -name/package.json 下peerDependencies?

如果它应该是您的用户的对等依赖项，那么是的，完全正确。

如果我使用 bootstrap scss mixins 和库中的所有内容，我如何引导到库？

一清二楚。库 package.json 中的确切内容的文档在哪里？

有趣的是，每个人都制作了自己的 angular + materialize-css 库，而他们的 v1.0.0 没有真正的开源候选者出现。我会尝试自己为我的公司制作一个，如果效果足够好，我会分享它。

【参考方案4】：

还没有人知道。

我不确定这些信息是否存在于任何地方。我已经在错误跟踪器上提交了一个问题，并且它已通过分类。我相信它们将来会被记录在案。

https://github.com/angular/angular/issues/43058

目前，据我所知，可以说工作区中的项目中与核心无关的所有 Angular 依赖项中的 100% 也必须在工作区中。它们必须在项目中，以便最终用户知道它们是必需的，因为它们会被捆绑在 dist 中。它们必须在工作区的 package.json 中，因此它们实际上是在开发中使用 ng build 和 ng test 安装的。

【参考方案5】：

依赖项在 package.json 中添加为包名下的 peerDependencies