如何让npm watch命令每次编译完成后自动执行postbuild脚本？

npm 的 pre/post 生命周期钩子仅会在对应脚本执行完毕、进程正常退出后触发。你使用的 ng build --watch 会常驻进程监听文件变动，进程不会退出，因此 postbuild 钩子不会自动触发。

• 第一步：安装所需开发依赖，用于监听编译产物变化、并行执行命令：

npm i chokidar-cli npm-run-all --save-dev

• 第二步：修改 package.json 中的 scripts 配置：

"scripts": {
  "build": "node ../../node_modules/@angular/cli/bin/ng build dining",
  "watch:build": "node ../../node_modules/@angular/cli/bin/ng build dining --watch",
  "watch:copy": "chokidar \"dist/dining/**/*\" -d 1000 -c \"npm run postbuild\"",
  "watch": "npm run build && run-p watch:build watch:copy",
  "postbuild": "node copy-assets.js"
}

配置说明：

• chokidar 用于监听编译输出的 dist/dining 目录变化，设置1000ms的防抖避免重复触发，每次检测到产物变更就自动执行postbuild脚本
• run-p 是npm-run-all提供的并行执行命令的工具，兼容Windows、Linux、Mac多平台
• 第三步：直接执行以下一行命令即可满足需求：

npm run watch

执行后会先完成一次全量构建+资源拷贝，之后监听文件改动，每次自动编译完成后都会自动执行资源拷贝逻辑。

内容的提问来源于stack exchange，提问作者dpant