如何配置npm-watch？监听脚本文件变更触发npm build

别发愁，我来一步步教你配置npm-watch，实现script文件夹内JS文件变动时自动执行npm build。

1. 先安装npm-watch #

首先在项目根目录下安装这个依赖，推荐本地安装（作为开发依赖），这样项目的依赖更清晰：

npm install npm-watch --save-dev

2. 修改package.json配置 #

接下来需要在你的package.json里做两处修改：

第一处：添加watch脚本 #

找到scripts字段，新增一个watch命令，指向npm-watch工具：

"scripts": {
  "build": "你的实际build命令", // 比如babel script/ -d dist/ 或者你自己的打包命令
  "watch": "npm-watch"
}

第二处：配置监控规则 #

在package.json的根节点（和scripts、dependencies同级的位置），添加watch配置项，指定要监控的文件夹、文件类型以及对应的触发命令：

"watch": {
  "build": {
    "patterns": ["script"], // 要监控的文件夹路径
    "extensions": "js", // 要监控的文件后缀，多个的话可以写成数组比如["js", "json"]
    "quiet": false, // 是否关闭日志输出，false会显示监控和触发build的日志
    "legacyWatch": false // 是否使用旧的文件监听机制，默认false即可
  }
}

这里的"build"对应你scripts里的build命令，意思是当patterns里的文件夹有符合extensions的文件变动时，自动执行npm run build。

3. 启动监控 #

配置完成后，在终端运行以下命令就能开启监控了：

npm run watch

现在你修改script文件夹里的任意JS文件，保存后终端就会自动触发build命令，完成打包啦！

额外小提示 #

• 如果需要监控多个文件夹，可以把patterns改成数组形式，比如["script", "src/utils"]
• 要是想忽略某些文件或子文件夹，可以在watch配置里加"ignore": ["script/lib"]这样的规则

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