一、前言

在 HOW - 編寫并發(fā)布一個(gè) npm 包模塊（含 CLI 工具包開發(fā)） 中我們簡單介紹過 package.json 文件，并提供了如下示例：

 {// 包的名稱"name": "changelog-tool",// 包的版本號(hào)"version": "0.5.0",// 這將顯示在NPM搜索結(jié)果中"description": "A CLI tool for manipulating changelogs",// 這告訴Node這是一個(gè)ESM包// 當(dāng)然不是嚴(yán)格需要的，如果我們?cè)诿總€(gè)地方都是使用 .mjs"type": "module",// 如果需要在編碼的時(shí)候使用此包中的方法（不是 CLI 中），則需要在這里指定導(dǎo)出的模塊入口文件"main": "index.mjs",// 將必須的文件才發(fā)布到 npm"files": {"dist","types",//...}"scripts": {// 運(yùn)行測(cè)試用例"test": "node --test",},// 方便更好的在 npmjs.org 上發(fā)現(xiàn)此包"keywords": ["changelog","markdown"],// 作者信息"author": "Evert Pot (https://evertpot.com/)",// 做任何你想做的事（MIT協(xié)議基本沒有約束）"license": "MIT","engine": {// 警告尚未升級(jí)的用戶"node": ">16"},"bin": {// 指定執(zhí)行文件，當(dāng)人們安裝這個(gè)包時(shí)，可以通過 `npx changelog` 執(zhí)行// 如果全局安裝了這個(gè)包，就會(huì)有一個(gè) `changelog` 命令"changelog": "./cli.mjs"},"devDependencies": {"@types/node": "^18.11.19",}
}

除了上述幾個(gè) Key Fields，一個(gè)完整的開源庫還應(yīng)該設(shè)置更多屬性。今天我們就來主要介紹一下 package.json。

二、介紹

package.json 文件是 Node.js 項(xiàng)目中的一個(gè)關(guān)鍵組件，它包含了項(xiàng)目的元數(shù)據(jù)，比如項(xiàng)目依賴、腳本、版本等信息。package.json 文件是管理 Node.js 項(xiàng)目的靈活而強(qiáng)大的方式，確保項(xiàng)目的一致性和便于協(xié)作。

下面是一個(gè) package.json 文件的示例以及各個(gè)字段的解釋。

2.1 package.json 文件示例

{"name": "example-project","version": "1.0.0","description": "一個(gè)展示 package.json 文件的示例項(xiàng)目","main": "index.js","scripts": {"start": "node index.js","test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "git+https://github.com/username/example-project.git"},"keywords": ["示例","演示","node"],"author": "Your Name <youremail@example.com>","license": "ISC","bugs": {"url": "https://github.com/username/example-project/issues"},"homepage": "https://github.com/username/example-project#readme","dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}

2.2 關(guān)鍵字段

1. name: 項(xiàng)目的名稱，應(yīng)為小寫字母，可以包含連字符和下劃線。
2. version: 項(xiàng)目的當(dāng)前版本，遵循語義化版本控制（semver）。
3. description: 項(xiàng)目的簡短描述。
4. main: 應(yīng)用程序的入口文件（通常是主 JavaScript 文件）。
5. scripts: 定義一組可以通過 npm run <script-name> 運(yùn)行的腳本命令。常見的腳本包括：
   • "start": 通常用于啟動(dòng)應(yīng)用程序。
   • "test": 用于運(yùn)行測(cè)試。
6. repository: 關(guān)于源代碼托管倉庫的信息。
7. keywords: 一個(gè)字符串?dāng)?shù)組，幫助人們?cè)谒阉鲿r(shí)找到你的項(xiàng)目。
8. author: 項(xiàng)目作者的名字和聯(lián)系方式。
9. license: 項(xiàng)目的許可證。
10. bugs: 報(bào)告問題的地址。
11. homepage: 項(xiàng)目的主頁 URL。
12. dependencies: 一個(gè)對(duì)象，指定了項(xiàng)目的運(yùn)行時(shí)依賴及其版本。
13. devDependencies: 一個(gè)對(duì)象，指定了項(xiàng)目的開發(fā)時(shí)依賴，僅在開發(fā)過程中需要。

