package.json文件

dependencies和devDependencies配置

編寫時間：2019-06-28
更新時間：2019-7-31 11:43

做者：鬼小妞

目的：本文旨在幫助一些剛項目開發的人員瞭解

• 如何建立package.json； （點擊直達）；
• package.json參數簡介； （點擊直達）；
• 安裝依賴的三種方式：:npm install、npm install --save、npm install --save-dev； （點擊直達）；
• 使用--save仍是--save-dev；添加到開發環境仍是生產環境？ （點擊直達）；
• 項目負責人和其餘項目開發者在安裝依賴時應該如何作 （點擊直達）；

備註： 本文整理及編寫了與項目安裝依賴相關的一些知識，僅供參考，描述不當的地方，請評論指正

狀態：待完善2019-7-31

在看這篇文章以前，建議你先看一下阮一峯老師寫的這篇教程： package.json文件

疑問：在一個項目中，我把代碼提交到Git上，別人Clone下來以後，怎麼知道我須要下載哪些依賴庫

咱們clone代碼以後，你會發現是沒有node_modules這個文件夾的，node_modules用來保存依賴庫，此時咱們就須要經過npm install來下載依賴庫，可是須要下載哪些庫，這時候就須要定義package.json，配置好dependencies和devDepencies，這樣項目其餘開發人員在執行npm install 命令的時候，就能夠下載對應的依賴庫了

package.json簡介

每一個項目的根目錄下面，通常都有一個package.json文件，定義了這個項目所須要的各類模塊，以及項目的配置信息（好比名稱、版本、許可證等元數據），開發人員通常在git clone項目後使用npm install命令根據這個配置文件(裏的dependencies和devDependencies參數)，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

建立package.json

• 步驟式建立(需按步驟手動輸入配置)

npm init

• 一步自動建立（自動默認配置）

npm init -y

package.json參數簡介

name: 項目名稱

---

version: 項目版本號

---

description: 項目描述

---

keywords: {Array}關鍵詞

便於用戶搜索到咱們的項目

---

homepage: 項目url主頁

---

license: 項目許可證.

讓使用者知道是如何被容許使用此項目。默認是」ISC」

---

author,contributors: 做者和貢獻者。

author,contributors 的格式設置以下： { 「name」 : 「Barney Rubble」 , 「email」 : 「b@rubble.com」 , 「url」 : 「barnyrubble.tumblr.com/」 }

---

bugs: 項目問題反饋的Url或email配置

如： {
「url」 : 「github.com/owner/proje…, 「email」 : 「project@hostname.com」 }

---

main : 主文件。

好比默認是index.js，項目名稱叫mymodule。那麼require(‘mymodule’)將返回index.js返回的內容

---

bin : 項目用到的可執行文件配置

---

man : 指定一個單一的文件名或一個文件名數組。

意思相似於linux命令中的man 命令，來查看一個命令的用法 若是隻給man字段提供一個文件，則安裝完畢後，它就是man 的結果，這和此文件名無關

{ 「name」: 「foo」, 「version」: 「1.2.3」, 「description」: 「A packaged foo fooer for fooing foos」, 「main」: 「foo.js」, 「man」: 「./man/doc.1」 } 上面這個配置將會在執行man foo時就會使用./man/doc.1這個文件。

若是指定的文件名並未以包名開頭，那麼它會被冠之前綴，像這樣

{ 「name」: 「foo」, 「version」: 「1.2.3」, 「description」: 「A packaged foo fooer for fooing foos」, 「main」: 「foo.js」, 「man」: [ 「./man/foo.1」, 「./man/bar.1」 ] } 這將會爲man foo和man foo-bar建立文件

man文件必須以一個數字結尾，和一個可選的.gz後綴(當它被壓縮時)。這個數字說明了這個文件被安裝到哪一個節中

{ 「name」: 「foo」, 「version」: 「1.2.3」, 「description」: 「A packaged foo fooer for fooing foos」, 「main」: 「foo.js」, 「man」: [ 「./man/foo.1」, 「./man/foo.2」 ] } 會爲使用man foo和man 2 foo而建立

---

directories : CommonJS Packages規範

說明了幾種你能夠用directories對象來標示你的包結構的方法

---

