今天想為大家講講前端項(xiàng)目的package.json文件中相關(guān)的字段含義及使用場(chǎng)景。我們先避免一些配置性的錯(cuò)誤，提高項(xiàng)目的維護(hù)性。

　　name

　　我們要知道當(dāng)項(xiàng)目是需要發(fā)版為npm包的，那么name字段是必須的。因?yàn)樗婕暗絥pm包的命名。

　　舉個(gè)例子

　　筆者曾發(fā)布過(guò)開(kāi)源的npm包，名字是ping-url。

　　對(duì)應(yīng)的源代碼package.json的定義如下：

　　{
　　"name": "ping-url",
　　"version": "1.0.3",
　　"description": "Check the url is normally accessible or not"
　　// other
　　}

　　如果項(xiàng)目是不需要發(fā)版成npm包的，則name字段是可選的，不一定要設(shè)置。

　　name命名規(guī)范

　　name字符串長(zhǎng)度，必須小于或等于214個(gè)字符。

　　同一作用域內(nèi)的包，可以用.或_作為開(kāi)始字符

　　不能使用大寫(xiě)字母命名

　　因?yàn)閚ame字段，在下載npm包時(shí)，會(huì)應(yīng)用于url中，所以不能帶任何不安全的URL字符。

　　不安全的URL字符

　　空格" "

　　大于小于號(hào)<>

　　方括號(hào)[]

　　花括號(hào){}

　　豎線(xiàn)|

　　反斜杠\

　　插入號(hào)^

　　百分比%

　　私源npm包怎么命名？

　　格式：@[scope]/[name]。

　　舉個(gè)例子：

　　筆者想要發(fā)布個(gè)私源是@leon，包名是ping-url的包，則name需要命名為：@leon/ping-url。

　　{
　　"name": "@leon/ping-url",
　　"version": "1.0.3"
　　}

　　安裝命令：npm install @leon/ping-url。

　　version

　　version字段用于定義版本號(hào)。

　　如果項(xiàng)目是為發(fā)布npm包，則必須包含此字段。但如果是普通的項(xiàng)目，則此字段是可選的。

　　每次發(fā)布的version，必須是唯一的，之前發(fā)布的時(shí)候沒(méi)使用過(guò)的。

　　version的命名規(guī)則和注意點(diǎn)，這個(gè)可以看看另一篇文章關(guān)于package.json怎么管理依賴(lài)包版本？

　　description

　　description用于描述當(dāng)前項(xiàng)目的概況。

　　如上圖所示，發(fā)布的npm包，在搜索結(jié)果中，可以直接顯示description內(nèi)容，如何，是不是非常直觀方便的了解包的功能。

　　keywords

　　圖中標(biāo)簽在package.json中對(duì)應(yīng)的定義：

　　"keywords": [
　　"ping url",
　　"ping host",
　　"ping"
　　]

　　從上述例子可以很清晰地看出，keywords是標(biāo)簽，用于標(biāo)記當(dāng)前項(xiàng)目的重點(diǎn)詞匯。我們也可以作為搜索關(guān)鍵詞，提供給資源平臺(tái)使用，進(jìn)行索引。

　　homepage

　　項(xiàng)目的官網(wǎng)主頁(yè)地址。

　　"homepage": "https://github.com/wall-wxk/ping-url"

　　項(xiàng)目有對(duì)應(yīng)官網(wǎng)地址的話(huà)，可以在homepage中聲明。如果沒(méi)有的話(huà)，也可以像筆者這樣，放個(gè)github項(xiàng)目源碼入口。

　　repository

　　項(xiàng)目的源碼地址。

　　"repository": {
　　"type": "git",
　　"url": "https://github.com/wall-wxk/ping-url.git"
　　}

　　開(kāi)源項(xiàng)目，這個(gè)字段很重要。

　　因?yàn)橛幸庀虻膮f(xié)作者，可以通過(guò)字段信息，便捷地進(jìn)入查看項(xiàng)目源碼。

　　license

　　項(xiàng)目的協(xié)議類(lèi)型。

　　這個(gè)項(xiàng)目涉及到知識(shí)產(chǎn)權(quán)方面的知識(shí)。所以開(kāi)源項(xiàng)目的時(shí)候，要重點(diǎn)考慮到底要用哪個(gè)協(xié)議，而不是無(wú)腦用MIT。 具體的可選協(xié)議列表，可查看SPDX License List

　　author

　　作者信息。

　　"author": {
　　"name": "leon",
　　"email": "[email protected]",
　　"url": "https://wangxiaokai.vip"
　　}

　　如果有興趣讓別人知道你是誰(shuí)，這個(gè)字段是必不可少的。

　　當(dāng)然如果你的代碼是shit mountain，這個(gè)字段也可以讓別人知道是你寫(xiě)的....

　　contributors

　　協(xié)作者信息。

　　格式是一個(gè)對(duì)象數(shù)組。對(duì)象內(nèi)容和author一致。

　　"contributors": [{
　　"name": "hanmeimei",
　　"email": "[email protected]"
　　},{
　　"name": "lihua",
　　"email": "[email protected]"
　　}]
　　files

　　聲明有哪些文件，是需要作為依賴(lài)項(xiàng)，保留下來(lái)。

　　不然，執(zhí)行npm publish進(jìn)行發(fā)布時(shí)，這些文件是會(huì)自動(dòng)屏蔽上傳的。

　　同理，也可以使用.npmignore文件進(jìn)行配置。

　　"files": [
　　"dist/*.js",
　　"lib"
　　]

　　如果沒(méi)有files字段聲明，則這些文件，都不會(huì)保留，npm包將不能使用。

　　main

　　使用npm包時(shí)，需要進(jìn)行require(..)的操作。這個(gè)操作，會(huì)查看main字段，找到程序的主入口。

