npm 和 npx 有什么區(qū)別？一文看懂 JavaScript 包管理工具

編程獅（w3cschool.cn） 2025-08-14 18:23:32 瀏覽數(shù) (702)

反饋

一文搞懂 npx 和 npm：零基礎(chǔ)也能選對(duì) JavaScript 包管理工具

如果你剛學(xué) JavaScript，看到 npm install 和 npx create-react-app 就頭大，那么這篇文章就是為你寫(xiě)的。跟著編程獅一步步來(lái)，5 分鐘就能分清什么時(shí)候用 npm，什么時(shí)候用 npx。

一、npm 是誰(shuí)？npx 又是誰(shuí)？（大白話版）

工具	中文解釋	類(lèi)比生活場(chǎng)景
npm	Node 包管理器：幫你把別人寫(xiě)好的代碼“下載”到本地，再統(tǒng)一管理	像超市購(gòu)物車(chē)：先拿（下載）再結(jié)賬（保存）
npx	Node 包執(zhí)行器：臨時(shí)“借”一個(gè)包來(lái)用，用完就還，不占地方	像點(diǎn)外賣(mài)：只在需要時(shí)下單，吃完不用洗碗

一句話記憶

想長(zhǎng)期用 → 用 npm
想臨時(shí)跑 → 用 npx

二、核心區(qū)別：3 張圖秒懂

① 安裝 vs 不安裝

npm install create-react-app   # 把包搬進(jìn)家（node_modules）
npx create-react-app my-app    # 只在門(mén)口租 1 分鐘

② 執(zhí)行方式

場(chǎng)景	npm 寫(xiě)法	npx 寫(xiě)法
本地腳本	`npm run dev`	—
全局命令	需 `npm i -g xxx`	直接 `npx xxx`
指定版本	改 package.json	`npx xxx@1.2.3`

③ 項(xiàng)目目錄對(duì)比

npm 安裝后
└── 項(xiàng)目
    └── node_modules（體積可能幾百 MB）


npx 運(yùn)行后
└── 項(xiàng)目
    （無(wú)殘留，node_modules 不會(huì)變大）

三、實(shí)戰(zhàn)：跟著編程獅敲 3 個(gè)例子

1）用 npm 長(zhǎng)期依賴

# 1. 進(jìn)入你的練習(xí)文件夾
cd D:\編程獅練習(xí)\demo1


# 2. 把 lodash 這個(gè)工具庫(kù)“搬進(jìn)家”
npm install lodash


# 3. 在 index.js 中使用
const _ = require('lodash');
console.log(_.chunk([1, 2, 3, 4], 2)); // 輸出: [[1,2],[3,4]]

2）用 npx 臨時(shí)腳手架

# 1. 不安裝 create-next-app，直接生成項(xiàng)目
npx create-next-app@latest 我的第一個(gè)Next項(xiàng)目 --typescript


# 2. 進(jìn)入目錄并啟動(dòng)
cd 我的第一個(gè)Next項(xiàng)目
npm run dev

3）版本測(cè)試（不污染項(xiàng)目）

# 同時(shí)跑兩個(gè)不同版本的 ESLint
npx eslint@7.32.0 app.js
npx eslint@8.57.0 app.js

四、什么時(shí)候選 npm？什么時(shí)候選 npx？

需求	推薦	原因
項(xiàng)目核心依賴（如 Vue、React）	npm	長(zhǎng)期存在，版本鎖定
構(gòu)建工具（如 webpack）	npm	需多次復(fù)用
一次性腳手架（如 create-react-app）	npx	用完即走
體驗(yàn)最新功能而不升級(jí)	npx	不污染 node_modules
CI/CD 腳本	npx	減少鏡像體積

五、常見(jiàn)坑 & 解決方案（來(lái)自編程獅問(wèn)答區(qū)）

問(wèn)題	原因	解決
`npx command not found`	Node < 8.2	升級(jí) Node 或 `npm i -g npx`
npx 每次都重新下載	網(wǎng)絡(luò)慢	配淘寶鏡像 `npx --registry=https://registry.npmmirror.com xxx`
npm 全局包卸載不干凈	路徑混亂	用 `npm root -g` 找到目錄手動(dòng)刪