理解npm的工作原理：優化你的項目依賴管理流程

什么是npm

npm核心功能

npm 常用指令及其作用

執行npm i 發生了什么?

1. 解析命令與參數

2. 檢查依賴文件

3. 依賴版本解析與樹構建

4. 緩存檢查與包下載

5. 解壓包到?node_modules

6. 更新?package-lock.json

7. 處理特殊依賴類型

8. 執行生命周期腳本

9. 生成?node_modules/.bin?目錄

10.示例流程

執行npm start 發生了什么?

1. 解析命令與?package.json?查找

2. 執行生命周期鉤子

3. 環境變量與路徑設置

4. 執行用戶定義的腳本

5. 依賴工具鏈的啟動（以 Create React App 為例）

6. 進程管理與信號處理

7. 常見場景與問題

場景 1：啟動一個 Express 服務器

場景 2：啟動前端開發服務器（如 Vue CLI）

常見問題：

8.總結

coress-env

為什么需要 cross-env？

coress-env核心功能

coress-env安裝

coress-env基本用法

coress-env總結

npm、pnpm、yarm、bun、npx的差異

1. 核心定位與關聯性

2. 核心差異對比

3. 命令對比

4. 使用場景示例

npm

pnpm

Yarn

Bun

npx

?5.總結

常用命令行接口

1.基礎操作

2.網絡與端口

3.文件與目錄

4.環境與模式

5.調試與日志

6.依賴管理

7.其他高頻參數

8.總結

script文件解讀

1. 基礎開發命令

2. 測試與代碼質量

3. 鉤子腳本（Hooks）

4. 高級場景

5. 實用工具

6.完整的?package.json?示例

什么是npm

npm（Node Package Manager）?是 JavaScript 的包管理工具，也是 Node.js 的默認包管理器。它用于安裝、共享和管理項目依賴，擁有全球最大的開源庫生態系統之一（npm 官網）

npm核心功能

依賴管理

通過?package.json?文件記錄項目依賴的包及其版本。
自動處理依賴樹，解決版本沖突。

安裝包

本地安裝（項目依賴）：
```
npm install <package-name>
```
本地安裝（項目依賴）：
```
npm install -g <package-name>
```

發布與共享

開發者可以發布自己的包到 npm 倉庫，供他人使用

"scripts": {"start": "node app.js"
}

npm 常用指令及其作用

指令	作用	示例
`npm init`	初始化項目，生成?`package.json`?文件	`npm init -y`（快速生成，跳過提問）
`npm install`?或?`npm i`	安裝?`package.json`?中所有依賴	`npm install`
`npm install <package>`	安裝指定包（默認添加到?`dependencies`）	`npm install express`
`npm install <package> --save-dev`?或?`npm i <package> -D`	安裝包并添加到?`devDependencies`（開發依賴）	`npm install eslint --save-dev`
`npm install -g <package>`	全局安裝包（通常用于命令行工具）	`npm install -g nodemon`
`npm uninstall <package>`	卸載指定包	`npm uninstall lodash`
`npm update`	更新所有依賴到最新版本（遵循?`package.json`?的版本規則）	`npm update`
`npm update <package>`	更新指定包	`npm update express`
`npm outdated`	檢查過時的依賴包	`npm outdated`
`npm list`?或?`npm ls`	列出已安裝的依賴樹	`npm list --depth=0`（僅顯示頂層依賴）
`npm run <script>`	運行?`package.json`?中定義的腳本	`npm run start`
`npm start`	快捷命令，等同于?`npm run start`	`npm start`
`npm test`	快捷命令，等同于?`npm run test`	`npm test`
`npm publish`	發布包到 npm 倉庫（需登錄）	`npm publish`
`npm login`	登錄 npm 賬號	`npm login`
`npm logout`	退出當前 npm 賬號	`npm logout`
`npm search <keyword>`	搜索 npm 倉庫中的包	`npm search react`
`npm view <package>`	查看包的詳細信息（版本、依賴等）	`npm view lodash`
`npm audit`	檢查依賴中的安全漏洞	`npm audit`
`npm audit fix`	自動修復可修復的安全漏洞	`npm audit fix`
`npm cache clean --force`	清空 npm 緩存（解決安裝問題）	`npm cache clean --force`
`npm config set <key> <value>`	修改 npm 配置（如鏡像源）	`npm config set registry https://registry.npmmirror.com`
`npm config get <key>`	獲取 npm 配置值	`npm config get registry`
`npm version <semver>`	更新項目版本號（遵循語義化版本）	`npm version patch`（更新補丁版本）

