ExpressJS+TypeScript配置Browsersync自动刷新浏览器问题

当前Express服务器和Browsersync UI可正常运行，但修改TS文件后，终端显示Nodemon和Browsersync已刷新，浏览器却无响应。

现有配置与代码 #

dev脚本（package.json） #

"dev": "nodemon - exec 'ts-node' ./src/entry.ts",

应用代码（entry.ts） #

import express from 'express';
import browserSync from 'browser-sync'

const app = express();
const port = 3000;
const bs = browserSync.create();


app.get('/', (req, res) => {
    res.send('');
});

bs.init({
    server: "./",
    middleware: [app]
});

app.listen(port, () => {
    return console.log(`Express server is listening at http://localhost:${port} 🚀`);
});

nodemon.json #

{
  "watch": [ "src" ],
  "ext": "ts",
  "exec": "ts-node ./src/app.ts"
}

完整package.json #

{
  "name": "123",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "dev": "nodemon - exec 'ts-node' ./src/entry.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "-": "^0.0.1",
    "browser-sync": "^3.0.2",
    "express": "^4.19.2",
    "save": "^2.9.0",
    "save-dev": "^0.0.1-security",
    "typescript": "^5.5.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "globals": "^15.8.0"
  }
}

修复步骤 #

1. 修正依赖问题 #

安装缺失的开发依赖，并清理无效依赖：

npm install --save-dev nodemon ts-node @types/browser-sync

删除package.json中无效的"-": "^0.0.1"和"save-dev": "^0.0.1-security"依赖项。

2. 统一Nodemon执行文件 #

确保nodemon.json与dev脚本指定的入口文件一致，修改nodemon.json：

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/entry.ts"
}

3. 修复dev脚本命令错误 #

修正nodemon命令的参数格式，去掉多余引号：

"dev": "nodemon --exec ts-node ./src/entry.ts"

4. 调整Express与Browsersync启动逻辑 #

不要同时调用app.listen()，让Browsersync代理Express服务，确保两者联动：

import express from 'express';
import browserSync from 'browser-sync'

const app = express();
const bs = browserSync.create();

app.get('/', (req, res) => {
    res.send('<h1>测试内容</h1>'); // 添加可见内容方便验证刷新
});

// 让Browsersync代理Express，并监听TS文件变更
bs.init({
    proxy: 'http://localhost:3000',
    port: 3001,
    files: ['src/**/*.ts']
}, () => {
    app.listen(3000, () => {
        console.log(`Express server is listening at http://localhost:3000 🚀`);
    });
});

5. 验证效果 #

运行npm run dev，访问http://localhost:3001，修改src目录下的TS文件，浏览器会自动刷新并显示最新内容。

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