2.3 常用命令

• 安裝依賴: 運(yùn)行 npm install 安裝 package.json 中列出的所有依賴。
• 添加依賴: 運(yùn)行 npm install <package-name> 添加一個(gè)新的依賴，并自動(dòng)更新 package.json。
• 運(yùn)行腳本: 運(yùn)行 npm run <script-name> 執(zhí)行 scripts 部分定義的腳本。

2.4 自定義腳本

你可以在 scripts 部分定義任何自定義腳本。例如：

"scripts": {"start": "node index.js","test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js","lint": "eslint ."
}

這樣你就可以運(yùn)行自定義命令，比如 npm run build 使用 Webpack 打包你的應(yīng)用程序，或者 npm run lint 使用 ESLint 檢查你的代碼。

三、element-plus 完整示例

業(yè)內(nèi)有名的組件庫 element-plus 其 package.json 文件：

{"name": "element-plus","version": "2.7.1","description": "A Component Library for Vue 3","keywords": ["element-plus","element","component library","ui framework","ui","vue"],"homepage": "https://element-plus.org/","bugs": {"url": "https://github.com/element-plus/element-plus/issues"},"license": "MIT","main": "lib/index.js","module": "es/index.mjs","types": "es/index.d.ts","exports": {".": {"types": "./es/index.d.ts","import": "./es/index.mjs","require": "./lib/index.js"},"./global": {"types": "./global.d.ts"},"./es": {"types": "./es/index.d.ts","import": "./es/index.mjs"},"./lib": {"types": "./lib/index.d.ts","require": "./lib/index.js"},"./es/*.mjs": {"types": "./es/*.d.ts","import": "./es/*.mjs"},"./es/*": {"types": ["./es/*.d.ts","./es/*/index.d.ts"],"import": "./es/*.mjs"},"./lib/*.js": {"types": "./lib/*.d.ts","require": "./lib/*.js"},"./lib/*": {"types": ["./lib/*.d.ts","./lib/*/index.d.ts"],"require": "./lib/*.js"},"./*": "./*"},"unpkg": "dist/index.full.js","jsdelivr": "dist/index.full.js","repository": {"type": "git","url": "git+https://github.com/element-plus/element-plus.git"},"publishConfig": {"access": "public"},"style": "dist/index.css","sideEffects": ["dist/*","theme-chalk/**/*.css","theme-chalk/src/**/*.scss","es/components/*/style/*","lib/components/*/style/*"],"peerDependencies": {"vue": "^3.2.0"},"dependencies": {"@ctrl/tinycolor": "^3.4.1","@element-plus/icons-vue": "^2.3.1","@floating-ui/dom": "^1.0.1","@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7","@types/lodash": "^4.14.182","@types/lodash-es": "^4.17.6","@vueuse/core": "^9.1.0","async-validator": "^4.2.5","dayjs": "^1.11.3","escape-html": "^1.0.3","lodash": "^4.17.21","lodash-es": "^4.17.21","lodash-unified": "^1.0.2","memoize-one": "^6.0.0","normalize-wheel-es": "^1.2.0"},"devDependencies": {"@types/node": "*","csstype": "^2.6.20","vue": "^3.2.37","vue-router": "^4.0.16"},"vetur": {"tags": "tags.json","attributes": "attributes.json"},"web-types": "web-types.json","browserslist": ["> 1%","not ie 11","not op_mini all"],"gitHead": "b0ce448b4dc7c8981ed73bd2554f4dbbe05d1446"
}

3.1 main 和 module

在 package.json 文件中，main 和 module 字段用于指定項(xiàng)目的入口文件，但它們有不同的用途和作用范圍，主要與模塊系統(tǒng)的選擇有關(guān)。

1. main 字段

main 字段指定了 Node.js 項(xiàng)目入口文件的路徑。它告訴 Node.js 在使用 require() 函數(shù)引入模塊時(shí)應(yīng)該加載哪個(gè)文件。如果沒有指定 main 字段，Node.js 默認(rèn)會(huì)尋找項(xiàng)目根目錄下的 index.js 文件。

示例

{"main": "index.js"
}

