2

图片描述这张图是我安装的依赖,大部分都在devDependencies里

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

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

6个回答

16

已采纳

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

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

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

6

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 时,

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

4

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

0

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

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

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

0

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

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

0

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


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

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

撰写答案

Planets