directories.lib : 庫文件夾的位置

目前沒有什麼地方須要用到lib文件夾，可是這是重要的元信息

---

directories.bin : 若是你在directories.bin中指定一個bin目錄，在這個目錄中的全部文件都會被當作在bin來使用。

因爲bin指令的工做方式，同時指定一個bin路徑和設置directories.bin將是一個錯誤。若是你想指定獨立的文件，使用bin，若是想執行某個文件夾裏的全部文件，使用directories.bin。

---

directories.doc : 把markdown文件放在這。也許某一天這些文件將被漂亮地展現出來，不過這僅僅是也許

---

directories.man : directories.man指定的文件夾裏都是man文件，系統經過遍歷這個文件夾來生成一個man的數組

---

directories.example : 把示例腳本放在這。也許某一天會被用到

---

repository : 項目代碼存放地方

「repository」 : 
{ 「type」 : 「git」 
, 「url」 : 「https://github.com/npm/npm.git」 
} 
「repository」 : 
{ 「type」 : 「svn」 
, 「url」 : 「https://v8.googlecode.com/svn/trunk/」 
}

複製代碼

---

scripts : 聲明一系列npm腳本指令

---

prepublish : 在包發佈以前運行，也會在npm install安裝到本地時運行

---

publish,postpublish : 包被髮布以後運行

---

preinstall : 包被安裝前運行

---

install,postinstall : 包被安裝後運行

---

preuninstall,uninstall : 包被卸載前運行

---

postuninstall : 包被卸載後運行

---

preversion : bump包版本前運行

---

postversion : bump包版本後運行

---

pretest ,test ,posttest : 經過npm test命令運行

---

prestop ,stop ,poststop : 經過npm stop命令運行

---

prestart ,start ,poststart : 經過npm start命令運行

---

prerestart ,restart ,postrestart : 經過npm restart運行

"scripts": {

   "dev": "npm run start",

    "dist": "cross-env NODE_ENV=production node ./tools/script.js",

    "lint": "eslint src/ --ext .js,.vue && stylelint \"src/**/*.vue\" --syntax less",

    "lint:js": "eslint src/ --ext .js,.vue",

    "lint:style": "stylelint src/**/*.less --syntax less",

    "pub": "npm run dist",

    "start": "cross-env NODE_ENV=development node ./tools/script.js",

    "test": ""

    }
    
複製代碼

---

config : 配置項目中須要的配置參數：

{ 
「name」 : 「foo」 , 
「config」 : { 「port」 : 「8080」 } , 
「scripts」 : { 「start」 : 「node server.js」 } 
} 
    
複製代碼

server.js中使用process.env.npm_package_config_port來訪問port 用戶也能夠這樣修改：npm config set foo:port 80

---

dependencies : 項目在生產環境中依賴的包

---

devDependencies : 項目在開發和測試環境中依賴的包

---

peerDependencies : 在某些狀況下，當一個主機沒法require依賴包時，你會想要告訴它還有哪些工具或庫與這個依賴包兼容。這一般被成爲一個插件。尤爲是在host文檔中聲明的模塊會暴露一個特定的接口

{ 
    「name」: 「tea-latte」, 
    「version」: 「1.3.5」, 
    「peerDependencies」: { 
    「tea」: 「2.x」 
    } 
}
複製代碼

這將確保tea-latte這個包只會和2.x版本的tea一塊兒被安裝。執行npm install tea-latte可能產生如下關係圖：

├── tea-latte@1.3.5 
└── tea@2.2.0
複製代碼

---

bundledDependencies : {Array}，發佈時會被一塊兒打包的模塊

---

optionalDependencies : 若是一個依賴模塊能夠被使用， 同時你也但願在該模塊找不到或沒法獲取時npm繼續運行，你能夠把這個模塊依賴放到optionalDependencies配置中。這個配置的寫法和dependencies的寫法同樣，不一樣的是這裏邊寫的模塊安裝失敗不會致使npm install失敗。固然，這種模塊就須要你本身在代碼中處理模塊確實的狀況了，例如：

try { 
var foo = require(‘foo’) 
var fooVersion = require(‘foo/package.json’).version 
} catch (er) { 
foo = null 
} 
if ( notGoodFooVersion(fooVersion) ) { 
foo = null 
} 
// .. then later in your program .. 
if (foo) { 
foo.doFooThings() 
}