在上面的例子中，如果你的項(xiàng)目被其他項(xiàng)目引入，Node.js 會(huì)從 index.js 文件開始加載。

2. module 字段

module 字段用于指定 ECMAScript 模塊（ESM）的入口文件路徑。它主要面向現(xiàn)代 JavaScript 環(huán)境，如使用 import 語句的前端項(xiàng)目或支持 ESM 的 Node.js 項(xiàng)目。這個(gè)字段提供了一個(gè)入口點(diǎn)，允許 JavaScript 運(yùn)行時(shí)和打包工具（如 webpack、rollup）以 ESM 格式加載模塊。

示例

{"module": "index.mjs"
}

在這個(gè)例子中，當(dāng)你的項(xiàng)目被打包工具或支持 ESM 的環(huán)境引入時(shí)，它會(huì)從 index.mjs 文件開始加載。

3. 綜合示例

一個(gè)完整的 package.json 文件可能同時(shí)包含 main 和 module 字段，以便兼容 CommonJS 和 ESM 模塊系統(tǒng)。

{"name": "example-project","version": "1.0.0","description": "一個(gè)展示 package.json 文件的示例項(xiàng)目","main": "index.js","module": "index.mjs","scripts": {"start": "node index.js","test": "echo \"Error: no test specified\" && exit 1"},"dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}

通過同時(shí)定義 main 和 module 字段，可以確保你的包在不同的模塊系統(tǒng)中都能被正確加載和使用。這對(duì)于兼容性和靈活性非常重要，尤其是在需要支持多種環(huán)境的庫或工具中。

3.2 types

types 字段（或 typings）用于指定 TypeScript 類型定義文件的路徑。它通常用于那些用 JavaScript 編寫的包，并且希望提供 TypeScript 類型支持。這個(gè)字段指向一個(gè)包含 TypeScript 聲明的文件，通常是 .d.ts 文件。

1. 示例

假設(shè)你有一個(gè)項(xiàng)目，其中包含一個(gè) TypeScript 類型定義文件 index.d.ts，你的 package.json 文件可以這樣配置：

{"name": "example-project","version": "1.0.0","description": "一個(gè)展示 package.json 文件的示例項(xiàng)目","main": "index.js","module": "index.mjs","types": "index.d.ts","scripts": {"start": "node index.js","test": "echo \"Error: no test specified\" && exit 1"},"dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}

2. TypeScript 類型定義文件的作用

1. 提供類型支持: 當(dāng)使用你的庫時(shí)，TypeScript 編譯器可以引用這個(gè)類型定義文件，提供類型檢查和代碼補(bǔ)全。
2. 提高開發(fā)體驗(yàn): 使用 TypeScript 類型定義文件可以使你的庫在 TypeScript 項(xiàng)目中更容易使用，因?yàn)殚_發(fā)者可以獲得更好的代碼提示和類型檢查。

3. 類型定義文件示例

假設(shè)你的項(xiàng)目的主要功能在 index.js 文件中實(shí)現(xiàn)，你可以創(chuàng)建一個(gè) index.d.ts 文件來描述這些功能的類型：

index.js

function greet(name) {return `Hello, ${name}!`;
}
module.exports = {greet
};

index.d.ts

export function greet(name: string): string;

4. 發(fā)布帶有類型定義的包

當(dāng)你發(fā)布帶有類型定義文件的包時(shí)，TypeScript 項(xiàng)目可以直接使用你的類型定義文件，無需額外配置。這使得你的包對(duì)使用 TypeScript 的開發(fā)者更加友好。

3.3 styles

styles 字段（雖然不屬于官方的 package.json 規(guī)范）有時(shí)會(huì)出現(xiàn)在某些前端項(xiàng)目中，用于指定項(xiàng)目的主要樣式表文件路徑。這個(gè)字段主要用于與構(gòu)建工具和打包工具（如 webpack）集成，方便這些工具找到并處理樣式文件。

1. 示例

假設(shè)你有一個(gè)項(xiàng)目，其中包含一個(gè)主要的 CSS 文件 dist/index.css，你的 package.json 文件可以這樣配置：

{"name": "example-project","version": "1.0.0","description": "一個(gè)展示 package.json 文件的示例項(xiàng)目","main": "index.js","module": "index.mjs","types": "index.d.ts","styles": "dist/index.css","scripts": {"start": "node index.js","test": "echo \"Error: no test specified\" && exit 1"},"dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}

2. 用途

1. 構(gòu)建工具集成: 某些構(gòu)建工具（如 webpack、rollup）或插件可能會(huì)讀取 styles 字段，以便自動(dòng)加載和處理樣式文件。
2. 模塊化 CSS: 當(dāng)你的包被其他項(xiàng)目引用時(shí)，styles 字段可以幫助開發(fā)者快速找到并加載樣式文件。

這在一些組件庫提供按需加載能力時(shí)常見。

3.4 peerDependencies

在 package.json 文件中，dependencies、devDependencies 和 peerDependencies 是用于管理和聲明項(xiàng)目所需依賴的三種不同方式。它們的主要區(qū)別在于依賴的用途和安裝時(shí)機(jī)。

1. dependencies

dependencies 字段列出了項(xiàng)目在生產(chǎn)環(huán)境中運(yùn)行所需的包。換句話說，這些依賴是項(xiàng)目在正常運(yùn)行時(shí)必需的。安裝項(xiàng)目時(shí)，npm install 會(huì)自動(dòng)安裝這些依賴。

示例

{"dependencies": {"express": "^4.17.1","lodash": "^4.17.21"}
}

2. devDependencies

devDependencies 字段列出了項(xiàng)目在開發(fā)階段所需的包。這些依賴在項(xiàng)目構(gòu)建、測(cè)試或開發(fā)時(shí)使用，但在生產(chǎn)環(huán)境中不需要。安裝項(xiàng)目時(shí)，如果使用 npm install --production 或 NODE_ENV=production npm install，則不會(huì)安裝這些依賴。

示例

{"devDependencies": {"eslint": "^7.32.0","jest": "^27.0.6"}
}

3. peerDependencies

peerDependencies 字段用來聲明項(xiàng)目對(duì)某個(gè)包的依賴，但是該包應(yīng)由項(xiàng)目的使用者（即最終用戶）來安裝。

這在創(chuàng)建插件或庫時(shí)特別有用，確保依賴的版本與最終使用項(xiàng)目的版本兼容。例如，一個(gè) React 組件庫可能會(huì)將 react 和 react-dom 聲明為 peerDependencies，以確保使用該庫的項(xiàng)目使用的是正確版本的 react。

示例

{"peerDependencies": {"react": "^17.0.0","react-dom": "^17.0.0"}
}

進(jìn)一步理解

peerDependencies 字段的主要作用是聲明項(xiàng)目對(duì)某些依賴包的兼容性要求，但并不直接安裝這些依賴包。它通常用于插件或庫，以確保這些插件或庫與宿主應(yīng)用的依賴版本一致。

理解 peerDependencies 可以通過以下幾個(gè)方面來更清晰：

1. 聲明依賴的兼容性：

當(dāng)你的庫或插件需要與某個(gè)主項(xiàng)目共享依賴時(shí)，peerDependencies 可以聲明這些共享依賴的版本范圍。例如，一個(gè) React 組件庫可能需要使用者項(xiàng)目中的 react 和 react-dom，但不希望自己安裝這些依賴，因?yàn)樗鼈儜?yīng)該由使用者項(xiàng)目來管理和安裝。

