Vue.js

NPM关于dependencies 和 devDependencies配置详解，弄懂npm -S与-D的区别

      使用任何框架之前，都要经历环境搭建的过程，而在前端框架的环境搭建中（比如React、Vue等），NPM是必不可少的依赖包管理工具。我们在使用NPM命令安装依赖包时，经常会用到 -S 或者是 -D 这些指令，例如，我们安装webpack时会执行以下命令：

npm install -D webpack

对于前端初学者来说，可能还不太理解什么时候使用 -D ，什么时候使用 -S ，以及二者之间的区别。这就和我们这篇文章要讲的主题有关系了，NPM中的 dependencies 和 devDependencies 配置。

1. 什么是NPM

简单来说，NPM（Node Package Manager）是包含在Node.js里面的一个包管理工具，NPM会随着Node.js一起安装。NPM为开发者提供了一个代码模块共享的大平台，当我们项目中需要使用某个模块（JavaScript包）时，可以直接使用NPM包管理工具来下载对应的包并安装，我们也可以把自己用Node.js写的代码发布到平台上供他人使用。

2. package.json文件

搭建一个前端项目之前，通常会在项目的根目录下生成一个名为package.json的文件作为NPM包的描述文件，使用该文件来定义项目信息、配置包依赖关系。package.json文件可以自己手动创建，也可以使用命令来创建：

npm init

文件中包含了NPM包的基本信息（项目名称、版本号、项目描述、作者）和依赖管理，例如：

{    "name": "demo",    "version": "1.0.0",    "devDependencies": {        "webpack": "^4.29.6"
    }
}

在package.json文件中，所有的依赖包都会在 dependencies 和 devDependencies 的配置项中进行管理，它们的意思是：

• dependencies： 表示生产环境下的依赖管理；

• devDependencies： 表示开发环境下的依赖管理；

3. 开发环境和生产环境

很多同学不太理解什么是开发环境和生产环境，简单来说，就是在项目的开发阶段就是开发环境；项目上线了，开始正式提供对外服务，上线后的阶段就是生产环境。在生产环境下，一般会关掉错误报告，打开错误日志等操作。

devDependencies配置的是开发环境，安装项目开发时所依赖的模块。比如像webpack工具，只是用来构建项目和打包，这些都是在开发阶段才使用的，等项目上线后就用不到webpack工具了，那么我们就可以把webpack安装到开发环境中，使用 --save-dev命令安装到devdependencies下，命令语法：

npm install --save-dev packageName
# 简写
npm i -D packageName

dependencies配置的是生产环境，安装项目运行时所依赖的模块。比如jQuery库，等项目上线以后依然是要继续使用的，我们就要安装在生产环境中，如果没有把需要的依赖安装到生产环境中，项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下，命令语法：

npm install --save packageName
# 简写
npm i -S packageName

注：上面的 -S ，是大写的S

总结

掌握了原理，在开发中我们就可以根据需求，来正确使用指令安装依赖包，防止以后出现不可预知的问题。