参考文献:

dependencies和devDependencies的区别
彻底认识devDependencies和dependencies
npm --save-dev 与–save 的区别
npm i, npm install, npm i -S, npm i -D的异同

一、定义

dependencies(依赖)
前缀dev是devlop(发展)的简写,所以devDependencies是开发环境的依赖,相对的dependencies是生产环境的依赖.

二、使用npm i安装时,- -save || -S 运行依赖和- -save-dev || -D 开发依赖的区别

1.使用–save安装的依赖，会被写到dependencies区块里面去。

2.使用–save-dev安装依赖，则会被写到devDependencies区块里面去。

3.什么都不写，只是本地安装，并非全局。这时候会被写到dependencies区块里面去。

三、在package.json 中devDependencies和dependencies区块的区别

1.devDependencies 里面的依赖只用于开发环境，不用于生产环境。

2.而 dependencies 依赖的包不仅开发环境能使用，生产环境也能使用。

3.而两种环境的的指定方式是通过配置文件中的NODE_ENV=developement或NODE_ENV=production来指定是开发还是生产环境的。

注意:

我们使用的一些构建工具例如glup、webpack这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies

四、什么包放在devDependencies？什么包放在dependencies？

要想搞明白这个问题，首先要清楚前端项目整个上线的一个流程：

本地开发完成后将代码push到github；
CI构建时会执行执行npm install；npm run build；从而编译出dist文件;
将dist编译后的文件部署到线上；
这样我们每次访问系统的时候，都会去线上服务器获取dist文件执行。

在一个项目内执行以下命令:

npm install：安装devDependencies和dependencies的依赖;
npm install --production : 只安装dependencies的依赖(使用场景很少，如果在CI上配置这个命令，其实很容易导致项目构建失败，因为一旦判断错误，将应该放到dependencies的包放到devDependencies，就会导致构建失败)

在一个项目内安装A组件：

npm install A：A组件依赖的devDependencies不会被下载，只会下载A组件的dependencies;
构建服务器配置的执行命令是npm install，其实我们的依赖包安装在devDependencies还是安装在dependencies，没有任何区别(前提项目不被别人依赖使用)，反正都会下载，但是如果开发的项目作为一个组件库的话，还是建议严格管理好devDependencies和dependencies。

如果开发的是一个组件库:

那么建议将babel-loader、style-loader等打包相关的工具包放到devDependencies，因为
如果放到dependencies，别人引用你的组件时，也会把这些工具包安装上，我们引用组
件，其实引用的是lib里编译后的文件，所以这些工具包我们是用不到的，所以如果开发时
组件库，被业务代码使用的库安装在dependencies，其它的，例如打包相关、ESLint相
关、Loader相关等等都要安装在devDependencies。

结论：

1.如果开发的是个工程项目，依赖包安装在devDependencies还是dependencies，虽然没有实质性的区别，但是为了规范，还是建议权衡一下对依赖做个区分；
2.如果开发的是组件库，建议将代码运行引用的库放到dependencies，其它的编译打包、eslint校验、开发相关的包放到devDependencies；

五、npm i, npm install, npm i -S, npm i -D的异同

npm i, npm install区别

1.npm i 在这之前很多朋友都说它是npm install的缩写，但是查阅相关资料之后发现这两者压根就是不同的两个命令，通过npm i下载的包不能通过npm uninstall卸载，必须使用npm unistall i 才能够卸载；
2.npm i会帮助检测与当前node最匹配的npm 版本号，并匹配出相应npm包应该升级的版本号；
3.npm i 安装的一些包，在当前node版本下是无法使用的，必须使用建议版本才行；
4.npm i 安装报错不会生成npm-debug.log文件，而npm install 则会生成；

npm i -S其实就是npm i --save的简写，通过这个命令下载的命令会放在packge.json的dependencies对象中，并打包至生产环境

npm i -D是npm i --save-dev,写入packge.json的devDependencies中，仅在开发环境有效