2. 避免版本沖突：

通過使用 peerDependencies，可以避免安裝多個(gè)版本的同一個(gè)包，從而減少版本沖突的風(fēng)險(xiǎn)。如果每個(gè)庫都各自安裝自己的 react 版本，可能會(huì)導(dǎo)致不同版本的 react 互相沖突，從而引發(fā)錯(cuò)誤。

假設(shè)你在開發(fā)一個(gè) React 組件庫：

package.json

{"name": "my-react-library","version": "1.0.0","peerDependencies": {"react": "^17.0.0","react-dom": "^17.0.0"}
}

使用者項(xiàng)目中安裝你的庫時(shí)，npm 會(huì)發(fā)出警告，提示需要安裝特定版本的 react 和 react-dom：

npm install my-react-library

如果用戶項(xiàng)目中沒有安裝 react 或 react-dom，或安裝的版本與 peerDependencies 中指定的不兼容，npm 會(huì)顯示警告信息。

例如，如果用戶的項(xiàng)目中安裝了 React 16 而不是 React 17，運(yùn)行 npm install 時(shí)可能會(huì)看到這樣的警告：

npm WARN my-react-library@1.0.0 requires a peer of react@^17.0.0 but none is installed. You must install peer dependencies yourself.

用戶需要確保其項(xiàng)目中的依賴版本與 peerDependencies 中聲明的版本兼容。通常這意味著用戶需要更新其項(xiàng)目中的相關(guān)依賴版本：

