中高級(jí)前端必須掌握的package.json最新最全指南

中高級(jí)前端必須掌握的package.json最新最全指南 前言

package.json 是一個(gè)用于描述和配置項(xiàng)目的重要文件，其中包含了許多字段和選項(xiàng)，可以影響項(xiàng)目的構(gòu)建、依賴管理、腳本執(zhí)行等方面。了解這些字段可以幫助開發(fā)者更好地理解和控制項(xiàng)目的行為。

package.json對(duì)于大部分前端開發(fā)者來說，知道dependencies與devDependencies就夠了。但對(duì)于庫開發(fā)者或有更高級(jí)需求的開發(fā)者來說，了解 package.json 的其他字段是非常有必要的。

本文介紹的字段分為官方字段與非官方字段。非官方字段是被主流打包工具（webpack，Rollup）所支持， 旨在提供更高級(jí)的配置和功能，以滿足特定的構(gòu)建需求，可能不具備通用性。

目前版本：v7.24.2

一、必須屬性1. name

定義項(xiàng)目的名稱，不能以&34;.&34;和&34;_&34;開頭，不能包含大寫字母

2. version

定義項(xiàng)目的版本號(hào)，格式為：大版本號(hào).次版本號(hào).修訂號(hào)

二、描述信息1. description

項(xiàng)目描述

2. keywords

項(xiàng)目關(guān)鍵詞

3. author

項(xiàng)目作者

4. contributors

項(xiàng)目貢獻(xiàn)者

5. homepage

項(xiàng)目主頁地址

6. repository

項(xiàng)目代碼倉庫地址

7. bugs

項(xiàng)目提交問題的地址

8. funding

指定項(xiàng)目的資金支持方式和鏈接

三、依賴配置1. dependencies

生產(chǎn)環(huán)境的依賴包

如果不使用脫字符（^），安裝的版本號(hào)固定；如果使用，則能安裝當(dāng)前大版本的最新版本，在packagelock.json中可查看當(dāng)前實(shí)際安裝的版本。

2. devDependencies

開發(fā)環(huán)境的依賴包，例如webpack、vite、babel、ESLint等。

3. peerDependencies

對(duì)等依賴的作用：

1. 減小打包體積：例如使用react開發(fā)的組件庫，安裝react是必不可少的，而使用組件庫的開發(fā)者，本地項(xiàng)目肯定安裝了react，因此開發(fā)的組件庫中不必把react打包進(jìn)去（期望項(xiàng)目的使用者來提供這些模塊的實(shí)現(xiàn)）。
2. 版本一致性：使用你的組件庫的開發(fā)者需要確保他們項(xiàng)目中安裝了與你聲明的對(duì)等依賴版本兼容的包，以確保組件庫正常運(yùn)行。

示例：聲明要使用組件庫，需在項(xiàng)目中安裝大于17.0.1版本的react

4. peerDependenciesMeta

將對(duì)等依賴標(biāo)記為可選，如果用戶沒有安裝對(duì)等依賴，npm不會(huì)發(fā)出警告

5. bundledDependencies

聲明捆綁依賴項(xiàng)（使用情景較少）

6. optionalDependencies

聲明可選依賴項(xiàng)（使用情景較少）

7. engines

聲明對(duì)npm或node的版本要求

目前對(duì)NPM來說，engines只是起一個(gè)說明的作用，即使用戶安裝的版本不符合要求，也不影響依賴包的安裝。但使用pnpm 和 yarn安裝，如果版本不符合要求會(huì)導(dǎo)致安裝失敗。

8. workspaces

單個(gè)代碼庫中統(tǒng)一管理多個(gè)包（monorepo），在workspaces聲明目錄下的package會(huì)軟鏈到根目錄的node_modules中。

1. 初始化項(xiàng)目

2. 聲明本項(xiàng)目是workspaces模式

表示所有子包都在packages文件夾下

3. 創(chuàng)建子包p1

在node_modules/.packagelock.json中可以看到 &34;link&34;: true 鏈接符號(hào)信息

4. 新建packages/p1/index.js

5. 創(chuàng)建子包p2

6. 將子包p1添加到p2中

安裝，卸載等命令都是一樣的，只是多了&34;workspace=&34;參數(shù)（簡(jiǎn)寫w），用來指定在哪個(gè)包中執(zhí)行命令

7. 子包p2使用p1

workspaces功能與lerna類似，如果只需簡(jiǎn)單地管理多個(gè)包，workspaces足夠了。lerna具有版本管理，發(fā)包提示，簡(jiǎn)化多包項(xiàng)目發(fā)布流程等更多功能。

四、腳本配置1. scripts

腳本入口

2. config

用于定義項(xiàng)目的配置項(xiàng)，例如設(shè)置環(huán)境變量

1. config 配置

2. scripts 配置

3. 新建index.js

運(yùn)行 npm run start，終端打印出 example.com

五、文件&目錄1. module（非官方字段）

指定 ES 模塊入口文件

示例：當(dāng)其他開發(fā)者在他們的項(xiàng)目中導(dǎo)入你的包時(shí)，會(huì)加載并執(zhí)行包中的dist/index.esm.js