關鍵說明

--save-dev?vs 默認安裝
- 開發工具（如?webpack、eslint）用?--save-dev，生產代碼依賴（如?react）直接安裝。
全局安裝 (-g)
- 適用于全局命令行工具（如?create-react-app），但需謹慎使用以避免權限問題。
版本管理
- package-lock.json?會鎖定依賴版本，確保團隊環境一致，建議提交到版本控制。

執行npm i 發生了什么?

當運行?npm install（或?npm i）時，整個過程可以分解為以下步驟，涵蓋依賴解析、緩存處理、文件操作及生命周期腳本執行：

1. 解析命令與參數

命令類型：根據參數判斷是全局安裝（-g）還是本地安裝（默認）。本地安裝會將依賴寫入?package.json?的?dependencies?或?devDependencies。
目標包：若指定了包名（如?npm install lodash），npm 會明確安裝該包；否則安裝?package.json?中聲明的所有依賴。

2. 檢查依賴文件

package.json：讀取項目根目錄的?package.json，獲取?dependencies、devDependencies、peerDependencies?等信息。
package-lock.json?或?npm-shrinkwrap.json：
- 若存在，npm 會優先按 lock 文件中的精確版本安裝，確保依賴樹一致。
- 若不存在，npm 會根據?package.json?中的語義化版本（如?^1.0.0）下載最新兼容版本，并生成新的?package-lock.json。

3. 依賴版本解析與樹構建

版本確定：
- 有 lock 文件：直接使用其中指定的版本。
- 無 lock 文件：根據?package.json?的版本范圍（SemVer）從 registry 獲取最新滿足條件的版本。
依賴樹構建：
- npm 會遞歸分析每個包的依賴，構建完整的依賴樹。
- 扁平化處理（Dedupe）：npm v3+ 采用扁平化結構（hoisting），將可共用的依賴提升到較高層級，減少冗余。若同一包的不同版本無法提升，會嵌套安裝在具體包的?node_modules?下。
- 沖突處理：當多個包依賴同一包的不同版本時，npm 會盡量選擇兼容版本；若無法解決，則各自安裝所需版本。

4. 緩存檢查與包下載

緩存目錄：npm 會檢查本地緩存（默認位于?~/.npm），通過?integrity?字段（哈希值）驗證包完整性。
- 緩存命中：直接使用緩存中的包文件，無需下載。
- 緩存未命中：從配置的 registry（默認?https://registry.npmjs.org/）下載壓縮包（.tgz）。
網絡請求：
- 下載包元數據（metadata）和壓縮包。
- 支持重試機制和離線模式（--offline）。

5. 解壓包到?`node_modules`

文件解壓：將下載或緩存的包解壓到項目?node_modules?目錄。
- 扁平化結構：主依賴放在頂層?node_modules，子依賴盡可能提升以減少嵌套。
- 符號鏈接（Symlink）：對全局安裝的包或?npm link?創建的包，生成符號鏈接。

6. 更新?`package-lock.json`

鎖定依賴樹：寫入所有依賴及其子依賴的精確版本、下載地址、哈希值，確保后續安裝的一致性。
格式同步：若?package.json?變更（如手動修改版本范圍），npm 會調整?package-lock.json?以保持兼容。

7. 處理特殊依賴類型

optionalDependencies：可選依賴安裝失敗不會中斷流程，僅警告。
peerDependencies：
- npm v7+：自動安裝 peer 依賴（若未顯式聲明可能引發警告）。
- 舊版本：僅檢查是否存在，需手動安裝。
bundledDependencies：直接包含本地文件，不通過 registry 下載。

8. 執行生命周期腳本

按順序執行包定義的生命周期鉤子：

preinstall：安裝前觸發。
install：包安裝后運行。
postinstall：通常用于編譯原生模塊（如?node-gyp?構建）。
其他鉤子：如?prepublish（已棄用，改用?prepare）。

9. 生成?`node_modules/.bin`?目錄

創建可執行文件的快捷方式，使 CLI 工具（如?webpack、eslint）可直接通過?npx?或?npm scripts?調用。

10.示例流程

假設運行?npm install lodash：