npm install react@^17.0.0 react-dom@^17.0.0

3.5 exports

exports 字段是在 Node.js 12 及其以上版本中引入的，用于指定模塊的導(dǎo)出路徑和條件導(dǎo)出。

它提供了一種更精細(xì)的方式來定義項(xiàng)目中的入口點(diǎn)和模塊分發(fā)，支持不同的模塊系統(tǒng)（如 CommonJS 和 ES Module）以及不同的運(yùn)行環(huán)境（如瀏覽器和 Node.js）。

為什么使用 exports

• 更安全的模塊導(dǎo)出：通過限制模塊的導(dǎo)出路徑，防止用戶直接訪問內(nèi)部文件結(jié)構(gòu)。
• 條件導(dǎo)出：根據(jù)運(yùn)行環(huán)境或模塊系統(tǒng)提供不同的導(dǎo)出文件。
• 簡化入口點(diǎn)管理：統(tǒng)一管理多入口點(diǎn)。

exports 字段示例

假設(shè)你的項(xiàng)目結(jié)構(gòu)如下：

my-package/
├── package.json
├── index.js
├── index.mjs
└── lib/├── feature.cjs├── feature.mjs└── feature.js

你可以在 package.json 中使用 exports 字段來定義不同環(huán)境下的導(dǎo)出：

{"name": "my-package","version": "1.0.0","main": "index.js","module": "index.mjs","exports": {".": {"require": "./index.js","import": "./index.mjs"},"./feature": {"require": "./lib/feature.cjs","import": "./lib/feature.mjs","default": "./lib/feature.js"}}
}

解釋

• ".": 代表包的根路徑，定義包的主要入口點(diǎn)。

  • "require": 指定 CommonJS 模塊系統(tǒng)下的入口點(diǎn)。
  • "import": 指定 ES Module 模塊系統(tǒng)下的入口點(diǎn)。

• "./feature": 定義 my-package/feature 的導(dǎo)出路徑。

  • "require": 使用 CommonJS 模塊系統(tǒng)時(shí)，導(dǎo)出 ./lib/feature.cjs 文件。
  • "import": 使用 ES Module 模塊系統(tǒng)時(shí)，導(dǎo)出 ./lib/feature.mjs 文件。
  • "default": 其他情況使用 ./lib/feature.js 文件。

更多復(fù)雜示例

可以為不同的條件提供更多的導(dǎo)出路徑：

{"exports": {".": {"browser": {"import": "./index.browser.mjs","require": "./index.browser.cjs"},"node": {"import": "./index.node.mjs","require": "./index.node.cjs"},"default": "./index.js"},"./feature": {"browser": {"import": "./lib/feature.browser.mjs","require": "./lib/feature.browser.cjs"},"node": {"import": "./lib/feature.node.mjs","require": "./lib/feature.node.cjs"},"default": "./lib/feature.js"}}
}

使用場(chǎng)景

• 多模塊系統(tǒng)支持：同時(shí)支持 CommonJS 和 ES Module。
• 環(huán)境特定導(dǎo)出：為瀏覽器和 Node.js 環(huán)境提供不同的導(dǎo)出文件。
• 模塊拆分：可以根據(jù)需要將模塊拆分成多個(gè)文件，并通過 exports 字段統(tǒng)一管理。

通過合理使用 exports 字段，可以使你的 Node.js 包在現(xiàn)代 JavaScript 生態(tài)系統(tǒng)中更具適應(yīng)性和靈活性。

