概覽

本文重點(diǎn)講解前端項(xiàng)目的package.json文件中，所涉及到的字段含義和它的使用場景。
避免一些配置性的錯誤，提高項(xiàng)目的維護(hù)性。

name

如果項(xiàng)目是需要發(fā)版為npm包的，則name字段是必須的。因?yàn)樗婕暗絥pm包的命名。

舉個例子

筆者曾發(fā)布過開源的npm包，名字是ping-url。
對應(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字符串長度，必須小于或等于214個字符。
• 同一作用域內(nèi)的包，可以用.或_作為開始字符
• 不能使用大寫字母命名
• 因?yàn)?code>name字段，在下載npm包時，會應(yīng)用于url中，所以不能帶任何不安全的URL字符。

不安全的URL字符

• 空格" "
• 大于小于號<>
• 方括號[]
• 花括號{}
• 豎線|
• 反斜杠\
• 插入號^
• 百分比%

私源npm包怎么命名？

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

舉個例子：

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

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

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

version

version字段用于定義版本號。

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

每次發(fā)布的version，必須是唯一的，之前發(fā)布的時候沒使用過的。
version 的命名規(guī)則和注意點(diǎn)，可以參考筆者的另一篇文章package.json怎么管理依賴包版本？，這里就不展開了。

description

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

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

keywords

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

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

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

homepage

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

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

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

repository

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

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

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

license

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

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

author

作者信息。

"author": {
    "name": "leon",
    "email": "582104384@qq.com",
    "url": "https://wangxiaokai.vip"
}

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

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

contributors

協(xié)作者信息。

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

"contributors": [{
    "name": "hanmeimei",
    "email": "hanmeimei@qq.com"
},{
    "name": "lihua",
    "email": "lihua@qq.com"
}]

files

聲明有哪些文件，是需要作為依賴項(xiàng)，保留下來。
不然，執(zhí)行npm publish進(jìn)行發(fā)布時，這些文件是會自動屏蔽上傳的。
同理，也可以使用.npmignore文件進(jìn)行配置。

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

如果沒有files字段聲明，則這些文件，都不會保留，npm包將不能使用。

main

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

bin

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

舉個例子

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

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

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

scripts

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

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

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

npm run build 打包

dependencies、devDependencies、peerDependencies

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

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

舉個例子

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

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

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

private

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

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

publishConfig

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

舉個例子：

筆者發(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)前版本對應(yīng)的標(biāo)簽

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

注意
如果沒有顯式指定tag，默認(rèn)tag是latest

types

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

module

性質(zhì)等同于main字段。module用于ES6規(guī)范的模塊，只要支持ES6，會優(yōu)先使用module入口。
這樣，代碼也可以啟用tree shaking機(jī)制。

unpkg

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

sideEffects

sideEffects格式：boolean | string[]。

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

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

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

注意點(diǎn)

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

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

當(dāng)然， 樣式文件使用"import xxx;"的方式引入，會進(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)目時，控制臺會有報(bào)錯輸出。

os

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

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

cpu

CPU的要求聲明。

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

workspaces

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

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

具體怎么在實(shí)戰(zhàn)中使用，可查看筆者的另一篇文章使用Yarn與Lerna管理monorepo。

bugs

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

{
  "url" : "https://github.com/owner/project/issues",
  "email" : "project@hostname.com"
}

參考

npm Docs

以上就是高級前端必會的package.json字段知識詳解的詳細(xì)內(nèi)容，更多關(guān)于前端package.json字段的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論