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

Question

我已经用 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"
  }

Answer 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"
  }
}