npm scripts详解

npm scripts详解

npm scripts 是 Node.js 项目开发中用于定义和执行脚本命令的核心功能,通过 package.json 文件的 scripts 字段配置。以下是深度解析和使用指南:

一、基础语法

  1. 基本结构
json 复制代码
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
  • :脚本名称(如 dev
  • :实际执行的命令(如 vite
  1. 运行脚本
bash 复制代码
npm run <script-name>
# 例如:
npm run dev
  1. 特殊脚本名称
脚本名 直接执行方式 用途
start npm start 应用启动入口
test npm test 运行测试
prepublish 自动执行 发布前预处理

二、进阶特性

  1. 钩子脚本(生命周期脚本)
json 复制代码
{
  "scripts": {
    "prebuild": "rimraf dist",  // 在build前自动执行
    "build": "vite build",
    "postbuild": "echo 'Build completed'"  // 在build后自动执行
  }
}

常见钩子前缀:pre(之前)、post(之后)

  1. 环境变量传递
bash 复制代码
npm run dev -- --port 3000

等价于:

bash 复制代码
vite --port 3000
  1. 跨平台兼容

使用工具包避免平台差异:

json 复制代码
{
  "scripts": {
    "clean": "rimraf dist/*",  // 跨平台删除目录
    "copy": "cpx \"src/**/*.json\" dist"  // 跨平台复制
  }
}

推荐工具包:

  • rimraf:跨平台 rm -rf
  • cpx:跨平台文件复制
  • cross-env:跨平台环境变量设置
  1. 并行/串行执行
json 复制代码
{
  "scripts": {
    "parallel": "npm run task1 & npm run task2",  // 并行(Linux)
    "series": "npm run task1 && npm run task2",   // 串行
    "cross": "concurrently \"npm run task1\" \"npm run task2\""  // 跨平台并行
  }
}

推荐工具:concurrently

三、典型应用场景

  1. 开发环境启动
json 复制代码
{
  "scripts": {
    "dev": "vite --open",
    "dev:debug": "cross-env NODE_OPTIONS='--inspect' vite"
  }
}
  1. 构建流程
json 复制代码
{
  "scripts": {
    "build": "run-s clean lint build:*",
    "build:js": "rollup -c",
    "build:css": "sass src/:dist/",
    "clean": "rimraf dist",
    "lint": "eslint src"
  }
}

使用工具:npm-run-allrun-s 串行,run-p 并行)

  1. 测试套件
json 复制代码
{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll",
    "test:cov": "jest --coverage",
    "test:e2e": "cypress run"
  }
}
  1. 项目发布
json 复制代码
{
  "scripts": {
    "prepublishOnly": "npm run build && npm test",
    "release": "standard-version",
    "postpublish": "git push --follow-tags"
  }
}

四、高级技巧

  1. 参数传递
json 复制代码
{
  "scripts": {
    "serve": "node server.js",
    "start": "npm run serve -- --port 8080"
  }
}
  1. 环境变量控制
json 复制代码
{
  "scripts": {
    "build": "cross-env NODE_ENV=production vite build"
  }
}
  1. 快捷命令
json 复制代码
{
  "scripts": {
    "d": "npm run dev",
    "b": "npm run build"
  }
}
  1. 组合复杂命令
json 复制代码
{
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}

五、调试与优化

  1. 查看实际命令
bash 复制代码
npm run <script> --dry-run
  1. 性能分析
bash 复制代码
npm run build --timing
  1. 错误调试
bash 复制代码
npm run build --verbose
  1. 缓存清理
bash 复制代码
npm cache clean --force

六、最佳实践

  1. 语义化命名 :如 build:prodtest:unit

  2. 文档化脚本:在 README 中说明关键脚本

  3. 避免长命令:复杂逻辑应拆分为独立脚本或工具脚本

  4. 跨平台兼容 :始终使用 rimraf/cross-env 等工具

  5. 安全防护 :敏感操作添加确认提示:

    json 复制代码
    {
      "scripts": {
        "reset": "node -e \"if(confirm('确定要重置吗?')) require('fs').rmSync('data', { recursive: true })\""
      }
    }

七、与现代工具集成

  1. 配合 Vite
json 复制代码
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
  1. 配合 TypeScript
json 复制代码
{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}
  1. 配合 Monorepo
json 复制代码
{
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }
}

掌握 npm scripts 能显著提升开发效率,建议根据项目需求组合基础命令,形成自动化工作流。对于复杂场景,可考虑使用更专业的构建工具(如 Gulp 或 Makefile)。

相关推荐
李鸿耀5 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈25 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站