使用任何框架之前，都要經歷環境搭建的過程，而在前端框架的環境搭建中（比如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
總結
| 配置項 | 命令 | 描述 |
|---|---|---|
| devDependencies | –save-dev 簡寫 -D | 開發環境，管理的依賴包僅在開發階段有效 |
| dependencies | –save 簡寫 -S | 生產環境，管理的依賴包在項目上線後依然有效 |
掌握了原理，在開發中我們就可以根據需求，來正確使用指令安裝依賴包，防止以後出現不可預知的問題。