摘要：字段由腳本命令組成的字典，這些命令運(yùn)行在包的各個(gè)生命周期中。在打包過程中，如果遇到字段會(huì)優(yōu)先使用字段表示的路徑下的文件，如果不存在，則用字段表示的作為入口，并按照的規(guī)范打包。其中還分析了文件中字段和字段的不同以及和兩個(gè)字段的區(qū)別。

所有用npm下載的包或者要上傳至npm的模塊都會(huì)有一個(gè)package.json文件，這個(gè)文件總是存在于模塊(或者包)的根目錄下，這個(gè)文件到底是干嘛的，現(xiàn)在就來做一個(gè)簡要說明。

package.json是對下載的包或模塊的描述信息，如果你要上傳包到npm服務(wù)器也要有對應(yīng)的模塊說明。說明包括項(xiàng)目名稱、版本、作者等等。package.json必須是一個(gè)嚴(yán)格的json格式，也就是說每一個(gè)字段都要使用雙引號，不論是key值還是value值。

如果你要在npm上發(fā)布你的包，則package.json必須要有兩個(gè)字段：name和version。其中name是包的名稱，version是版本，對于這兩個(gè)字段會(huì)有些約束。

name:
1)名稱不能超過214個(gè)字符
2)名稱不能以點(diǎn)或者下劃線開頭
3)包的名稱中不能包含大寫字母
4)此名稱將會(huì)成為URL的一部分，因此不能包含非URL的字符

version:
1)版本號由主版本.此版本.補(bǔ)丁版本組成
2)版本必須要由node-semver解析，它與npm捆綁在一起作為依賴項(xiàng)。

除了這兩個(gè)字段外，還有其他對應(yīng)的描述信息，下面對常用的字段做一個(gè)說明。

description和keyword字段：這兩個(gè)都是對應(yīng)的描述信息，使用兩個(gè)字段其中的某些內(nèi)容進(jìn)行搜索，可以在npm官網(wǎng)搜索到相關(guān)的包。不過這兩個(gè)也有他們的區(qū)別，前者對應(yīng)一個(gè)字符串，是對項(xiàng)目的一個(gè)簡要說明，可以是一段描述的語句。而后者是一個(gè)字符串?dāng)?shù)組，就像寫論文開頭的關(guān)鍵字，我們可以看一下vue項(xiàng)目的package.json，他里面的description和keyword如下：

"description": "Reactive, component-oriented view layer for modern web interfaces.",
"keyword": [
    "vue"
]

可以看出，keyword字段必須是一個(gè)數(shù)組，即使數(shù)組中只有一個(gè)成員。另外，數(shù)組的成員要使用雙引號，而數(shù)組的[]表示不需要雙引號。

author字段：作者

homePage字段：該包的官網(wǎng)地址

main字段：字段指定了程序的主入口文件，使用遵循CommonJS規(guī)范的require("moduleName")就會(huì)加載main字段指定的目錄下的文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js，也就是說如果不指定main字段，在其他模塊引用此模塊會(huì)默認(rèn)加載根目錄下的index.js文件。

module字段：此字段指定了使用ES6的module模塊引入該模塊時(shí)加載的文件路徑，即使用import "xx" from "./xx"所指定的路徑。關(guān)于main字段和module字段的區(qū)別會(huì)在下面講。

dependencies字段和devDependencies字段：這兩個(gè)字段表示項(xiàng)目的依賴，前者表示項(xiàng)目正常運(yùn)行(生產(chǎn)環(huán)境)時(shí)需要的依賴，后者指開發(fā)(開發(fā)環(huán)境)時(shí)所需要的依賴。開發(fā)環(huán)境和生產(chǎn)環(huán)境后面會(huì)做說明。這兩個(gè)字段都是一個(gè)對象，對象的成員又指定的模塊和對應(yīng)的版本組成，表示依賴的模塊和版本范圍，注意是版本范圍。

scripts字段：由腳本命令組成的字典，這些命令運(yùn)行在包的各個(gè)生命周期中。這里的鍵是生命周期事件名，值是要運(yùn)行的命令。比如下面的字段：

"script": {
    "install": "scripts/install.js",
    "postinstall" : "scripts/install.js",
    "uninstall" : "scripts/uninstall.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
}

比如上面的install，在安裝npm包時(shí)就應(yīng)用后面的命令，即npm install會(huì)運(yùn)行"script/install.js"命令。上面前三個(gè)是npm安裝的生命周期，后面的幾個(gè)就是自定義的命令了，比如使用npm run build運(yùn)行build后面的命令。

engine字段：表示你的項(xiàng)目所運(yùn)行的node版本。不指定engine字段，或者用*表示不限制node版本。

要理解main字段和module字段的不同要先明白Tree-Shaking的機(jī)制，簡單來講，Tree-Shaking的作用是將沒有用到的代碼全部過濾掉，但是在使用main字段作為入口導(dǎo)入的文件是遵循CommonJS規(guī)范的，也就是說暴露出的代碼是作為export對象的一個(gè)屬性，舉例來講，如果暴露出一個(gè)add的方法作為export的屬性，那在外部訪問的時(shí)候如果使用"a"+"dd"的方式訪問，打包工具是無法檢測到是否使用了add這個(gè)方法，因?yàn)樵L問js的對象屬性實(shí)在是太靈活了。如果使用ES6的module新特性，則不需要將其作為export對象的屬性暴露出來的，而且ES6提出的module模塊有更好的模塊特性。這樣的話打包的時(shí)候打包工具就能夠檢測到暴露出來的那些方法沒有用到的，以便除去這些代碼。

