在 Angular 7 中安装 devDependencies 或依赖项

Question

我很困惑我应该在哪里真正安装像 ngxs、bootstrap、chart.js、ng-bootstrap、ng-select、sweetalert 这样的软件包？我遇到了几个问题，但我仍然对我应该把这些包裹放在哪里感到困惑？ 谁能告诉我下面的代码是否正确？谢谢

"dependencies": {
    "@angular/animations": "^7.2.11",
    "@angular/common": "^7.2.11",
    "@angular/compiler": "^7.2.11",
    "@angular/core": "^7.2.11",
    "@angular/forms": "^7.2.11",
    "@angular/http": "^7.2.11",
    "@angular/platform-browser": "^7.2.11",
    "@angular/platform-browser-dynamic": "^7.2.11",
    "@angular/platform-server": "^7.2.11",
    "@angular/pwa": "^0.10.7",
    "@angular/router": "^7.2.11",
    "@angular/service-worker": "^7.2.11",
    "@ngxs/router-plugin": "^3.4.3",
    "@ngxs/storage-plugin": "^3.4.3",
    "@ngxs/store": "^3.4.3",
    "bootstrap": "4.0.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.5",
    "intl": "^1.2.5",
    "ngx-perfect-scrollbar": "5.3.5",
    "node-sass": "^4.11.0",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "^6.4.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.7",
    "@angular/cli": "^7.1.0",
    "@angular/compiler-cli": "^7.1.0",
    "@angular/language-service": "^7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ng-select/ng-select": "^2.12.0",
    "@ngxs/devtools-plugin": "^3.4.1",
    "@ngxs/logger-plugin": "^3.4.1",
    "@types/jasmine": "^2.8.12",
    "@types/node": "^9.6.37",
    "chart.js": "^2.8.0",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ngx-pagination": "^3.2.1",
    "protractor": "^5.4.1",
    "rxjs-compat": "^6.3.3",
    "sweetalert2": "^7.29.2",
    "ts-node": "^5.0.1",
    "tslint": "^5.7.0",
    "typescript": "3.2.4"
  }

Answer 1

devDependencies 是仅在开发过程中需要的模块

依赖项是在运行时也需要的模块。

ng-select、ng-bootstrap、ngx-pagination 和 sweetalert2 是 运行时所需的包，即运行您的应用程序，应该是 你的项目。

npm install --save-dev 将包保存为 devDependency

npm install --save 将包保存为依赖项

另请注意

部署应用时，依赖项中的模块需要 已安装，否则您的应用将无法运行。 devDependencies 中的模块没有 需要安装在生产服务器上，因为你不是 在那台机器上开发。

这应该是你的package.json

"dependencies": {
  "@angular/animations": "^7.2.11",
  "@angular/common": "^7.2.11",
  "@angular/compiler": "^7.2.11",
  "@angular/core": "^7.2.11",
  "@angular/forms": "^7.2.11",
  "@angular/http": "^7.2.11",
  "@angular/platform-browser": "^7.2.11",
  "@angular/platform-browser-dynamic": "^7.2.11",
  "@angular/platform-server": "^7.2.11",
  "@angular/pwa": "^0.10.7",
  "@angular/router": "^7.2.11",
  "@angular/service-worker": "^7.2.11",
  "@ngxs/router-plugin": "^3.4.3",
  "@ngxs/storage-plugin": "^3.4.3",
  "@ngxs/store": "^3.4.3",
  "@ng-bootstrap/ng-bootstrap": "^4.0.0",
  "@ng-select/ng-select": "^2.12.0",
  "bootstrap": "4.0.0",
  "classlist.js": "^1.1.20150312",
  "core-js": "^2.6.5",
  "intl": "^1.2.5",
  "ngx-pagination": "^3.2.1",
  "ngx-perfect-scrollbar": "5.3.5",
  "sweetalert2": "^7.29.2",
  "node-sass": "^4.11.0",
  "resize-observer-polyfill": "^1.5.1",
  "rxjs": "^6.4.0",
  "web-animations-js": "^2.3.1",
  "zone.js": "^0.8.29"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^0.10.7",
  "@angular/cli": "^7.1.0",
  "@angular/compiler-cli": "^7.1.0",
  "@angular/language-service": "^7.1.0",
  "@ngxs/devtools-plugin": "^3.4.1",
  "@ngxs/logger-plugin": "^3.4.1",
  "@types/jasmine": "^2.8.12",
  "@types/node": "^9.6.37",
  "chart.js": "^2.8.0",
  "codelyzer": "^4.5.0",
  "jasmine-core": "^3.3.0",
  "jasmine-spec-reporter": "^4.2.1",
  "karma": "^2.0.0",
  "karma-chrome-launcher": "^2.2.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.4.2",
  "karma-jasmine": "^1.1.1",
  "karma-jasmine-html-reporter": "^1.4.0",
  "protractor": "^5.4.1",
  "rxjs-compat": "^6.3.3",
  "ts-node": "^5.0.1",
  "tslint": "^5.7.0",
  "typescript": "3.2.4"
}

Answer 2

我认为很容易判断依赖项或 devDependencies 中应该包含哪些内容。任何将在构建时打包到您的包的东西都必须放在依赖项中，而您仅在构建时需要或帮助您在本地构建解决方案的其他东西应该放在 devDependencies（gulp、grunt、typescript、类型等）中。

在上面的示例中，ng-select、ng-bootstrap、ngx-pagination 和 sweetalert2 必须在依赖项中。