2. main

指定 CommonJS 模塊或 ES 模塊入口文件。如果不指定該字段，默認(rèn)是根目錄下的index.js

提示：從 Node.js 12.20.0 版本開始，&34;main&34; 字段也可以指定 ES 模塊的入口文件

3. browser

指定瀏覽器使用的入口文件，例如umd模塊。

4. types（非官方字段）

指定 TypeScript 類型聲明文件（.d.ts 文件）的路徑

5. exports（非官方字段）

當(dāng)打包工具支持exports字段時(shí)（webpack、Rollup 等），以上main，browser，module，types四個(gè)字段都被忽略

&34;.&34; 表示默認(rèn)導(dǎo)出

&34;import&34;: 指定了 ES module (ESM) 規(guī)范下的導(dǎo)出文件路徑

&34;require&34;: 指定了 CommonJS 規(guī)范下的導(dǎo)出文件路徑

&34;browser&34;: 指定了用于瀏覽器環(huán)境的導(dǎo)出文件路徑

&34;types&34;: 指定了類型聲明文件的路徑

導(dǎo)出其他文件，例如除了導(dǎo)出默認(rèn)路徑，導(dǎo)出源文件

其他項(xiàng)目中使用

6. type（非官方字段）

指定模塊系統(tǒng)的使用方式，&34;commonjs&34;，&34;module&34;，&34;umd&34;，&34;json&34;

示例：指定模塊系統(tǒng)為ES module模式，使用CommonJS文件時(shí)，需顯式的定義為 .cjs 文件擴(kuò)展名，來明確指定這些文件為 CommonJS 模塊

7. files

指定哪些包被推送到npm服務(wù)器中

示例：只推送index.js和dist包到npm服務(wù)器

可以在項(xiàng)目根目錄新建一個(gè).npmignore文件，說明不需要提交到npm服務(wù)器的文件，類似.gitignore。寫在這個(gè)文件中的文件即便被寫在files屬性里也會(huì)被排除在外

8. bin

定義在全局安裝時(shí)可執(zhí)行的命令，例如構(gòu)建腳手架

9. man

Linux 中的幫助指令（使用情景較少）

10. directories

定義項(xiàng)目目錄結(jié)構(gòu)的字段（使用情景較少）

六、發(fā)布配置1. private

防止私有包發(fā)布到npm服務(wù)器，要發(fā)布到npm上設(shè)為false

2. preferGlobal（非官方字段）

當(dāng)設(shè)置 &34;preferGlobal&34; 字段為 true 時(shí)，它表示你的包更適合以全局方式安裝，而不是作為項(xiàng)目的依賴項(xiàng)進(jìn)行本地安裝。

這個(gè)字段的設(shè)置是為了向用戶傳達(dá)關(guān)于你的包的最佳使用方式的建議。它并不會(huì)直接影響包的安裝方式或包管理器的行為。

3. publishConfig

在發(fā)布包時(shí)指定特定的配置

示例：指定包發(fā)布的注冊(cè)表 URL，指定所有用戶都可以訪問（私有的會(huì)收費(fèi)）

4. os

指定你的包適用的操作系統(tǒng)

示例：包只適用于darwin（macOS）和 linux

示例：禁用win32

5. cpu

該配置和OS配置類似，用CPU可以更準(zhǔn)確的限制用戶的安裝環(huán)境

6. license

指定軟件的開源協(xié)議：

ISC：在所有副本中保留版權(quán)聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔(dān)任何責(zé)任

MIT：在所有副本或主要部分中保留版權(quán)聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔(dān)任何責(zé)任

開源協(xié)議查詢地址：opensource.org/licenses/

七、第三方配置（非官方字段）1. eslintConfig

eslint的配置，更推薦新建 .eslintrc 進(jìn)行配置

使用參考：新建 .eslintrc

2. babel

babel的配置，更推薦新建 .babelrc 進(jìn)行配置

3. unpkg

unpkg 是一個(gè)基于 CDN 的前端包托管服務(wù)，用于在瀏覽器中直接引用和加載 npm 上發(fā)布的包。

無需下載，直接通過 <script> 標(biāo)簽引用

4. lintstaged

lintstaged是一個(gè)在Git暫存文件上運(yùn)行l(wèi)inters的工具，通常配合gitHooks一起使用。

使用參考：配置 husky、lintstaged、@commitlint/cli

5. browserslist

告知支持哪些瀏覽器及版本，Autoprefixer常用到它

6. sideEffects

指示包是否具有副作用，協(xié)助Webpack，Rollup等進(jìn)行tree shaking

多數(shù)情況下可以直接設(shè)置為false，這樣打包工具就會(huì)自動(dòng)刪除未被import的代碼

但是有些情況例外

1. 有一些特定的模塊文件，它們執(zhí)行一些副作用操作，如注冊(cè)全局事件監(jiān)聽器、修改全局狀態(tài)等。
2. 告訴構(gòu)建工具不要將樣式文件排除在無用代碼消除的優(yōu)化范圍之外

八、結(jié)尾

原文鏈接：https://juejin.cn/post/7240805459288522808