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发布更新时不会锁定版本。

my-chart package.json

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

consumer package.json

int cmp = a.string_id.compare(b.string_id);
if(cmp == 0) {
   cmp = a.parent_id.compare(b.parent_id);
   if(cmp == 0) {
      cmp = a.value - b.value;
   }
}
return cmp < 0;

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

1 个答案: