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

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

反饋

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

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

一、npm 是誰？npx 又是誰？（大白話版）

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

一句話記憶

想長期用 → 用 npm
想臨時跑 → 用 npx

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

① 安裝 vs 不安裝

npm install create-react-app   # 把包搬進家（node_modules）
npx create-react-app my-app    # 只在門口租 1 分鐘

② 執(zhí)行方式

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

③ 項目目錄對比

npm 安裝后
└── 項目
    └── node_modules（體積可能幾百 MB）


npx 運行后
└── 項目
    （無殘留，node_modules 不會變大）

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

1）用 npm 長期依賴

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


# 2. 把 lodash 這個工具庫“搬進家”
npm install lodash


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

2）用 npx 臨時腳手架

# 1. 不安裝 create-next-app，直接生成項目
npx create-next-app@latest 我的第一個Next項目 --typescript


# 2. 進入目錄并啟動
cd 我的第一個Next項目
npm run dev

3）版本測試（不污染項目）

# 同時跑兩個不同版本的 ESLint
npx eslint@7.32.0 app.js
npx eslint@8.57.0 app.js

四、什么時候選 npm？什么時候選 npx？

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

五、常見坑 & 解決方案（來自編程獅問答區(qū)）

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