解析命令，確認安裝?lodash?到?dependencies。
檢查?package-lock.json，若無則向 registry 查詢最新版本。
下載?lodash.tgz?并驗證哈希。
解壓到?node_modules/lodash。
更新?package.json?和?package-lock.json。
執行?lodash?的?postinstall?腳本（如果有）。

執行npm start 發生了什么?

當你在項目中執行?npm start?時，背后發生了一系列復雜的流程。以下是詳細的分解步驟：

1. 解析命令與?`package.json`?查找

命令觸發：輸入?npm start?后，npm CLI 會解析?start?命令。
查找?package.json：npm 會從當前目錄開始向上查找?package.json?文件，直到找到最近的配置文件。
讀取?scripts?字段：在?package.json?的?scripts?對象中查找?start?字段：
```
{"scripts": {"start": "node server.js"}
}
```
如果未定義?start，npm 會嘗試默認行為：運行?node server.js（若存在該文件）。
如果既沒有定義?start?也沒有?server.js，npm 會報錯?Missing script: "start"。

2. 執行生命周期鉤子

npm 會按順序觸發與?start?相關的生命周期腳本（如果存在）：

prestart：在?start?命令執行前運行。
start：執行用戶定義的腳本。
poststart：在?start?命令執行后運行。

例如：

{"scripts": {"prestart": "echo '準備啟動...'","start": "node app.js","poststart": "echo '已啟動！'"}
}

執行順序為：prestart?→?start?→?poststart。

3. 環境變量與路徑設置

npm 在執行腳本時，會為子進程（即腳本運行的進程）設置以下環境變量：

PATH?擴展：將項目的?node_modules/.bin?目錄添加到?PATH?中，使得可以直接運行安裝的 CLI 工具（如?webpack、react-scripts）。
NODE_ENV?默認值：如果未顯式設置，NODE_ENV?默認為空（但在某些框架如 Create React App 中會強制設置為?development）。
其他 npm 變量：如?npm_package_name（包名）、npm_package_version（版本號）等，可直接在腳本中使用。

4. 執行用戶定義的腳本

假設?package.json?中定義如下：

{"scripts": {"start": "react-scripts start"}
}

實際執行流程：

路徑解析：npm 會在?node_modules/.bin?中查找?react-scripts?可執行文件。
啟動子進程：通過操作系統的 shell（如 Bash、PowerShell 或 cmd.exe）執行命令。
參數傳遞：將?start?作為參數傳遞給?react-scripts。
保持進程運行：啟動的進程（如開發服務器）會持續運行，直到手動終止（Ctrl+C）或發生錯誤。

5. 依賴工具鏈的啟動（以 Create React App 為例）

以?react-scripts start?為例，詳細流程：

檢查依賴：確保?webpack、babel、webpack-dev-server?等工具已安裝。
讀取配置：合并默認配置與項目中的?webpack.config.js（如有覆蓋）。
啟動開發服務器：
- 監聽文件變化（通過?webpack --watch）。
- 啟用熱模塊替換（HMR）。
- 打開瀏覽器（默認?http://localhost:3000）。
輸出日志：在終端顯示編譯狀態、錯誤或警告信息。

6. 進程管理與信號處理

保持進程活躍：開發服務器通常是長期運行的進程（如 Express 服務器或前端開發服務器）。
信號處理：
- 按下?Ctrl+C?會發送?SIGINT?信號，終止進程。
- 進程崩潰時可能觸發?SIGTERM。
后臺進程：如果腳本中啟動了守護進程（如?node server.js &），npm 不會自動管理其生命周期。

7. 常見場景與問題

場景 1：啟動一個 Express 服務器

直接運行 server.js，啟動 HTTP 服務并監聽端口。

{"scripts": {"start": "node server.js"}
}

場景 2：啟動前端開發服務器（如 Vue CLI）

觸發 webpack-dev-server，提供熱重載和代理配置。

{"scripts": {"start": "vue-cli-service serve"}
}

常見問題：

權限問題：若腳本需要管理員權限（如監聽 80 端口），需使用?sudo npm start。
端口沖突：如果端口被占用，進程會拋出?EADDRINUSE?錯誤。
依賴缺失：未安裝?react-scripts?或?vue-cli-service?會導致命令找不到。

8.總結

執行?npm start?的完整流程：

解析?package.json?中的?scripts.start。
觸發?prestart?鉤子（如果有）。
設置環境變量并啟動子進程。
執行用戶定義的命令（如啟動服務器或構建工具）。
觸發?poststart?鉤子（如果有）。
保持進程運行直至手動終止。

