在 Angular 2 应用程序中使用本地 npm 存储库中的组件

Posted 2023-03-07

【中文标题】在 Angular 2 应用程序中使用本地 npm 存储库中的组件

【英文标题】：Use components from local npm repository in an Angular 2 application

【发布时间】：2017-07-09 13:54:56

【问题描述】：

我已经用 d3 和 Angular 2 实现了一个通用图表组件。然后将它发布到本地 npm 存储库中，这样任何人都可以通过运行 npm 在他们的 Angular 项目中使用该图表组件安装 my-chart 命令。

我创建了一个基本的 Angular 2 项目来重用我的图表组件。然后运行 ​​npm install my-chart --save，它会将 "@my/my-chart": "^1.0.0" 添加到 package.json 中。但是运行 ng serve 出现问题，在我的控制台上提示以下错误。

Module not found: Error: Can't resolve 'd3' in '...\node_modules\@my\my-chart'

我需要在我的 Angular 项目中安装 D3 吗？但我认为当我们运行 npm install my-chart 时，最好将 d3 与图表组件捆绑在一起。

什么是最好的？

已发布包的package.json 文件：

  "name": "@my/my-chart",
  "version": "1.0.2",
  "license": "MIT",
  "angular-cli": ,
  "author": "rosew",
  "main": "./index.js",
  "keywords": [
    "button",
    "card"
  ]

消费包的package.json文件：

"dependencies": 
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/router": "3.4.6",
    "core-js": "2.4.1",
    "rxjs": "5.0.1",
    "ts-helpers": "1.1.2",
    "zone.js": "0.7.6",

    "@my/core": "1.1.176",
    "@my/my-button": "^1.0.9",
    "@my/my-chart": "^1.0.1"
  ,
  "devDependencies": 
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "2.4.6",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.42",
    "codelyzer": "2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.4.2",
    "typescript": "2.0.3"
  

【问题讨论】：

你能把发布包和消费包（特别是依赖部分）的 package.json 文件发布到 sn-ps 吗

@TimLewis 我已经发布了它们。你能查一下吗？

【参考方案1】：

项目找不到d3的原因是它在哪里没有指定为依赖，所以不能包含。

你有两个选择：

第一个选项是将 d3 作为依赖项添加到您的库中，它将在安装 @my/my-chart 时加载。

第二个选项和更好的方法是将 d3 作为对等依赖项添加到您的库中。这会强制使用库导入 d3。这有几个很好的理由，例如让消费者对依赖项有更多控制权，并在多个依赖项需要 d3 时减少重叠。

不使用任何一种选项的一件事是确保对 d3 的依赖尽可能广泛，这样您就不会在 d3 发布更新时被锁定在某个版本中。

我的图表包.json

  "name": "@my/my-chart",
  ...
  "peerDependencies": 
    "d3": "^4.0.0"
  

消费者包.json

  "name": "consuming-package",
  ...
  "dependencies": 
    "d3": "^4.6.0"
  

【讨论】：

我是否需要在我的库中添加 d3 类型以及对等依赖项？ Bcz 我在实现库时也想要 d3 类型。

这取决于，如果您的所有消费者都将使用 typescript，那么这并不重要。但是有它会迫使所有用户输入类型，无论他们是否使用它们。

我将 d3 作为对等依赖项添加到我的库中。现在我收到了这个错误。 npm WARN @my/my-chart@1.0.3 需要 d3@4.4.4 的对等点，但没有安装。 npm WARN codelyzer@2.0.0-beta.1 需要 tslint@~4.0.0 的对等点，但没有安装。 npm WARN codelyzer@2.0.0-beta.1 需要 @angular/compiler@~2.2.0 的对等点，但没有安装。 npm WARN codelyzer@2.0.0-beta.1 需要 @angular/core@~2.2.0 的对等体，但没有安装。

我已经用 package.json 更新了两个项目的答案。但基本上@my/my-chart@1.0.3 requires a peer of d3@4.4.4 but none was installed 是说您在 my-chart 中指定了一个对等依赖项，您没有通过消费项目引入。原因是 my-charts 说它需要 d3 但它把责任留给了消费包。

也就是说我们需要在consumer包中单独安装d3，对吧？