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

Question

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

lib 项目的 package.json：

{
  "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”集合将解决此构建问题。我仍然不确定这里的最佳做法是什么。我们应该创建依赖于其他 npm 包的 Angular 库，还是最好只拥有 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

这更像是一个猜测/漫谈，而不是官方答案，但这是我从迄今为止的发现和思考中收集到的内容。

The source code gives a clue about their reasoning:

// 验证非peerDependencies，因为它们很容易导致应用程序的node_modules文件夹中的重复安装或版本冲突

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

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

从应用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": [
    "."
  ]
 }