　　bin

　　工具性質(zhì)的npm包，一定有bin字段，對(duì)外暴露腳本命令。

　　舉個(gè)例子

　　"bin": {
　　"npg-cli": "bin/cli"
　　}

　　筆者發(fā)布的npm-package-cli包，是用于生成npm包腳手架的工具，對(duì)外暴露了腳本命令：npg-cli。詳情可查看npm-package-cli。

　　使用方安裝npm-package-cli包后，npg-cli命令會(huì)進(jìn)行注冊(cè)，可以在CMD中識(shí)別并運(yùn)行。

　　scripts

　　項(xiàng)目腳本命令。（PS：這個(gè)就不需要解釋了：））

　　需要注意的，一定要有約定俗成的規(guī)范腳本命令，降低維護(hù)成本。

　　比如：

　　npm run start項(xiàng)目啟動(dòng)

　　npm run build打包

　　dependencies、devDependencies、peerDependencies

　　依賴(lài)的使用性質(zhì)劃分。詳細(xì)可查看筆者的文章package.json怎么管理依賴(lài)包版本？。

　　需要提及的一點(diǎn)：peerDependencies在npm包的依賴(lài)關(guān)系處理中，很重要。

　　舉個(gè)例子

　　UI組件庫(kù)leon-ui依賴(lài)React版本16，那么package.json中，應(yīng)該用peerDependencies告知使用方，需要React 16。

　　"peerDependencies": {
　　"react": ">=16.8.0"
　　}

　　大家還可以注意項(xiàng)目npm install時(shí)，控制臺(tái)會(huì)輸出一些依賴(lài)的WARN，就是peerDependencies在起作用。

　　private

　　private和發(fā)布npm包相關(guān)。

　　當(dāng)private: true時(shí)，npm會(huì)拒絕發(fā)布當(dāng)前項(xiàng)目。這是防止意外發(fā)布個(gè)人倉(cāng)庫(kù)的一種保護(hù)方式。

　　publishConfig

　　用于定義發(fā)布npm時(shí)，設(shè)置相關(guān)信息。

　　舉個(gè)例子：

　　筆者發(fā)布私源npm包，到自己的npm服務(wù)，可以配置如下：

　　"publishConfig": {
　　"registry": "http://npm.wangxiaokai.vip/repository/",
　　"access": "public",
　　"tag": "leon-tag"
　　}

　　registry發(fā)布的npm私源地址

　　access發(fā)布有作用域的包（比如@leon/ping-url），必須要設(shè)置access。

　　tag指定當(dāng)前版本對(duì)應(yīng)的標(biāo)簽

　　如圖所示，右側(cè)即是標(biāo)簽tag。

　　注意

　　如果沒(méi)有顯式指定tag，默認(rèn)tag是latest

　　types

　　項(xiàng)目如果是用TypeScript寫(xiě)的，則需要types字段，對(duì)外暴露相關(guān)的類(lèi)型定義。

　　module

　　性質(zhì)等同于main字段。module用于ES6規(guī)范的模塊，只要支持ES6，會(huì)優(yōu)先使用module入口。

　　這樣，代碼也可以啟用tree shaking機(jī)制。

　　unpkg

　　CDN方式下，引入當(dāng)前npm包的鏈接。

　　sideEffects

　　sideEffects格式：boolean | string[]。

　　sideEffects: false用于告知打包工具（webpack），當(dāng)前項(xiàng)目無(wú)副作用，可以使用tree shaking優(yōu)化。

　　sideEffects的值，也可以是一個(gè)文件路徑組成的數(shù)組。告知哪些文件無(wú)副作用，可以使用tree shaking優(yōu)化。

　　"sideEffects": [
　　"a.js",
　　"b.js"
　　]

　　注意點(diǎn)

　　"import xxx;"語(yǔ)句，只引入未使用，如果聲明了sideEffects，則會(huì)被tree shaking刪除掉。

　　并且，由于tree shaking只在production模式生效，所以本地開(kāi)發(fā)會(huì)一切正常，生產(chǎn)環(huán)境很難及時(shí)發(fā)現(xiàn)這個(gè)問(wèn)題。

　　當(dāng)然， 樣式文件使用"import xxx;"的方式引入，會(huì)進(jìn)行保留。

　　engines

　　項(xiàng)目運(yùn)行環(huán)境的要求聲明。

　　"engines": {
　　"node": ">=0.10.3 <15"
　　}

　　上述代碼，告知node版本需要在0.10.3與15之間，才可以運(yùn)行當(dāng)前項(xiàng)目。

　　在不符合條件的環(huán)境中運(yùn)行項(xiàng)目時(shí)，控制臺(tái)會(huì)有報(bào)錯(cuò)輸出。

　　os

　　操作系統(tǒng)的要求聲明。

　　"os": [
　　"darwin",
　　"linux"
　　]

　　cpu

　　CPU的要求聲明。

　　"cpu": [
　　"x64",
　　"ia32"
　　]

　　workspaces

　　monorepo類(lèi)型的項(xiàng)目，需要用到workspaces。它可以告知其他工具，當(dāng)前項(xiàng)目的工作區(qū)間在哪里。

　　{
　　"name": "workspace-example",
　　"workspaces": [
　　"./packages/*"
　　]
　　}

　　這里直接推薦另一篇文章使用Yarn與Lerna管理monorepo。

　　bugs

　　開(kāi)源項(xiàng)目用于接收bug反饋。

　　{
　　"url" : "https://github.com/owner/project/issues",
　　"email" : "[email protected]"
　　}

　　有關(guān)高級(jí)前端必會(huì)的package.json字段知識(shí)已經(jīng)全部講述完畢。