NPM Scripts 的实用技巧：远不止构建和启动

前端开发者通常从简单的 npm run build 或 npm run start 命令开始，但 NPM scripts 能为你的工作流程做更多事情。你可以利用 NPM scripts 来自动化重复性任务、简化开发流程，让你的项目更易于维护。

什么是 NPM Scripts，为什么要使用它们？

NPM scripts 是在你的 package.json 文件中 "scripts" 部分定义的自定义命令。它们提供了一种简单的方式来运行命令行工具和自动化任务，无需安装全局包或复杂的构建工具。

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

相比 Gulp 或 Grunt 等任务运行器，NPM scripts 的主要优势：

• 零配置：在任何 npm 项目中都可以直接使用
• 直接访问 CLI 工具：无需担心抽象层或插件
• 依赖追踪：工具作为项目依赖安装，确保每个人使用相同版本
• 简化工作流程：无需学习另一个工具的语法

前端开发者的 10 个实用 NPM Scripts

1. 代码检查和格式化

一致的代码风格提高可读性并减少错误。添加这些脚本来自动检查和格式化代码：

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

运行 npm run lint 检查问题，或运行 npm run format 自动格式化代码。

2. 清理构建目录

在创建新构建之前，清理之前的构建产物：

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

prebuild 脚本会在 build 之前自动运行，确保每次都有一个干净的开始。

3. 使用不同配置运行测试

为不同场景创建各种测试脚本：

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. 管理环境变量

为开发、测试和生产环境设置不同的配置：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

cross-env 包确保这些脚本在不同操作系统上都能正常工作。

5. 监听文件变化

文件变化时自动重新构建：

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

npm-run-all 包允许并行运行多个脚本。

6. 同步环境文件

创建脚本来复制环境模板文件：

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

postinstall 钩子在 npm install 后自动运行，确保新团队成员获得环境文件。

7. 验证包依赖

检查过时、重复或有漏洞的依赖：

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. 生成文档

从代码注释自动生成文档：

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. 自定义发布工作流程

自动化版本管理和发布：

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. 优化资源

压缩图片和其他资源：

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

高级 NPM Script 技巧

使用 Pre/Post 钩子链接脚本

NPM 会自动运行以 “pre” 或 “post” 为前缀的脚本，分别在主脚本之前或之后执行：

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

当你运行 npm run build 时，它会自动执行 prebuild，然后 build，最后 postbuild。

向脚本传递参数

使用 -- 向脚本传递参数：

npm run lint -- --fix

这会将 --fix 标志传递给实际的代码检查命令。

在脚本中使用环境变量

通过环境变量访问 package.json 数据：

"scripts": {
  "echo-version": "echo $npm_package_version"
}

当你运行 npm run echo-version 时，它会打印你的包版本。

跨平台兼容性

使用这些工具确保你的脚本在所有操作系统上都能工作：

1. rimraf - rm -rf 的跨平台替代方案
2. cross-env - 跨平台设置环境变量
3. npm-run-all - 按顺序或并行运行多个脚本

跨平台脚本示例：

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

实际案例：完整的前端工作流程

以下是现代前端项目的一套完整脚本：

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

这个设置提供了：

• 通过代码检查和测试进行代码质量检查
• 自动格式化
• 生产环境优化构建
• 带热重载的开发服务器
• 版本管理和发布工作流程

总结

通过实施这些实用的 NPM scripts，你将简化开发流程、提高代码质量，让项目更易于维护。从添加你最常执行任务的脚本开始，然后逐步扩展你的自动化工具包。

常见问题