coress-env

cross-env?是一個用于跨平臺設置環境變量的 Node.js 工具。它解決了在不同操作系統（如 Windows 和 Unix 類系統）中設置環境變量語法不一致的問題，使得開發者可以在?package.json?的腳本中統一使用相同的命令。

為什么需要 cross-env？

在開發 Node.js 項目時，經常需要在命令行中設置環境變量。例如：

# Unix 系統（Linux/macOS）
NODE_ENV=production node app.js# Windows 系統
set NODE_ENV=production && node app.js

不同操作系統設置環境變量的語法不同，這會導致以下問題：

腳本不兼容：在?package.json?的?scripts?中編寫的命令無法跨平臺運行。
維護成本高：需要為不同操作系統編寫不同的腳本。

cross-env?通過提供統一的命令格式，屏蔽了操作系統差異，使腳本更具可移植性。

coress-env核心功能

跨平臺支持：在 Windows、macOS、Linux 中統一使用相同的命令。
簡化腳本：無需編寫條件判斷或特定于平臺的語法。
兼容性：支持所有 Node.js 版本和主流包管理工具（npm、Yarn、pnpm）。

coress-env安裝

通過 npm 或 Yarn 安裝為開發依賴：

npm install --save-dev cross-env
# 或
yarn add --dev cross-env

coress-env基本用法

在?package.json?的?scripts?中使用?cross-env?設置環境變量：

示例 1：設置?NODE_ENV

{"scripts": {"build": "cross-env NODE_ENV=production webpack","start": "cross-env NODE_ENV=development node server.js"}
}

示例 2：傳遞多個環境變量

{"scripts": {"test": "cross-env API_URL=http://localhost:3000 DEBUG=true mocha"}
}

示例 3：處理帶空格的值（需用引號包裹）

{"scripts": {"run:app": "cross-env GREETING=\"Hello World\" node app.js"}
}

coress-env總結

cross-env?是解決跨平臺環境變量設置問題的輕量級工具，通過統一命令語法：

消除 Windows 和 Unix 系統間的腳本差異。
簡化?package.json?的維護。
提升開發體驗和團隊協作效率。

npm、pnpm、yarm、bun、npx的差異

1. 核心定位與關聯性

工具	定位	關聯性
npm	Node.js 默認包管理器	所有工具的基礎，定義?`package.json`?規范，其他工具均兼容 npm 生態。
pnpm	高效磁盤存儲包管理器	兼容 npm 命令和?`package.json`，通過硬鏈接和符號鏈接優化依賴存儲。
Yarn	改進版包管理器	最初為解決 npm 性能問題而生，兼容 npm 生態，提供更嚴格的依賴鎖定機制。
Bun	全棧運行時與包管理器	兼容 npm 和 Yarn 命令，內置超快包管理、測試、腳本運行等功能。
npx	臨時執行包命令工具	隨 npm 5.2+ 內置，用于直接運行本地或遠程包的可執行文件。

2. 核心差異對比

特性	npm	pnpm	Yarn	Bun	npx
安裝方式	嵌套存儲依賴	全局存儲 + 硬鏈接	扁平化存儲	全局緩存 + 并行安裝	不安裝（直接執行）
依賴存儲	`node_modules`?冗余	單一全局存儲 + 符號鏈接	扁平化?`node_modules`	全局緩存 + 符號鏈接	無
安裝速度	較慢	快	快	極快（Rust 實現）	快速（僅下載臨時包）
磁盤占用	高	低（共享依賴）	中等	低	無
Lock 文件	`package-lock.json`	`pnpm-lock.yaml`	`yarn.lock`	`bun.lockb`	無
工作區支持	需要手動配置	內置	內置	內置	無
兼容性	Node.js 標準	完全兼容 npm	兼容 npm	兼容 npm/Yarn	依賴 npm
核心優勢	官方默認	節省磁盤空間	穩定可靠	極速全棧工具鏈	臨時運行命令
缺點	依賴冗余、速度慢	生態兼容性偶發問題	配置復雜度較高	新工具生態待完善	無法管理長期依賴

3. 命令對比

