Angular 7中devDependencies与Dependencies的包安装疑问

兄弟，我来给你把这个依赖分类的事儿掰明白，先记住核心原则：

• dependencies：是你的项目生产环境运行时必须要用到的包，比如业务逻辑依赖的核心库、UI组件库这些，打包后会被包含在生产构建里。
• devDependencies：只是开发、构建、测试阶段需要的工具，比如代码检查器、测试框架、开发调试插件这些，生产环境完全不需要，打包时会被排除。

接下来逐个看你提到的这些包该放哪里，再看看你的配置问题：

逐个包分析 #

NGXS系列 #

• @ngxs/store、@ngxs/router-plugin、@ngxs/storage-plugin：这些是状态管理的核心运行库，生产环境必须有，你放在dependencies里是完全正确的。
• @ngxs/devtools-plugin、@ngxs/logger-plugin：这俩是开发时用来调试状态变化的工具，生产环境绝对不需要，你放在devDependencies里没问题。

Bootstrap相关 #

• bootstrap：纯CSS+JS的框架，生产环境要加载它的样式和脚本，放在dependencies正确。
• @ng-bootstrap/ng-bootstrap：这是Angular封装的Bootstrap组件，运行时要渲染组件，你现在放在devDependencies是错的，必须移到dependencies里。

Chart.js #

chart.js：是渲染图表的核心运行库，生产环境页面要显示图表就离不开它，你放在devDependencies错误，得移到dependencies。

ng-select #

@ng-select/ng-select：Angular的下拉选择组件，属于业务UI的一部分，运行时依赖，放在devDependencies不对，要移到dependencies。

SweetAlert #

sweetalert2：生产环境要用来弹出提示弹窗，属于运行时需要的交互库，放在devDependencies错误，必须移到dependencies。

你的配置修正建议 #

把这几个放错位置的包调整后，正确的依赖结构大概是这样（只列关键调整项）：

"dependencies": {
  // ... 你原来的dependencies内容保留
  "@ng-bootstrap/ng-bootstrap": "^4.0.0",
  "@ng-select/ng-select": "^2.12.0",
  "chart.js": "^2.8.0",
  "sweetalert2": "^7.29.2"
},
"devDependencies": {
  // ... 你原来的devDependencies内容保留，把上面那几个包从这里删掉
}

补充小提示 #

还有个小细节：node-sass其实是编译SCSS用的工具，只在开发构建时需要，应该移到devDependencies里，你现在放在dependencies是没必要的。

内容的提问来源于stack exchange，提问作者Joseph