Angular CLI 6：如何安排库依赖

Question

Angular CLI 6：如何安排库依赖

angular-cliangular-cli-v6

72

我正在将一个库(ng-app-state)转换为使用Angular CLI，现在v6支持库（耶！）。

在进行脚手架和复制一些代码后，我有个问题：

如何/在哪里添加第三方依赖关系？

是添加到package.json还是projects/ng-app-state/package.json？

- Eric Simonton

5个回答

16

需要在package.json文件中添加为peerDependencies

- Jagan

1

由于peerDependencies不会被npm自动安装（参见https://docs.npmjs.com/files/package.json#peerdependencies），这是否意味着在从NPM导入模块后，我必须手动安装所有模块的依赖项到我的应用程序中？ - Nathan Friend

2

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

好的，我已经安装了依赖项，例如：npm install lodash，那么如何将其导入到管道文件（组件）中呢？ - OPV

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

3

目前还没有确切的答案。

我不确定这个信息是否已经公开。我在错误跟踪器上提交了一个问题，并且它已经通过了审查。我相信它们将来会被记录下来。

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

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

- Evan Carroll

0

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

但是，如果第三方依赖项还支持ng6，则您有一个不同的问题，超出了本问题的范围。我简要地说一下，您可能需要在其库上调用ng update或开发Schematics来调用他们的库，这些库期望存在其ng6版本的库。

- bhantol

为了让库的第三方依赖自动安装，您可以将其添加为依赖项，并在ng-package.json中包含此属性，以便ng-packagr让构建过程继续。这里是解释：https://medium.com/@aselvini/im-a-newbe-about-this-topic-and-i-got-the-same-issue-47b3116373ea"whitelistedNonPeerDependencies": [ "fortawesome" ]。 - Jmainol

这个无法用于构建或测试。 - Evan Carroll

0

依赖项被添加到package.json中作为peerDependencies，位于包名称下方

- Virus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eric Simonton · Accepted Answer

答案其实有点“两者兼备”。理解这个答案需要以下内容：

package.json 用于开发时使用。您实际上在这里安装所有您自己使用的库，包括用户也需要的库。项目根目录下应该只有一个 node_modules/ 目录，而不是库目录下也有（仅在此处运行 npm install 等）。
projects/ng-app-state/package.json 用于部署到npm（构建过程中添加了一些额外的字段）。因此，请复制用户库所需的 dependencies 和/或 peerDependencies。这里没有放置 devDependencies 的意义。

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

我的情况下，package.json 列出了许多 dependencies 和 devDependencies（可以在这里看到），但这只影响我和任何想要为 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"
  }
}