能否用Nodemon类工具监听文件变更，先构建再启动项目？

刚好我之前也遇到过类似需求，结合Nodemon就能轻松搞定，根据你的现有package.json配置，给你几个实用的方案：

方案1：直接修改scripts快速实现 #

首先确保已经装了nodemon（没装的话先跑 npm install nodemon --save-dev），然后更新你的scripts：

"scripts": {
  "build": "npm run build:dll && webpack --progress",
  "start": "node app.js",
  "dev": "nodemon --watch src --ext js,jsx,ts,tsx,scss --exec \"npm run build && npm start\""
}

配置拆解： #

• --watch src：告诉nodemon盯着src目录下的文件（你可以换成自己项目里需要监听的目录，比如components、config都行）
• --ext js,jsx,ts,tsx,scss：指定要监听的文件扩展名，按需添加即可
• --exec \"npm run build && npm start\"：这是核心逻辑！文件一发生变化，就先执行构建命令，构建完成后再重启项目

之后直接跑 npm run dev 就能启动这个自动流程啦。

方案2：用nodemon配置文件更灵活 #

如果监听规则比较复杂（比如要同时盯多个目录、排除某些文件），可以在项目根目录创建nodemon.json配置文件：

{
  "watch": ["src", "config"],
  "ext": "js,jsx,json,scss",
  "ignore": ["node_modules", "dist"],
  "exec": "npm run build && npm start"
}

然后把scripts里的dev命令简化成：

"dev": "nodemon"

这样跑 npm run dev 就会按照配置文件的规则来执行，后期修改监听规则也不用碰package.json，结构更清晰。

方案3：进阶优化——增量构建提升速度 #

如果你的项目构建比较慢，每次全量build太耗时间，可以试试用webpack的watch模式配合nodemon，再用concurrently同时跑两个进程：

先安装依赖：npm install concurrently --save-dev

然后更新scripts：

"scripts": {
  "build": "npm run build:dll && webpack --progress",
  "start": "node app.js",
  "dev:build": "webpack --watch --progress", // webpack自动增量构建修改的文件
  "dev:start": "nodemon --watch dist app.js", // 只盯打包后的产物目录，变化就重启项目
  "dev": "npm run build:dll && concurrently \"npm run dev:build\" \"npm run dev:start\""
}

这个方案里，webpack会在文件变化时只重新打包修改的部分，nodemon只盯着打包后的产物目录，整体速度会快很多，适合大中型项目。

小提醒： #

你的build命令里包含了build:dll，这部分一般不需要每次文件变化都重新构建，所以不管用哪个方案，都可以把build:dll放在dev命令的最前面，只在首次启动时执行一次，比如方案1里可以改成：

"dev": "npm run build:dll && nodemon --watch src --ext js,jsx --exec \"webpack --progress && npm start\""

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