3.6 unpkg 和 jsdelivr

unpkg 和 jsDelivr 都是用于提供前端資源（如 JavaScript、CSS、圖像等）的 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）服務(wù)，使得開發(fā)者可以方便地在項(xiàng)目中引用這些資源而無需自行托管。

unpkg

{"unpkg": "dist/umd/package.min.js"
}

這個(gè)字段告訴 unpkg CDN，當(dāng)有人訪問該包時(shí)，應(yīng)該返回 dist/umd/package.min.js 文件。

unpkg 是一個(gè)快速、穩(wěn)定的 CDN，用于托管 npm 中的開源包。它允許你通過簡單地提供包名和版本號(hào)來直接引用 npm 包中的文件，而無需安裝這些包或手動(dòng)下載文件。通過 unpkg，你可以在瀏覽器中直接訪問 npm 包中的任何文件。

例如，如果你想在項(xiàng)目中使用 React，你可以通過以下方式引用 React 的主要文件：

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

jsDelivr

{"jsdelivr": "dist/umd/package.min.js"
}

這個(gè)字段告訴 jsDelivr CDN，當(dāng)有人訪問該包時(shí)，應(yīng)該返回 dist/umd/package.min.js 文件。

jsDelivr 是另一個(gè)流行的 CDN，提供了更多的功能和定制選項(xiàng)。它支持各種前端資源，包括 JavaScript 庫、CSS 框架、圖像、字體等。jsDelivr 的優(yōu)點(diǎn)之一是它有多個(gè)節(jié)點(diǎn)，因此可以提供更快的下載速度和更高的可用性。

與 unpkg 類似，你可以使用 jsDelivr 來直接引用各種開源資源，而無需自行下載和托管。例如，你可以通過以下方式引用 jQuery：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

共同特點(diǎn)

• 快速可靠：unpkg 和 jsDelivr 都是快速可靠的 CDN 服務(wù)，能夠提供高性能的前端資源加載。
• 免費(fèi)使用：它們都是免費(fèi)使用的，任何人都可以直接引用它們提供的資源。
• 支持版本控制：你可以通過指定版本號(hào)來確保獲取特定版本的資源，這有助于保持你的應(yīng)用程序的穩(wěn)定性和一致性。

如何選擇

• 如果你只需要簡單快速地引用 npm 包中的文件，并且不需要太多的定制選項(xiàng)，那么 unpkg 是一個(gè)不錯(cuò)的選擇。
• 如果你需要更多的功能和定制選項(xiàng)，或者希望提供更好的性能和可用性，那么可以考慮使用 jsDelivr。

無論你選擇哪個(gè) CDN，它們都可以幫助你更輕松地管理前端資源，加速網(wǎng)站加載速度，并提高開發(fā)效率。

3.7 publishConfig

publishConfig 字段是 package.json 文件中的一個(gè)配置項(xiàng)，用于指定發(fā)布 npm 包時(shí)的額外設(shè)置。

通過 publishConfig 字段，你可以設(shè)置一些發(fā)布相關(guān)的配置，例如發(fā)布時(shí)的訪問權(quán)限、發(fā)布時(shí)所使用的注冊(cè)表等。

示例

以下是一個(gè)典型的 publishConfig 字段的示例：

{"name": "my-package","version": "1.0.0","description": "A sample package","main": "index.js","publishConfig": {"access": "public","registry": "https://registry.npmjs.org/"}
}

在這個(gè)示例中，publishConfig 字段指定了兩個(gè)選項(xiàng)：

• access: 指定了發(fā)布時(shí)的訪問權(quán)限。在這個(gè)例子中，設(shè)置為 "public" 表示發(fā)布后的包是公共的，所有人都可以訪問。
• registry: 指定了發(fā)布時(shí)所使用的 npm 注冊(cè)表的 URL。在這個(gè)例子中，設(shè)置為 "https://registry.npmjs.org/" 表示發(fā)布到 npm 公共注冊(cè)表。

使用場(chǎng)景

