cover

概念圖

npm 就是前端的「零件倉庫」。不會 npm 指令,等於不會現代前端開發——因為你連專案都跑不起來。

先講結論

日常開發用到的 npm 指令其實不多:installrunauditnpx,再加上知道什麼時候該 rm -rf node_modules 重來。這篇整理真正常用的指令,不浪費你時間列那些一輩子用不到的。

日常最常用的指令

npm init -y                # 快速建立 package.json
npm install                # 安裝所有依賴
npm i <package>            # 安裝到 dependencies
npm i <package> -D         # 安裝到 devDependencies
npm i <package> -g         # 全域安裝
npm uninstall <package>    # 移除套件

-D 是什麼意思?就是這個套件只在開發時用到(ESLint、Prettier、Vite),不需要跟著產品一起部署。你不會想在正式環境裝測試框架吧?

npm run:你每天都在用的東西

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src/",
    "test": "vitest"
  }
}
npm run dev       # 啟動開發伺服器
npm run build     # 打包
npm run lint      # 檢查 code style
npm test          # 跑測試(test 和 start 不用加 run)

小提醒:npm startnpm test 是特殊指令,不需要加 run。但其他自訂腳本一律要 npm run xxx

npx:不安裝就能用

npx create-react-app my-app    # 不用全域安裝 CRA
npx sort-package-json          # 排序 package.json
npx degit user/repo my-project # 從 GitHub 複製專案模板

npx 的好處是你不用為了跑一次的工具去全域安裝——用完即丟,不汙染環境。

套件出問題?核彈級解法

開發到一半套件爆了?十之八九用這招就能解決:

rm -rf node_modules package-lock.json
npm install

對,就是砍掉重裝。前端圈的經典名言:「你試過砍 node_modules 重裝嗎?」這不是黑色幽默,這是 SOP。

其他排錯指令:

npm cache clean --force   # 清快取
npm audit                 # 掃描漏洞
npm audit fix             # 自動修復漏洞
npm outdated              # 看哪些套件有新版

我自己的習慣是每隔一段時間跑 npm outdated,不用每個都追最新,但重大安全更新要注意。

npm vs pnpm vs yarn:該用哪個?

npmpnpmyarn
速度一般最快
磁碟空間每個專案各裝一份全域共用,省很多每個專案各裝一份
幽靈依賴無(嚴格模式)
學習成本最低(內建)低(指令幾乎一樣)

所謂「幽靈依賴」就是:你沒在 package.json 裡宣告的套件,卻因為被攤平到 node_modules 最上層而可以直接 import。哪天上游套件不用它了,你的 code 就莫名其妙壞掉。pnpm 用嚴格的 node_modules 結構解決了這個問題。

怎麼選? 新專案用 pnpm,團隊已經在用 npm 而且沒遇到問題就不用換。工具是拿來解決問題的,沒有問題就不需要換。

三個工具的指令幾乎一樣,最大的差異:

# 安裝所有依賴
npm install / yarn / pnpm install
 
# 新增套件
npm i <pkg> / yarn add <pkg> / pnpm add <pkg>
 
# 執行腳本
npm run dev / yarn dev / pnpm dev

pnpm 和 yarn 執行腳本可以省略 run,npm 不行(除了 start 和 test)。


npm 的指令其實很少,真正要學的是「出問題時怎麼排錯」。而排錯第一步永遠是:砍 node_modules 重來。


延伸閱讀