JS项目必备：5个关键npm脚本提升开发效率

身为JavaScript开发者，你的工作流程中想必少不了这些手动操作：代码格式化、清理构建目录、提交前手动跑测试……然而你的package.json能做的远不止npm start。把这些琐碎任务脚本化，一次配置就能长期受益。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

说实话，写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条脚本帮我省时、避坑、切换项目不掉线。今天配一次，未来的你每天都会默默说谢谢。