使用TypeScript时Nodemon不自动刷新的解决方法咨询

嘿，我来帮你搞定TypeScript文件修改后页面不自动刷新的问题！这其实是因为Nodemon默认只盯着JavaScript文件，但咱们写的是TS，得先把TS编译成JS，再让Nodemon监听编译后的文件，同时还要让TS文件一修改就自动编译。咱们一步步来：

首先得把TS编译、文件监听相关的工具装上，在终端运行这个命令：

npm install --save-dev typescript ts-node nodemon concurrently

• typescript：TypeScript的核心编译工具
• ts-node：帮助我们在Node环境下处理TS文件
• nodemon：监听文件变化自动重启服务
• concurrently：让我们能同时运行多个命令（一边监听TS编译，一边重启服务）

在项目根目录创建一个tsconfig.json文件，这是TS的编译配置文件，你可以参考下面的基础配置：

{
  "compilerOptions": {
    "target": "ES6", // 编译后的JS版本
    "module": "CommonJS", // 模块规范，适配Node环境
    "outDir": "./dist", // 编译好的JS文件输出到dist文件夹
    "rootDir": "./src", // 你的TS源码放在src文件夹（根据你的实际结构调整）
    "strict": true, // 开启严格类型检查（开发阶段建议开启）
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"], // 要编译的所有TS文件
  "exclude": ["node_modules"] // 排除不需要编译的文件夹
}

记得把rootDir改成你实际存放TS源码的目录哦！

现在咱们修改package.json里的配置，让它能支持自动编译和重启：
首先把main字段改成编译后的入口文件，然后添加几个脚本命令：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js", // 指向编译后的JS入口
  "scripts": {
    "build": "tsc", // 单次编译TS到JS
    "watch:ts": "tsc --watch", // 监听TS文件变化，自动编译
    "watch:server": "nodemon ./dist/index.js", // 监听编译后的JS文件，自动重启服务
    "dev": "concurrently \"npm run watch:ts\" \"npm run watch:server\"" // 同时运行两个监听命令
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "debug": "^2.6.8",
    "dotenv": "^2.0.0",
    "express": "^4.15.3",
    "iconv-lite": "^0.4.17",
    "inversify": "^4.11.1"
  },
  "devDependencies": {
    "concurrently": "^8.2.2",
    "nodemon": "^3.1.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

如果希望后端服务重启后，浏览器能自动刷新页面，不用手动按F5，可以再装个browser-sync：

npm install --save-dev browser-sync

然后修改dev脚本，让它同时启动浏览器同步：

"dev": "concurrently \"npm run watch:ts\" \"nodemon ./dist/index.js\" \"browser-sync start --proxy 'localhost:3000' --files 'dist/**/*.js'\""

注意把localhost:3000改成你的Express服务实际监听的端口哦！

更简便的替代方案：用ts-node-dev #

如果你觉得上面的命令太繁琐，可以用ts-node-dev，它能直接监听TS文件，自动编译并重启服务，一步到位：

npm install --save-dev ts-node-dev

然后把dev脚本改成：

"dev": "ts-node-dev --respawn --transpile-only ./src/index.ts"

• --respawn：文件变化时重启服务
• --transpile-only：跳过类型检查（开发阶段用这个更快，生产环境还是要用tsc做完整编译）

现在你只要运行npm run dev，修改TS文件后，就能看到代码自动编译、服务重启，页面也能同步更新啦！

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