操作	npm	pnpm	Yarn	Bun	npx
初始化項目	`npm init`	`pnpm init`	`yarn init`	`bun init`	-
安裝依賴	`npm install`	`pnpm install`	`yarn install`	`bun install`	-
添加生產依賴	`npm add lodash`	`pnpm add lodash`	`yarn add lodash`	`bun add lodash`	-
添加開發依賴	`npm add -D eslint`	`pnpm add -D eslint`	`yarn add -D eslint`	`bun add -d eslint`	-
全局安裝	`npm install -g tsc`	`pnpm add -g tsc`	`yarn global add tsc`	`bun add -g tsc`	-
運行腳本	`npm run dev`	`pnpm run dev`	`yarn dev`	`bun run dev`	-
臨時執行命令	`npx create-react-app`	`pnpm dlx create-react-app`	`yarn dlx create-react-app`	`bunx create-react-app`	`npx create-react-app`

4. 使用場景示例

npm

場景：新項目默認使用，或需要與舊項目兼容。

示例：

npm init -y
npm install express
npm run start

pnpm

場景：需節省磁盤空間（如 Monorepo 項目），或依賴版本沖突頻繁。
示例：
```
pnpm add react@18
pnpm run build
```

Yarn

場景：需要嚴格依賴鎖定或使用 Yarn Workspaces。

示例：

yarn add lodash --immutable
yarn workspace frontend dev

Bun

場景：追求極速安裝和全棧工具鏈（如同時管理 JS/TS 和 SQLite）。
示例：
```
bun install
bun test
bun run dev
```

npx

場景：臨時運行腳手架工具或 CLI 命令。

示例：

npx create-next-app@latest
npx http-server ./dist

?5.總結

npm：基礎工具，適合大多數項目。
pnpm：適合磁盤敏感或依賴沖突多的場景。
Yarn：適合需要穩定鎖文件或復雜 Monorepo。
Bun：適合追求速度和全棧能力的新項目。
npx：適合臨時運行一次性命令。

常用命令行接口

以下是常見的命令行接口（CLI）選項列表，涵蓋開發、工具鏈和服務器場景中的高頻參數及其用途：

1.基礎操作

參數	用途	示例
`--help`?/?`-h`	顯示幫助信息（命令用法和選項說明）	`npm run build --help`
`--version`?/?`-V`	顯示工具或應用的版本號	`node --version`
`--verbose`	輸出詳細日志（調試時使用）	`webpack --verbose`
`--silent`	靜默模式（減少日志輸出）	`npm install --silent`
`--dry-run`	模擬執行，不實際執行操作（測試命令效果）	`npm publish --dry-run`

2.網絡與端口

參數	用途	示例
`--port`?/?`-p`	指定服務監聽的端口號	`next dev --port 8080`
`--host`	指定服務綁定的主機（如?`0.0.0.0`?允許外部訪問）	`vite --host 0.0.0.0`
`--open`?/?`-o`	啟動后自動打開瀏覽器	`create-react-app --open`
`--proxy`	設置代理服務器地址	`webpack-dev-server --proxy http://api.example.com`

3.文件與目錄

參數	用途	示例
`--config`?/?`-c`	指定配置文件路徑	`eslint --config .eslintrc.cjs`
`--output`?/?`-o`	指定輸出目錄或文件	`tsc --outDir dist`
`--watch`?/?`-w`	監視文件變化并自動重新執行	`nodemon --watch src`
`--force`	強制覆蓋文件或跳過安全檢查	`rm -rf --force node_modules`

4.環境與模式

參數	用途	示例
`--mode`	設置運行模式（如?`development`/`production`）	`vite build --mode production`
`--env`	注入環境變量	`webpack --env NODE_ENV=prod`
`--production`	標記為生產環境（安裝依賴時跳過?`devDependencies`）	`npm install --production`

5.調試與日志

參數	用途	示例
`--debug`	啟用調試模式（輸出額外信息）	`node --debug app.js`
`--inspect`	啟用 Node.js 調試器（配合 Chrome DevTools）	`node --inspect server.js`
`--log-level`	設置日志級別（如?`error`,?`warn`,?`info`）	`npm install --log-level warn`

6.依賴管理

參數	用途	示例
`--save`?/?`-S`	將依賴添加到?`dependencies`（默認行為）	`npm install lodash --save`
`--save-dev`?/?`-D`	將依賴添加到?`devDependencies`	`npm install eslint --save-dev`
`--global`?/?`-g`	全局安裝包（系統級可用）	`npm install http-server -g`

7.其他高頻參數

