区分使用npm install, npm install --s

npm包管理器干货

• 为了方便携带源码，可以在安装依赖时--save或--save-dev，把依赖记录在package.json中，就可以把node_module文件夹删除，在需要的时候npm i把你安装过的依赖自动下载回来

一、package.json和package-lock.json

1、package.json

• 主要用来定义项目中需要依赖的包

2、package-lock.json

• 在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
• 每次执行完npm install之后会对应生成package-lock文件，该文件记录了上一次安装的具体的版本号，相当于是提供了一个参考，在出现版本兼容性问题的时候，就可以参考这个文件来修改版本号即可。

二、npm install的区别

• 下面以vue-router为例

1、npm install vue-router

• 会安装在node_modules目录中，不会修改package.json文件。之后把node_modules文件夹删除或者项目中没有node_modules，运行npm install时不会自动安装，因为package.json文件没有记录。

2、npm install vue-router --save（生产环境）

（1）会把vue-router包安装到node_modules目录中
（2）会在package.json的dependencies属性下添加vue-router
（3）之后把node_modules文件夹删除或者项目中没有node_modules，之后运行npm install命令时，会自动安装vue-router到node_modules目录中
（4）之后运行npm install –production或者注明NODE_ENV变量值为production时，会自动安装vue-router到node_modules目录中

3、npm install vue-router --save-dev（开发环境）

（1）会把vue-router包安装到node_modules目录中
（2）会在package.json的devDependencies属性下添加vue-router
（3）之后把node_modules文件夹删除或者项目中没有node_modules，之后运行npm install命令时，会自动安装vue-router到node_modules目录中
（4）之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装vue-router到node_modules目录中

4、总结

（1）发布到线上的叫生产环境，在本地开发的时候叫开发环境，--save就是会打包到线上去并且在线上环境能用到的，比如你npm install 一个vue-router，这个在线上环境也是能用到的依赖，所以你要--save

（2）比如vue-loader这个组件只需要在开发的时候编译就好，线上并不需用的到，所以就放在开发的--save-dev里就好

（3）--save安装的时候会在package.json文件中的dependencies属性添加模块，这个属性就是发布时依赖的包

（4）--save-dev安装的时候会在package.json文件中的devDependencies属性添加模块，这个属性就是开发时依赖的包

5、举个栗子

• 如果你想把ES6编译成ES5,就用到了babel，那么 就是devDependencies,发布的时候不需要再用babel了，因为打包后就是已经编译出来的ES5代码。
  如果用了VUE，由于发布之后还是依赖VUE，正式上线，投入使用的时候还是要用到VUE，所以是dependencies。

  
  package.json