說實話，寫 JavaScript 的你，工作流里十有八九還藏著一兩步手工體力活：手動格式化、手動清理構建目錄、提交前手動跑測試…… 可你的 package.json 遠不止會 npm start。把瑣事腳本化，一次配置，日日省心。

下面這 5 條 npm 腳本，我在所有 JS 項目里都放：從小工具到正兒八經的大前端應用，一套走天下。

1.npm run dev —— 本地開發的“續命管”

一鍵拉起本地服務，自動監聽改動，熱更新不求人。

"scripts": {
  "dev": "vite"
}

如果是 Next.js：

"scripts": {
  "dev": "next dev"
}

為什么重要：熱重載 + 即時反饋 + 本地聯調，一條命令全打包。

2.npm run lint —— 把坑堵在“上線前一天”之前

Lint 不只是“風格統一”，它還能提前抓住未使用變量、危險比較、潛在 Bug。

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
}

為什么重要：少掉大半調試時間；同事和未來的你都會感謝現在的你。

3.npm run format —— 統一風格，評論區從此安靜

別再為逗號還是縮進吵半天，用 Prettier 直接把格式之爭變成自動修復。

"scripts": {
  "format": "prettier --write ."
}

為什么重要：一次運行、全倉庫自動美化；評審討論專注邏輯與設計。

4.npm run build —— 上線之前，先“瘦身+打包+優化”

真正的部署前一步：產出可上線的產物。

Next.js：

"scripts": {
  "build": "next build"
}

Vite / Webpack 項目：

"scripts": {
  "build": "vite build"
}

為什么重要：最小化、搖樹優化、資源切分，上線前的三重加速一次到位。

5.npm run clean —— 該清就清，別讓舊產物嚇你

構建殘留、緩存堆積、狀態臟了——重來一遍更踏實。

"scripts": {
  "clean": "rm -rf dist .next"
}

跨平臺建議用 rimraf（兼容 Windows）：

"scripts": {
  "clean": "rimraf dist .next"
}

為什么重要：干凈的構建 = 更少的靈異 Bug + 更順的 CI。

一鍵編排多任務

想把多步串起來？上 npm-run-all：

npm install npm-run-all --save-dev

然后：

"scripts": {
  "prepare": "npm-run-all clean lint format build"
}

效果：一條命令串起清理 → 檢查 → 美化 → 構建，手起刀落。

貼就能用的腳本清單

復制到任意 package.json，再按你的框架小改即可：

"scripts": {
  "dev": "vite",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write .",
  "build": "vite build",
  "clean": "rimraf dist"
}

最后的話

好開發者不只會寫代碼，還擅長把重復動作腳本化。 這 5 條腳本幫我省時、避坑、切換項目不掉線。今天配一次，未來的你每天都在默默說謝謝。