在package.json文檔中并沒有提到module字段，那為什么會(huì)出現(xiàn)module的字段，其實(shí)這是rollup最早提出的概念pkg.module。在早期很多npm包都是遵循CommonJS規(guī)范的，那時(shí)package.json長這樣:

{
    "name": "xxx",
    "version": "1.0.0",
    "main": "lib/index.js"
}

在模塊中使用require("xxx")，會(huì)將require的參數(shù)(xxx)作為一個(gè)包來進(jìn)行查找，讀取該目錄下package.json文件，取得main字段指定的文件作為入口。但在ES6盛行之后有了module模塊，并且這是官方標(biāo)準(zhǔn)，用起來更順手，而CommonJS還是傳統(tǒng)格式，所以rollup利用ES6的module新特性，在打包的性能上有了一個(gè)很好的提高。

那既然main字段可以作為文件的入口，何必還要module字段的呢？原因有以下兩點(diǎn)：

1)按照約定發(fā)布在npm上面的包都是基于ES5規(guī)范的，而且通常我們在使用babel工具將ES6編譯為ES5的過程中是將node_modules目錄下的文件過濾掉的，也就是說node_modules目錄下的文件將不會(huì)被babel工具編譯，這是因?yàn)楸苊鈈abel編譯node_modules目錄下的文件會(huì)極大提高編譯速度。但如果我們把main字段直接指向我們用ES6語法寫的源碼上用戶就要打開babel編譯工具配置其編譯node_modules目錄下的文件。

2)如果用戶開發(fā)的是node環(huán)境下的項(xiàng)目使用到我們發(fā)布的基于ES6語法寫的源碼，可能連打包的步驟都不會(huì)有，而他的是node環(huán)境恰巧不支持ES6的語法，那代碼就會(huì)報(bào)錯(cuò)。

因此main字段應(yīng)該是指向編譯后的ES5的代碼，于是就應(yīng)該出現(xiàn)一種新的字段解決這個(gè)問題，此時(shí)module字段就出現(xiàn)了，那現(xiàn)在的package.json長這樣：

{
    "name": "xxx",
    "version": "1.0.0",
    "main": "lib/index.js",
    "module": "lib/index.esm.js" 
}

以上說明，我們的main字段應(yīng)該指向基于CommonJS規(guī)范而使用ES5語法寫的源碼，而moudle字段應(yīng)該是指向遵循ES6模塊規(guī)范的(也就是說使用ES6模塊導(dǎo)出的，這樣是為了能夠讓打包工具使用Tree-Shaking機(jī)制打包代碼)而使用ES5語法編寫的源碼，這是為了避免用戶在使用babel編譯工具屏蔽掉了node_modules目錄中的文件。我們可以看一下Vue源碼中package.json中main和module字段指定的源碼就是這樣做的。

在webpack2.0版本以上打包過程中，也逐漸開始支持module字段。在打包過程中，如果遇到module字段會(huì)優(yōu)先使用module字段表示的路徑下的文件，如果module不存在，則用main字段表示的作為入口，并按照CommonJS的規(guī)范打包。

開發(fā)環(huán)境就是開發(fā)時(shí)候的服務(wù)器，配置比較隨意，會(huì)打開所有的錯(cuò)誤提醒，盡量讓開發(fā)中的錯(cuò)誤、bug等全部暴露出來方便調(diào)試。

測試環(huán)境一般是模擬真實(shí)運(yùn)行環(huán)境，拷貝一份與真實(shí)環(huán)境相同的配置做各種測試，使其盡可能多的暴露出程序的問題出來方便修改。

生產(chǎn)環(huán)境就是真實(shí)運(yùn)行環(huán)境，是對外提供服務(wù)的，一般會(huì)關(guān)閉錯(cuò)誤報(bào)告，打開錯(cuò)誤日志，收集錯(cuò)誤，方便修改bug。

這三個(gè)環(huán)境就是一個(gè)項(xiàng)目所經(jīng)歷的三個(gè)過程，開發(fā) --> 測試 --> 上線

項(xiàng)目中我們可以使用process.env.NODE_ENV來取得當(dāng)前的環(huán)境，開發(fā)環(huán)境返回字符串"development"，生產(chǎn)環(huán)境返回字符串"production"

使用npm的init命令創(chuàng)建一個(gè)package.json文件。之后會(huì)逐行提示你輸入每個(gè)字段的值。當(dāng)然也可輸入npm init -y生成一個(gè)各字段默認(rèn)值的packake.json文件

本文講了package.json文件的作用、其中個(gè)字段的說明以及如何生成package.json文件。其中還分析了package.json文件中main字段和module字段的不同以及dependencies和devDependencies兩個(gè)字段的區(qū)別。文中若有表述不妥或是知識點(diǎn)有誤之處，歡迎留言指正批評！