摘要：我們一般見(jiàn)到的都是大版本次要版本小版本這種版本號(hào)，比如。版本號(hào)的規(guī)則含義其實(shí)蠻多的，可以參考這篇文章。，等就不行了安裝版本號(hào)不低于的的最新版本，例如，，等。

在前端開(kāi)發(fā)中，npm已經(jīng)是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平時(shí)package.json用得挺多，但是沒(méi)有認(rèn)真看過(guò)官方文檔。本文結(jié)合npm官方文檔以及自己平時(shí)使用過(guò)程中的感悟，談一談package.json。官方文檔在這里。

使用npm init命令就可以初始化一個(gè)package.json文件。在初始化的過(guò)程中，會(huì)叫用戶輸入name, version等等信息，當(dāng)然，你都可以忽略。一路點(diǎn)回車，就生成了下面這樣一個(gè)初始化的package.json。

{
  "name": "test", // 假如項(xiàng)目叫做test
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

上面的package.json包含了項(xiàng)目的名稱，版本號(hào)，描述，入口文件，執(zhí)行腳本，作者，開(kāi)源協(xié)議等。package.json的內(nèi)容遠(yuǎn)不止這些，下面將一一進(jìn)行介紹。在開(kāi)發(fā)業(yè)務(wù)項(xiàng)目和開(kāi)發(fā)組件庫(kù)的時(shí)候，package.json是略有不一樣的。我會(huì)把我認(rèn)為重要的配置項(xiàng)加黑標(biāo)識(shí)出來(lái)。

name: 這個(gè)很好理解，就是package的名稱。不過(guò)需要注意的是，name有長(zhǎng)度限制(雖然一般都不會(huì)超)，而且name不能以 【點(diǎn)】 或者 【下劃線】開(kāi)頭，name中不能有大寫(xiě)字母。這個(gè)是每一個(gè)package必須的。在業(yè)務(wù)代碼中，通過(guò)require(${name})就可以引入對(duì)應(yīng)的程序包了。

version: package的版本。對(duì)于業(yè)務(wù)項(xiàng)目來(lái)說(shuō)，這個(gè)往往不太重要，但是如果你要發(fā)布自己的項(xiàng)目，這個(gè)就顯得十分重要了。name和version共同決定了唯一一份代碼。npm是用[npm-semver來(lái)解析版本號(hào)的。我們一般見(jiàn)到的都是大版本.次要版本.小版本這種版本號(hào)，比如16.1.0。版本號(hào)的規(guī)則、含義其實(shí)蠻多的，可以參考這篇文章。

desription：包的描述。開(kāi)發(fā)組件庫(kù)時(shí)必需，簡(jiǎn)明的向庫(kù)的使用者介紹這個(gè)庫(kù)是干嘛的。對(duì)于公司的業(yè)務(wù)項(xiàng)目，這個(gè)配置項(xiàng)一般無(wú)所謂。

keywords：關(guān)鍵詞。一個(gè)字符串?dāng)?shù)組，對(duì)這個(gè)npm包的介紹。組件庫(kù)必需，便于使用者在npm中搜索。對(duì)于公司業(yè)務(wù)項(xiàng)目，這個(gè)配置一般無(wú)所謂。

homepage： 項(xiàng)目主頁(yè)。對(duì)于開(kāi)發(fā)組件庫(kù)來(lái)說(shuō)挺有用的。

bugs：開(kāi)發(fā)者的聯(lián)系方式，代碼庫(kù)的issues地址等。如果代碼使用者發(fā)現(xiàn)了bug，可以通過(guò)這個(gè)配置項(xiàng)找到提bug的地方。

license：開(kāi)源協(xié)議。對(duì)于開(kāi)源組件庫(kù)，這個(gè)十分重要。之前react還因?yàn)檫@事兒沒(méi)少被社區(qū)嫌棄。開(kāi)源協(xié)議略微復(fù)雜，用阮一峰前輩的一張圖來(lái)說(shuō)明一下吧。注：圖里少了ISC, ISC和BSD差不多

author：項(xiàng)目的作者?？梢詾樽址瑢?duì)象。

contributors：項(xiàng)目的貢獻(xiàn)者。author的數(shù)組。

main：代碼入口。這個(gè)十分重要，特別是對(duì)于組件庫(kù)。當(dāng)你想在node_modules中修改你使用的某個(gè)組件庫(kù)的代碼時(shí)，首先在node_modules中找到這個(gè)組件庫(kù)，第一眼就是要看這個(gè)main，找到組件庫(kù)的入口文件。在這個(gè)入口文件中再去修改代碼吧。

scripts：指定了運(yùn)行腳本命令的npm命令行縮寫(xiě)。十分重要。

來(lái)看一個(gè)例子：

"scripts": {
    "dev": "NODE_ENV=dev webpack-dev-server --progress --hot --host 0.0.0.0 --port 8089",
    "test": "NODE_ENV=test webpack --config webpack.test.config.js --progress",
    "online": "NODE_ENV=production webpack --config webpack.online.config.js --progress",
    "build": "webpack",
    "node": "node server.js"
  },

在命令行輸入：npm run dev , 對(duì)應(yīng)的命令就會(huì)被執(zhí)行。這里有一個(gè)地方需要注意，當(dāng)執(zhí)行npm run xxx 的時(shí)候，node_modules/.bin/目錄會(huì)在運(yùn)行時(shí)被加入系統(tǒng)的PATH變量。上面的例子，當(dāng)我們?cè)诿钚休斎耄?b>npm run build時(shí)，其實(shí)真正執(zhí)行的命令是node_modules/.bin/webpack而不是webpack。所以，當(dāng)你的webpack并未全局安裝時(shí)，直接在命令行輸入：webpack是會(huì)報(bào)錯(cuò)的。因?yàn)槟愕膚ebapck是安裝在node_modules/.bin/下面的。

