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

Question

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

库项目的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

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

所以我认为他们关心的是这样一种场景:你在库本身中有一个版本的依赖，而使用该库的应用程序可能有它使用的另一个版本。

在版本中使用^是安装依赖项的默认配置。此外，在版本号中使用^将删除因次要版本或修补程序版本而异的依赖项。所以我认为主要的关注点应该是主要版本。

从应用程序的node_modules角度看几个例子

• 应用程序：^2.8.3，库：^2.8.0 =>重复数据消除的(2.8.3)
• App：^2.9.0，库：^2.3.4 =>重复数据消除的=> ^3.0.1，库：^2.3.4 =>复制(存在3.0.1和<代码>D21)<代码>H222<代码>F223

这可能会增加应用程序的大小，或者在工具将尝试加载为依赖项的版本方面造成冲突。

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