複製代碼

---

engines : 聲明項目須要的node或npm版本範圍

{ 「engines」 : { 「npm」 : 「~1.0.20」 } } 
{ 「engines」 : { 「node」 : 「>=0.10.3 <0.12」 } }
複製代碼

---

os : 指定你的項目將運行在什麼操做系統上

---

cpu : 指定你的項目將運行在什麼cpu架構上

---

preferGlobal : 若是你的包須要全局安裝，經過命令行來運行，那麼設置爲true。若是這個包被本地安裝則會出現一個警告

---

private : 若是設置爲true, 那麼npm會拒絕發佈它

publishConfig

---

package.json的dependencies和devDependencies是什麼意思

• devDependencies本地環境開發環境（開發環境）
• dependencies用戶發佈環境（項目所需的運行環境）

安裝依賴的三種方式

• npm install:將依賴模塊安裝到項目，但不寫package.json（不推薦，這樣最終須要手動添加）；

• npm install --save:將模塊安裝到項目，寫入的package.json的dependencies（生產環境）中；

• npm install --save-dev:將模塊安裝到本地，寫入package.json的devDependencies（開發環境）中。

如何知道使用--save仍是--save-dev；添加到開發環境仍是生產環境？

• 使用--save仍是--save-dev dependencies依賴的包不只開發環境能使用，生產環境也能使用 按照這個觀念很容易決定安裝模塊時是使用--save仍是--save-dev

• 添加到開發環境仍是生產環境

  • 【npm install --save】添加到生產環境dependencies的通常是項目所使用的框架。或者說項目正常運行須要的東西。 好比你在開發一個前端框架，這個框架是依賴與 jQuery 的， jQuery 就是 dependencies， 你試試沒有把jQuery添加到dependencies。哈哈哈，恭喜你，等着修bug吧。 其餘的dependencies如，vue，angular，electron，express。

  • 【npm install --save-dev】添加到開發環境devDependencies的通常是項目所使用的工具和插件。 沒有這些工具，你就沒辦法項目開發。 好比你在開發是用到的 gulp，grunt，webpack之類的打包工具和插件。沒有這些打包工具，項目能正常運行，可是沒法進行項目打包。

  • 項目正常運行，和項目被打包有毛關係啊，因此，分清楚項目運行和項目開發

項目負責人：配置package.js的dependencies和devDependencies時：

• 使用npm install --save將模塊安裝到項目，寫入的package.json的dependencies（生產環境），例如：

  npm install vue@3.0 --save
  複製代碼

  • 生產環境只須要咱們能正常運行該項目所須要的模塊， 好比vue，vue-router，express，jQuery等等這些，項目沒有這些依賴會出錯

• 使用npm install --save-dev寫入的package.json的devDependencies（開發環境），例如：

  npm install webpack@3.0 --save-dev 
  複製代碼

開發環境就是開發階段，咱們所作的單元測試，webpack，gulp，supervisor等這些工具，都只是在開發階段須要，一旦項目投入須要便再也不須要。

項目其餘開發人員：從git上pull下來項目來開發時

通常只須要：

• 【下載項目依賴】
  • 必定要進入對應的項目文件夾下，使用npm install 默認安裝dependencies和devDependencies中的模塊，若是隻須要安裝生產環境中的模塊使用npm install -production

通常咱們只須要使用npm install下載完依賴就能夠運行的，可是，若是你沒有安裝過git、node/npm等，就須要【根據開發文檔配置開發環境】

• 【根據開發文檔配置開發環境】
  • 如，安裝node對應版本，安裝webpack等，通常使用 -g安裝node/npm全局模塊，例如，使用

  npm install webpack@3.5.1 -g
  複製代碼

  • 請注意，必定要根據項目的package.json裏的dependencies和devDependencies來安裝全局模塊

參考

• PACKAGE.JSON---入門說明
• package.json文件————（阮一峯）
• 你真的理解devDependencies和dependencies區別嗎?
• dependencies和devDependencies的正確使用姿式
• Electron + Vue + Vscode構建跨平臺應用（二）Electron + Vue環境搭建