npm安装包命令详解，dependencies与devDependencies实际区别

1.准备工作

在本机上安装node.js,地址：http://nodejs.cn/，最新版本14.x，我们只需要12.x就够用了
安装好nodejs之后，在本机输入node -v和npm -v，如果有版本号，则安装成功，node会自动安装npm包管理器
在本机新建一个xxx文件夹，在文件夹终端下初始化一个package.json
使用命令 npm init自定义package.json,亦可以使用npm init --yes生成默认的package.json如下：
```
{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
name对应你当前的文件夹名称，注意不能为package，否则在安装包时候会报错，scripts里是配置一些npm run的命令，比如以后我们需要webpack打包，我们就可以配置如下命令，使用npm run xxx

2.安装包命令

npm i(install) xxx:直接安装在当前文件夹下的node_modules下，但不写入package.json
npm i(install) xxx --save(-S):直接安装在当前文件夹下的node_modules下，写入package.json的dependencies
npm i(install) xxx --save-dev(-D):直接安装在当前文件夹下的node_modules下，写入package.json的devDependencies
npm i(install) xxx -g:安装在全局npm包管理器下
npm uninstall xxx 删除xxx模块；
npm uninstall -g xxx 删除全局模块xxx；

3.dependencies与devDependencies有什么区别呢

当你在安装了一些包后，会出现node_modules和package-lock.json，前一个就是放置包的源文件，后一个放置包的出处

此时你的package.json如下：

{
  "name": "personal-blog",
  "version": "0.0.0",
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

也许你有个疑问，dependencies与devDependencies有什么区别呢？

网上解释：

devDependencies 里面的插件只用于开发环境，不用于生产环境dependencies 是需要发布到生产环境的.那么这两个环境怎么用呢？比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。

个人理解：

对于项目：

在npm i 的时候都会安装在我们本地node_modules里
都可以使用相同的命令去卸载 npm uninstall xxx
在webpack打包的时候，不是说dependencies里的依赖包是线上使用的，就会一起打包，webpack是按需打包，所以看待dependencies和devDependencies是一样的处理
但是作为公司项目并不是你自己在开发，把包放在dependencies或者devDependencies里可以让你们开发的环境，包保持一致，要不然别人clone了你的代码，但是编译报错，不知道缺少了什么包，导致了浪费时间。但是放在dependencies或者devDependencies里，只需使用npm i 就会直接安装上

实质区别

如果我们只是单纯的做项目，那么我们可简单地认为生产环境和开发环境做为一种友善的提示，实质没有什么区别；但是，如果在发布npm包的时候，两种环境安装方式是有很大区别的！！！
在发布npm包的时候，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了；但对于项目而言，npm install 会自动下载devDependencies和dependencies下面的模块。

以上如果有地方不正确，欢迎指出，一起讨论