• 發(fā)布權(quán)限管理: 如果你想發(fā)布一個(gè)私有的 npm 包，你可以將 access 設(shè)置為 "restricted"，只允許有權(quán)限的用戶訪問。
• 自定義注冊(cè)表: 如果你使用了自定義的 npm 注冊(cè)表，你可以通過 registry 字段來指定發(fā)布時(shí)所使用的注冊(cè)表的 URL。

注意事項(xiàng)

• publishConfig 字段通常用于在發(fā)布 npm 包時(shí)自定義配置，但它并不是必需的。如果你沒有特殊的需求，可以不用設(shè)置它。
• 如果你使用的是默認(rèn)的 npm 公共注冊(cè)表，并且不需要設(shè)置其他發(fā)布參數(shù)，那么通常不需要額外配置 publishConfig。

理解 publishConfig 字段的用途和配置選項(xiàng)，可以幫助你更好地管理和發(fā)布 npm 包。

3.8 sideEffects

sideEffects 是一個(gè)用于告知 webpack 和其他模塊打包工具模塊是否有副作用（side effects）的字段，出現(xiàn)在模塊的 package.json 文件中。副作用是指模塊執(zhí)行時(shí)，不僅僅是導(dǎo)出一個(gè)值，而是會(huì)執(zhí)行一些額外的操作，例如修改全局變量、執(zhí)行某些代碼等。

為什么需要 sideEffects

對(duì)于純粹的 JavaScript 模塊，大部分情況下，模塊導(dǎo)入后只是為了獲取導(dǎo)出的值，而不會(huì)對(duì)環(huán)境產(chǎn)生任何副作用。然而，一些模塊可能會(huì)包含副作用，這些副作用可能會(huì)影響到整個(gè)應(yīng)用程序的行為，甚至影響到其他模塊。在模塊打包時(shí)，如果可以確定某個(gè)模塊沒有副作用，打包工具就可以進(jìn)行更多的優(yōu)化，例如刪除未使用的代碼、提取公共代碼等。而如果某個(gè)模塊包含了副作用，打包工具則需要謹(jǐn)慎處理，以避免意外行為。

有關(guān)模塊包含副作用的內(nèi)容可以閱讀 WHAT - Webpack 詳解系列（七）。

Webpack 4 中新增了一個(gè) sideEffects 特性，它允許我們通過配置標(biāo)識(shí)我們的代碼是否有副作用，從而提供更大的壓縮空間。模塊的副作用指的是：模塊執(zhí)行的時(shí)候除了導(dǎo)出成員，是否還做了其他的事情。這個(gè)特性一般只有我們?nèi)ラ_發(fā)一個(gè) npm 模塊時(shí)才會(huì)用到。以自定義 npm 項(xiàng)目為例，那此時(shí) Webpack 在打包某個(gè)模塊之前，會(huì)先檢查這個(gè)模塊所屬的 package.json 中的 sideEffects 標(biāo)識(shí)，以此來判斷這個(gè)模塊是否有副作用，如果沒有副作用的話，這些沒用到的模塊就不再被打包。

sideEffects 的取值

sideEffects 字段的取值可以是以下三種形式之一：

• false: 表示模塊沒有副作用。這意味著打包工具可以安全地進(jìn)行一些額外的優(yōu)化。
• true: 表示模塊具有副作用。在打包時(shí)，打包工具將假定該模塊具有副作用，并相應(yīng)地處理它。
• 數(shù)組: 數(shù)組中的每個(gè)元素是一個(gè)匹配模式，表示具有副作用的文件路徑。這些路徑可以是文件名、文件夾名，也可以是通配符表達(dá)式。

示例

以下是一個(gè) sideEffects 字段的示例：

{"name": "my-package","version": "1.0.0","description": "A sample package","main": "index.js","sideEffects": ["*.css", "*.scss", "*.less"]
}

在這個(gè)示例中，sideEffects 字段告知打包工具，在打包時(shí)應(yīng)該考慮所有的 .css、.scss 和 .less 文件，因?yàn)樗鼈兛赡馨恍邮轿募母弊饔谩?/p>

使用場(chǎng)景

