如何在开发模式下运行npm-watch？

方案1：新增dev监听项（最直观，无需改动原有配置） #

你只需要在package.json的watch字段下新增和build配置一致的dev监听项即可：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "dev": "vue-cli-service build --mode development",
  "lint": "vue-cli-service lint",
  "watch": "npm-watch",
  // 可选：新增快捷命令，无需每次执行时传参数
  "watch:dev": "npm-watch dev"
},
"watch": {
  "build": {
    "patterns": [
      "src"
    ],
    "extensions": "js,jsx,vue,css"
  },
  // 新增dev监听配置
  "dev": {
    "patterns": [
      "src"
    ],
    "extensions": "js,jsx,vue,css"
  }
},

配置完成后，直接执行npm run watch dev，或者执行你新增的快捷命令npm run watch:dev，就能实现监听src目录变化时自动执行development模式的构建。

方案2：共用监听配置（避免重复代码） #

如果不想写两份相同的监听配置，可以直接把watch的键改成多脚本匹配语法，让build和dev共用同一份配置：

"watch": {
  "{build,dev}": {
    "patterns": [
      "src"
    ],
    "extensions": "js,jsx,vue,css"
  }
},

修改后同样执行npm run watch dev即可生效。

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