directories：對(duì)整個(gè)代碼結(jié)構(gòu)的描述。告訴代碼包使用者可以在哪里找到對(duì)應(yīng)的文件。

files：數(shù)組。表示代碼包下載安裝完成時(shí)包括的所有文件。

repository：對(duì)于組件庫(kù)很有用。讓組件庫(kù)使用者找到你的代碼庫(kù)地址。這個(gè)配置項(xiàng)會(huì)直接在組件庫(kù)的npm首頁(yè)生效。例子:

"repository": {
    "type": "git",
    "url": "git+https://github.com/CoyPan/react-scroll-to-show-cb.git"
},

config：用于添加命令行的環(huán)境變量。具體用法見(jiàn)這里。

dependencies：項(xiàng)目的依賴。通過(guò)npm install --save安裝的包會(huì)出現(xiàn)在這里。注意，不要把測(cè)試工具、代碼轉(zhuǎn)換器或者打包工具等放在這里。當(dāng)你在命令行里面使用npm install react --save時(shí)，react就會(huì)出現(xiàn)在dependencies。默認(rèn)是安裝最新的版本。如果想安裝某個(gè)特定的版本，可以npm install [email protected]。以下的dependencies，格式都是合法的，

"dependencies" : { 
    "foo" : "1.0.0 - 2.9999.9999",
    "bar" : ">=1.0.2 <2.1.2",
    "baz" : ">1.0.2 <=2.3.4",
    "boo" : "2.0.1",
    "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd" : "http://asdf.com/asdf.tar.gz",
    "til" : "~1.2",
    "elf" : "~1.2.3",
    "two" : "2.x",
    "thr" : "3.3.x",
    "lat" : "latest",
    "dyl" : "file:../dyl"
  }

我們常見(jiàn)的是下面這些：

"dependencies": {
    "foo": "1.0.0", // 指定了就是1.0.0版本
    "bar": "~1.2.2", // 安裝版本號(hào)不低于1.2.2的1.2.x的最新版本，例如:1.2.3， 1.2.4等等。1.2.1 ，1.3.x 等就不行了
    "baz": "?1.2.2", // 安裝版本號(hào)不低于1.2.2的1.x.x的最新版本，例如: 1.2.7，1.3.1，1.7.8等。1.2.1 ，2.0.0 等就不行了。注意，如果配置是^0.x.x，則和~0.x.x的效果一樣。                
    "lat": "latest"  // 安裝最新版本
}

dependencies 還可以像下面這樣配置：

"dependencies": {
    "foo": "git+ssh://[email protected]:foo/foo.git#v1.0.1",
}

foo組件的地址為git+ssh://{foo代碼庫(kù)的ssh地址}#v{foo的版本號(hào)}

這樣的配置在下面這種場(chǎng)景十分有用：

組內(nèi)的許多項(xiàng)目都有同一個(gè)功能，把這個(gè)功能抽出來(lái)做成組件是很自然的想法。但是每個(gè)項(xiàng)目都有自己的代碼庫(kù)，公司也沒(méi)有內(nèi)部的npm庫(kù)，組件應(yīng)該放在哪里呢？可以專門為組件新建一個(gè)代碼倉(cāng)庫(kù)，將組件放在這里開(kāi)發(fā)、迭代。這樣，各個(gè)項(xiàng)目都可以引用該組件：只需要在dependencies中將組件配置成上述的形式。至于組件的版本，可以通過(guò)git tag來(lái)控制。

dependencies還有其他的配置方式，具體在這里查看。

devDependencies：項(xiàng)目的依賴。通過(guò)npm run install --save-dev安裝的包會(huì)出現(xiàn)在這里。主要是在開(kāi)發(fā)過(guò)程中依賴的一些工具。用法與dependencies相似。

bundledDependencies：數(shù)組，打包時(shí)的依賴。如果配置了bundledDependencies，在項(xiàng)目中執(zhí)行 npm pack將項(xiàng)目打包時(shí)，最后生成的.tgz包中，會(huì)包含bundledDependencies中配置的依賴。bundledDependencies中的依賴必須在devDependencies或者dependencies中聲明過(guò)。

peerDependencies: 指定當(dāng)前組件的依賴以其版本。如果組件使用者在項(xiàng)目中安裝了其他版本的同一依賴，會(huì)提示報(bào)錯(cuò)。

engines：指定項(xiàng)目所依賴的node環(huán)境、npm版本等。

private：如果設(shè)為true，無(wú)法通過(guò)npm publish發(fā)布代碼。

bin：用來(lái)指定各個(gè)內(nèi)部命令對(duì)應(yīng)的可執(zhí)行文件的路徑。具體用法這里不多講了。詳情可以點(diǎn)擊這里。

本文涵蓋了package.json絕大部分的配置項(xiàng)。我的觀點(diǎn)是：如果是公司的業(yè)務(wù)項(xiàng)目，對(duì)于package.json，一般情況下，我覺(jué)得只需要關(guān)注好scripts，dependencies，devDependencies這三個(gè)地方就夠了。而對(duì)于開(kāi)源的組件庫(kù)，則至少需要關(guān)注好上面標(biāo)黑的幾個(gè)點(diǎn)。理解好重要配置的含義，提升開(kāi)發(fā)效率，減少踩坑的概率。

本文結(jié)合官方文檔以及自己平時(shí)工作中的體會(huì)，闡述了package.json這個(gè)配置文件中各項(xiàng)的含義以及用法。符合預(yù)期。

歡迎關(guān)注我的公眾號(hào)，這里只有干貨，符合你的預(yù)期。