其他

package.json中的开发依赖dependencies和生产依赖devDependencies到底有何区别

Posted Cola🌀

解释一下区别

首先，两个都是此项目的依赖:

  • 1、dependencies 是发布到生产环境的，而 devDependencies 里面的插件只用于开发环境，不用于生产环境。
  • 2、dependencies 是项目正常运行所需要的依赖，而devDependencies则是开发者开发时整个项目所需的依赖（如会有一些测试依赖之类的）。

其次，区别是：

  • 1、使用 –save-dev 安装的插件，会被写入到 devDependencies 对象里面去；
  • 2、使用 –save 安装的插件，会被写入到 dependencies 对象里面去。
npm install --save *****  //会下载到node_modules目录中，并修改package.json（dependencies中会增加） 
 npm install --save-dev *** //会下载到node_modules目录中，并修改package.json（devDependencies中会增加） 
 npm install **** // 会下载到node_modules目录中，不会修改package.json
 npm install ***** --save  //会下载到node_modules目录中，并修改package.json（dependencies中会增加） 
 npm install //会默认安装两种依赖```

Angular的例子：

在开发Angular项目的时候，需要在package.json文件里标记本项目需要哪些npm依赖包，其中就会有dependencies和devDependencies两个字段；那么它们分别代表什么，又有什么区别呢？

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.3.4",
    "typings": "^1.3.2"
  }

从名字我们就可以看出，devDependencies是用于在开发环境下依赖的模块，而dependencies就是无论开发环境还是生产环境都需要的依赖模块。

举个上面中代码的栗子，依赖concurrently，lite-server，typescript和typings只是我们在开发中需要使用的包，上线以后项目的运行就不需要了，因此就放在devDependencies依赖里；而dependencies里那些依赖：angular/XXXX，core-js，reflect-metadata，rxjs，systemjs，zone.js，angular2-in-memory-web-api，bootstrap 则是我们整个项目运行时候就需要的，因此放在dependencies里。

而当团队里其他人clone这个项目进行开发调试的时候，就可以通过npm install操作一键安装这两个目录下所有的依赖，而不用去一行行找都在文件中引用了哪些依赖。

注：如果其他人输入的是npm install --production 指令，那么就只会安装dependencies 目录下的依赖；这个操作比较少见，一般在一些服务端自动构建的过程中或者在一些特殊的需求下，会用到这个指令。

我的误区

最近在学习webpack，中间发现一个有趣的问题，对于开发依赖和生产依赖，摸索中遇到了两种不同的说法，一种是要严格区分，一种是写在哪里都一样，打包出来的是一样的。于是查看了很多博客，对于纠结了好几天的问题，做一下总结。

我们说 devDependencies是开发依赖 ， dependencies是生产依赖。我一直认为我们在npm run build 的时候就直接用的是生产依赖，在npm run serve的时候用的就是开发依赖。比如建议我们把对代码处理的压缩，合并等等webpack的一系列操作应该放在开发依赖里面。把真正页面用到的比如jquery、vue、vue-router等等放到生产依赖里面。于是我就有一个疑问。

如果npm run serve 只用开发依赖，那开发环境也需要vue等这些东西啊？怎么做到可以用的呢？具体怎么打包呢？然后我做了一个实验，我把package.json里面的devDependencies和dependencies都删除掉，再进行开发和发布测试。发现完全不受影响。还可以完整的正常打包。后来我才想明白，这个开发依赖和生产依赖只是针对与npm install。npm install的时候会把这里面的都下载下来，然后做区分。而webpack真正打包的时候，是基于页面上按需打包的，用到什么打包什么，只要我们的node_modules里面有就可以。我的误区是把这俩个过程混淆了。所以在SPA单页应用中，放在哪里都一样。唯一的是严格放，可以让开发者一眼看清楚这些插件大概的用处。