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

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

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

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

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

目前版本：v7.24.2

一、必須屬性1. name

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

2. version

定義項目的版本號，格式為：大版本號.次版本號.修訂號

二、描述信息1. description

項目描述

2. keywords

項目關鍵詞

3. author

項目作者

4. contributors

項目貢獻者

5. homepage

項目主頁地址

6. repository

項目代碼倉庫地址

7. bugs

項目提交問題的地址

8. funding

指定項目的資金支持方式和鏈接

三、依賴配置1. dependencies

生產環境的依賴包

如果不使用脫字符（^），安裝的版本號固定；如果使用，則能安裝當前大版本的最新版本，在packagelock.json中可查看當前實際安裝的版本。

2. devDependencies

開發環境的依賴包，例如webpack、vite、babel、ESLint等。

3. peerDependencies

對等依賴的作用：

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

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

4. peerDependenciesMeta

將對等依賴標記為可選，如果用戶沒有安裝對等依賴，npm不會發出警告

5. bundledDependencies

聲明捆綁依賴項（使用情景較少）

6. optionalDependencies

聲明可選依賴項（使用情景較少）

7. engines

聲明對npm或node的版本要求

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

8. workspaces

單個代碼庫中統一管理多個包（monorepo），在workspaces聲明目錄下的package會軟鏈到根目錄的node_modules中。

1. 初始化項目

2. 聲明本項目是workspaces模式

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

3. 創建子包p1

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

4. 新建packages/p1/index.js

5. 創建子包p2

6. 將子包p1添加到p2中

安裝，卸載等命令都是一樣的，只是多了&34;workspace=&34;參數（簡寫w），用來指定在哪個包中執行命令

7. 子包p2使用p1

workspaces功能與lerna類似，如果只需簡單地管理多個包，workspaces足夠了。lerna具有版本管理，發包提示，簡化多包項目發布流程等更多功能。

四、腳本配置1. scripts

腳本入口

2. config

用于定義項目的配置項，例如設置環境變量

1. config 配置

2. scripts 配置

3. 新建index.js

運行 npm run start，終端打印出 example.com

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

指定 ES 模塊入口文件

示例：當其他開發者在他們的項目中導入你的包時，會加載并執行包中的dist/index.esm.js

2. main

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

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

3. browser

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

4. types（非官方字段）

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

5. exports（非官方字段）

當打包工具支持exports字段時（webpack、Rollup 等），以上main，browser，module，types四個字段都被忽略

&34;.&34; 表示默認導出

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

&34;require&34;: 指定了 CommonJS 規范下的導出文件路徑

&34;browser&34;: 指定了用于瀏覽器環境的導出文件路徑

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

導出其他文件，例如除了導出默認路徑，導出源文件

其他項目中使用

6. type（非官方字段）

指定模塊系統的使用方式，&34;commonjs&34;，&34;module&34;，&34;umd&34;，&34;json&34;

示例：指定模塊系統為ES module模式，使用CommonJS文件時，需顯式的定義為 .cjs 文件擴展名，來明確指定這些文件為 CommonJS 模塊

7. files

指定哪些包被推送到npm服務器中

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

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

8. bin

定義在全局安裝時可執行的命令，例如構建腳手架

9. man

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

10. directories

定義項目目錄結構的字段（使用情景較少）

六、發布配置1. private

防止私有包發布到npm服務器，要發布到npm上設為false

2. preferGlobal（非官方字段）

當設置 &34;preferGlobal&34; 字段為 true 時，它表示你的包更適合以全局方式安裝，而不是作為項目的依賴項進行本地安裝。

這個字段的設置是為了向用戶傳達關于你的包的最佳使用方式的建議。它并不會直接影響包的安裝方式或包管理器的行為。

3. publishConfig

在發布包時指定特定的配置

示例：指定包發布的注冊表 URL，指定所有用戶都可以訪問（私有的會收費）

4. os

指定你的包適用的操作系統

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

示例：禁用win32

5. cpu

該配置和OS配置類似，用CPU可以更準確的限制用戶的安裝環境

6. license

指定軟件的開源協議：

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

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

開源協議查詢地址：opensource.org/licenses/

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

eslint的配置，更推薦新建 .eslintrc 進行配置

使用參考：新建 .eslintrc

2. babel

babel的配置，更推薦新建 .babelrc 進行配置

3. unpkg

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

無需下載，直接通過 <script> 標簽引用

4. lintstaged

lintstaged是一個在Git暫存文件上運行linters的工具，通常配合gitHooks一起使用。

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

5. browserslist

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

6. sideEffects

指示包是否具有副作用，協助Webpack，Rollup等進行tree shaking

多數情況下可以直接設置為false，這樣打包工具就會自動刪除未被import的代碼

但是有些情況例外

1. 有一些特定的模塊文件，它們執行一些副作用操作，如注冊全局事件監聽器、修改全局狀態等。
2. 告訴構建工具不要將樣式文件排除在無用代碼消除的優化范圍之外

八、結尾

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