參數	用途	示例
`--yes`?/?`-y`	自動確認所有提示（非交互模式）	`npm init -y`
`--ignore-scripts`	跳過包安裝時的生命周期腳本執行	`npm install --ignore-scripts`
`--timeout`	設置超時時間（如網絡請求超時）	`curl --timeout 5000 URL`
`--no-optional`	跳過安裝?`optionalDependencies`?中的依賴	`npm install --no-optional`

8.總結

通用性：大部分工具支持?--help?和?--version，是快速查閱文檔的入口。
組合使用：參數可組合（如?npm run dev -- --port 3000 --open）。
工具差異：不同工具可能有特定參數（如?vite --strictPort?強制端口占用檢查）。
最佳實踐：具體參數以工具文檔為準，使用前建議通過?--help?驗證。

script文件解讀

1. 基礎開發命令

Key	用途	工具示例
`start`	啟動本地開發服務器（如 React、Next.js 項目）	`react-scripts start`
`dev`	開發模式（常見于 Vite、Nuxt.js 項目）	`vite`
`serve`	啟動開發服務器（Vue CLI 項目）	`vue-cli-service serve`
`build`	構建生產環境代碼（壓縮、打包、優化）	`vite build`
`preview`	本地預覽生產構建結果（Vite 特有）	`vite preview`

2. 測試與代碼質量

Key	用途	工具示例
`test`	運行單元測試	`jest`
`test:watch`	監聽文件變化自動運行測試	`jest --watch`
`lint`	靜態代碼檢查（檢查語法、風格問題）	`eslint`
`lint:fix`	自動修復可修復的代碼規范問題	`eslint --fix`
`format`	代碼格式化（統一縮進、引號等風格）	`prettier --write`
`typecheck`	TypeScript 類型檢查（不生成文件）	`tsc --noEmit`

3. 鉤子腳本（Hooks）

Key	用途	示例場景
`pre[start]`	在?`start`?命令前執行（如?`prestart`）	類型檢查、環境準備
`post[build]`	在?`build`?命令后執行（如?`postbuild`）	分析構建結果、清理臨時文件
`pre[test]`	在?`test`?命令前執行（如?`pretest`）	先運行代碼檢查

4. 高級場景

Key	用途	工具示例
`analyze`	分析構建產物體積（查看哪些模塊占用較大）	`source-map-explorer`
`storybook`	啟動組件開發環境（Storybook）	`start-storybook`
`deploy`	部署到靜態托管平臺（如 GitHub Pages、Vercel）	`gh-pages`
`docker:build`	構建 Docker 鏡像	`docker build`
`docker:run`	運行 Docker 容器	`docker run`

5. 實用工具

Key	用途	工具示例
`clean`	清理構建產物或臨時文件（如?`dist`、`node_modules`）	`rimraf`
`prepare`	在?`npm install`?后自動執行（常用于安裝 Git 鉤子）	`husky install`

6.完整的?`package.json`?示例

{"name": "my-project","version": "1.0.0","scripts": {// --- 基礎命令 ---"start": "react-scripts start",          // 啟動開發服務器"dev": "vite",                           // 開發模式（Vite）"serve": "vue-cli-service serve",        // 啟動開發服務器（Vue CLI）"build": "vite build",                   // 構建生產環境代碼"preview": "vite preview",               // 預覽生產構建結果"test": "jest --coverage",               // 運行測試（Jest）"test:watch": "jest --watch",            // 監聽文件變化運行測試"lint": "eslint . --ext .js,.ts",        // 代碼規范檢查（ESLint）"lint:fix": "eslint . --fix",            // 自動修復代碼規范問題"format": "prettier --write .",          // 代碼格式化（Prettier）"typecheck": "tsc --noEmit",             // TypeScript 類型檢查"prepare": "husky install",              // 安裝 Git 鉤子（Husky）"clean": "rimraf dist node_modules",     // 清理構建產物和依賴// --- 鉤子腳本 ---"prestart": "npm run typecheck",         // 在 `start` 前執行"postbuild": "npm run analyze",          // 在 `build` 后執行"pretest": "npm run lint",               // 在 `test` 前執行// --- 高級場景 ---"analyze": "source-map-explorer dist/*.js",    // 分析構建包體積"storybook": "start-storybook -p 6006",  // 啟動 Storybook"deploy": "gh-pages -d dist",            // 部署到 GitHub Pages"docker:build": "docker build -t my-app .",    // 構建 Docker 鏡像"docker:run": "docker run -p 8080:80 my-app"  // 運行 Docker 容器},"dependencies": {// 依賴項...},"devDependencies": {// 開發依賴項...}
}