--save-dev 与 －－save区别

Question

这张图是我安装的依赖，大部分都在devDependencies里

然后我用url-loader加载图片的话，不会自动添加上前面的文件夹路径。
这是大神教程里demo的依赖，全都在dependencies

然后我就郁闷了，不知道哪些依赖应该装到哪里？据我了解的，devDependencies里的是开发用的，dependencies里的是开发完上线时用的，那么请教各位大神，究竟怎么装才合适？

Answer 1

--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。

比如，你写 ES6 代码，如果你想编译成 ES5 发布那么 babel 就是devDependencies。
如果你用了 jQuery，由于发布之后还是依赖jQuery，所以是dependencies。

但是在 npm 里面除了二进制的依赖，似乎也不用区分是不是dev。
因为使用npm就是自己编译的意思，而不使用npm直接拿编译后的版本的，这些依赖项也看不到。

Answer 2

啊 ~你们在说什么 一大堆烂糟的，如果你是前端人员，项目在浏览器运行的，无所谓开发依赖还是生产依赖，只是习惯而已最终都会打包到一起的，如果你要发npm包，那就要区分下，因为你的包在别人用的时候要找里面的依赖会通过你的pack.json 去找你的的依赖，他在安装你的包同时，就把生产依赖的包一块安装了 ，you know？

Answer 3

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，譬如：
{
"name": "yo",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.7.0",
"grunt-contrib-jshint": "~0.7.0",
"grunt-contrib-cssmin": "~0.7.0",
}
}
不过这只是它们的表面区别。它们真正的区别是，devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 时，

我们采用的是 “npm install --save-dev gulp-uglify ” （见上图）命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
另外需要补充的是：
正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

Answer 4

--save是对生产环境所需依赖的声明(开发应用中使用的框架，库),--save-dev是对开发环境所需依赖的声明(构建工具，测试工具).正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

Answer 5

这么多人关注这个问题，是有点意外的。
现在补充一点：
就是如果上线之后项目还依赖的模块，直接放 dependencies 里就行了，devDependencies 里面就不用放了，开发的时候会自动去调用 dependencies 中的模块的，不需要重复了。
比如，我做项目用到了 vue vuex n-zepto ，这三个模块都是上线之后还需要依赖的，那么我直接放到 dependencies 里，devDependencies 里不需要放。开发的时候功能不会受到任何影响。

---

2018-05-22 补充：
其实核心区分不是上面这一堆话。
核心区分在于一级引用还是二级引用，如果一级引用，OK，那放哪里都可以；对于二级引用的依赖则必须放到dependencies里才行。

一级引用：自己本项目引用的依赖。
二级引用：其它项目通过远程（比如git+）引用的自己的项目，这时候该其它项目如果打包，则只会拉取它本身dependencies、devDependencies里的依赖以及自己项目dependencies里的依赖。

Answer 6

按照我的理解，真正跑在用户浏览器中的代码，比如jquery,react这些，是需要安装到dependencies中的。

其他类似一些工具类的，比如grunt, babel的，是需要安装到devDependencies的。

有些shim，比如babel-core什么的，一般也会放在devDependencies中，
但是这个东西是在主程序里面require的，会在用户浏览器中跑的。
所以我觉得放在dependencies也应该是ok的

Answer 7

npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖

但是前端比较特殊，最终的"运行时"其实是在浏览器，没可能依赖一个npm包。
所以有时候也用dependencies放前端依赖，devDependencies放webpack等开发/build依赖, 比如angular自己的例子