• 優(yōu)化打包: 通過準(zhǔn)確地聲明模塊是否具有副作用，打包工具可以更好地進(jìn)行代碼優(yōu)化，提高打包性能。
• 避免意外行為: 對(duì)于具有副作用的模塊，打包工具可以采取適當(dāng)?shù)拇胧?#xff0c;以避免意外行為，例如不刪除未使用的代碼等。

注意事項(xiàng)

• 在很多情況下，你可以放心地將 sideEffects 設(shè)置為 false，因?yàn)榇蠖鄶?shù)模塊都不會(huì)有副作用。
• 如果你不確定模塊是否具有副作用，最好是不設(shè)置 sideEffects 字段，或者設(shè)置為 true，以確保不會(huì)因?yàn)殄e(cuò)誤的優(yōu)化而導(dǎo)致意外行為。

通過正確地設(shè)置 sideEffects 字段，可以幫助你更好地管理和優(yōu)化你的模塊打包過程。

3.9 browserslist

browserslist 是一個(gè)用于指定項(xiàng)目目標(biāo)瀏覽器的字段，出現(xiàn)在項(xiàng)目根目錄下的 package.json 文件中。它告知前端工具（例如 Autoprefixer、Babel、PostCSS 等）需要支持哪些瀏覽器版本，以便自動(dòng)添加適當(dāng)?shù)?CSS 前綴或?qū)?JavaScript 代碼轉(zhuǎn)換成兼容性更好的形式。

為什么需要 browserslist

Web 開發(fā)中，不同的瀏覽器對(duì)于一些 CSS 屬性和 JavaScript 特性的支持程度有所差異。為了確保項(xiàng)目在不同瀏覽器中的兼容性，開發(fā)者通常需要根據(jù)項(xiàng)目需求選擇目標(biāo)瀏覽器，并進(jìn)行相應(yīng)的兼容性處理。

browserslist 的出現(xiàn)簡化了這個(gè)過程，使得開發(fā)者只需在項(xiàng)目中設(shè)置一次目標(biāo)瀏覽器列表，然后前端工具就可以根據(jù)這個(gè)列表自動(dòng)進(jìn)行相應(yīng)的處理，大大提高了開發(fā)效率。

browserslist 的使用

你可以在 package.json 文件中的 browserslist 字段中指定目標(biāo)瀏覽器的列表，也可以通過 .browserslistrc 文件或者 browserslist 配置文件來配置。

示例 browserslist 配置：

"browserslist": ["last 2 versions","> 1%","IE 11"
],

這個(gè)配置表示項(xiàng)目的目標(biāo)瀏覽器為：

• 最近兩個(gè)版本的所有瀏覽器
• 瀏覽器市場(chǎng)份額大于 1% 的瀏覽器
• Internet Explorer 11

"browserslist": ["> 1%","not ie 11","not op_mini all"
],

這個(gè)配置表示項(xiàng)目的目標(biāo)瀏覽器為：

• 瀏覽器市場(chǎng)份額大于 1% 的瀏覽器
• 不包括 Internet Explorer 11
• 不包括 Opera Mini 瀏覽器

使用場(chǎng)景

• CSS 兼容性處理: Autoprefixer 等工具可以根據(jù) browserslist 配置自動(dòng)添加 CSS 前綴，以確保樣式在目標(biāo)瀏覽器中的兼容性。
• JavaScript 轉(zhuǎn)換: Babel 等工具可以根據(jù) browserslist 配置自動(dòng)將 ES6+ 的 JavaScript 代碼轉(zhuǎn)換成向下兼容的代碼，以確保在目標(biāo)瀏覽器中的兼容性。

注意事項(xiàng)

• 選擇目標(biāo)瀏覽器: 在選擇目標(biāo)瀏覽器時(shí)，應(yīng)考慮項(xiàng)目的實(shí)際需求和用戶群體使用的瀏覽器情況，避免過度或不必要的兼容性處理。
• 定期更新配置: 隨著瀏覽器的更新和市場(chǎng)份額的變化，建議定期更新 browserslist 配置，以確保項(xiàng)目始終針對(duì)最新的瀏覽器進(jìn)行優(yōu)化。

通過合理配置 browserslist，可以幫助開發(fā)者更輕松地管理項(xiàng)目的瀏覽器兼容性，提高開發(fā)效率。