npm dependencies/devDependencies... 詳解

目前市面上大部分的前端項目使用 npm 包管理器來組織項目中用到的模塊依賴。但咱們去看 npm 配置文件 package.json 的時候，發現有些模塊放在 dependencies 配置中，還有一些模塊放在 devDependencies 中，是否是有點傻傻分不清楚🧐。

莫慌，先概覽下 npm 中的 5 種依賴，內心有個底：

• dependencies => 放置項目中代碼運行時須要用到的依賴
• devDependencies => 放置本地開發過程當中須要使用到的編譯、打包、測試、格式化模塊等
• peerDependencies => 放置本模塊須要宿主環境提供的模塊依賴（一般本模塊是爲了給引用方提供服務時設置依賴）
• bundledDependencies => 和上面的配置不一樣，爲數組格式，其中包含須要被打包進本地 package 裏的依賴模塊名，經過 npm pack 命令生成一個模塊包
• optionalDependencies => 放置一些項目中可忽略其各類錯誤的包模塊，和 dependencies 同樣，但該模塊無關緊要（ps. 該配置命名也很直觀🤐）

詳細介紹往下看 👇

1. dependencies

該配置項用來放置一些項目中實際運行須要用到的代碼，若是沒有該模塊，項目會運行出錯，那就必需要安裝在 dependencies 下面。

經過如下命令進行安裝

# 以 axios（客戶端/服務端請求工具） 爲例
# 經過 npm 安裝
$ npm install --save axios

# 經過 yarn 安裝
$ yarn add axios

2. devDependencies

該配置項放置本地開發過程當中須要使用到的編譯、打包、測試、格式化模塊等，特別注意： npm publish 的時候不會安裝該配置下的模塊

經過如下命令安裝

# 以 typescript (解析 ts/tsx 文件的工具) 爲例
# 經過 npm 安裝
$ npm install --save-dev typescript

# 經過 yarn 安裝
$ yarn add -D typescript

3. peerDependencies

通常用在發佈的代碼庫當中，表示須要宿主環境提供該配置下的模塊依賴，與宿主環境息息相關。npm 3.x 版本以後不會自動安裝該配置下的依賴模塊，會告警提示。

// 以 react-router (react 路由庫) 的官方庫爲例，react-router 須要在 react 環境中使用
{
  "peerDependencies": {
    "react": ">=15"
  }
}

4. bundledDependencies

該配置下的模塊經過 npm pack 會被打包到生成的模塊包中，通常用於私密包引用，把文件配置到其餘項目的依賴中

特別注意： 該配置是數組格式，包含須要被打包的包名。

5. optionalDependencies

該配置如其名，無關緊要的配置，也就是說在代碼運行或安裝模塊的時候，就算失敗報錯了也會正常運行，我的理解應該是有提高效益的模塊安裝在這裏，若是失敗了也不影響代碼的正常運行。

特別注意： 該配置會覆蓋掉 dependencies 裏的包，不要重複添加

經過如下命令安裝

# 經過 npm 安裝
$ npm install --save-optional xxx

# 經過 yarn 安裝
$ yarn add -O xxx

總結

項目中用到最多的是 dependencies 和 devDependencies，其餘的知道就OK。無論怎樣，如今對 npm 裏的依賴有了更深入的瞭解了吧！

加油，learn on the way ~