在 angular 6 库项目中使用依赖的 npm 包的正确方法是什么？

Question

我有点困惑我应该如何在我的库 angular6 项目中引用外部 npm 包。我们有一个内部 scss 库，我想用它来为我的库中的可重用组件设置样式。我该如何导入它？

package.json 对于 lib 项目：

{
  "name": "ikr-lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "document-register-element": "1.8.1"
  },
  "dependencies": {
    "element.ui": "^1.0.1"
  }
}

当我构建库项目时，我得到了这个：

Distributing npm packages with 'dependencies' is not recommended. Please consider adding element.ui to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency element.ui must be explicitly whitelisted.

Answer 1

看起来将包名称添加到 ng-package.json 文件中的 "whitelistedNonPeerDependencies" 集合将解决此构建问题。我仍然不确定这里的最佳实践是什么。我们应该创建 angular 依赖于其他 npm 包的库还是最好只拥有 peerDependancies？

ng-package.json 文件：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ikr-lib",
  "deleteDestPath": false,
  "lib": {
    "entryFile": "src/public_api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "element.ui"
  ]
}

Answer 2

这更像是一个 guess/ramble 而不是官方答案，但这是我从到目前为止的发现和想法中收集的内容。

The source code gives a clue about their reasoning:

// Verify non-peerDependencies as they can easily lead to duplicate installs or version conflicts in the node_modules folder of an application

所以我认为他们担心这样一种情况，即您在库本身中依赖一个版本，而使用该库的应用程序可能有它使用的另一个版本。

在版本中使用^是安装依赖项的默认配置另外，在版本号中使用^将删除因次版本或补丁版本不同的依赖项。所以我认为主要关注的是主要版本。

从app的角度举几个例子node_modules:

应用程序：^2.8.3，库：^2.8.0 => 去重 (2.8.3)
应用程序：^2.9.0，库：^2.3.4 => 去重 (2.9.0)
应用程序：^3.0.1，库：^2.3.4 => 重复（3.0.1 和 2.3.4 存在）

这可能会使应用程序体积膨胀，或者导致工具将尝试加载的版本作为依赖项发生冲突。

This answer also talks a little bit about why to use peerDependencies instead.

Answer 3

您可以在 ng-package.json 文件中使用这些方式将其列入白名单：

 {
  .....
  "whitelistedNonPeerDependencies": [
    "angular" // it matches using regular expression 
  ]
 }

you can completely suppress this using below approach
{
  .....
  "whitelistedNonPeerDependencies": [
    "."
  ]
 }

在 angular 6 库项目中使用依赖的 npm 包的正确方法是什么？

What is the proper way to use a dependent npm package in angular 6 library project?

angular-library

angular6