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

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

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

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

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

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

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

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

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

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

author字段：作者

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

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

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

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

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

"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包時就應(yīng)用后面的命令，即npm install會運行"script/install.js"命令。上面前三個是npm安裝的生命周期，后面的幾個就是自定義的命令了，比如使用npm run build運行build后面的命令。

engine字段：表示你的項目所運行的node版本。不指定engine字段，或者用*表示不限制node版本。

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

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

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

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

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

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

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

因此main字段應(yīng)該是指向編譯后的ES5的代碼，于是就應(yīng)該出現(xiàn)一種新的字段解決這個問題，此時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機制打包代碼)而使用ES5語法編寫的源碼，這是為了避免用戶在使用babel編譯工具屏蔽掉了node_modules目錄中的文件。我們可以看一下Vue源碼中package.json中main和module字段指定的源碼就是這樣做的。

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

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

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

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

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

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

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

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