如何在React TypeScript中结合npm serve实现热重载

首先明确：serve 是静态文件服务器，本身不支持代码变更后的热重载——它仅负责托管已编译完成的静态资源，无法感知源码变化或自动重新构建。要实现修改代码后自动更新，推荐以下两种方案：

方案一：使用React官方开发服务器（优先选择） #

如果你是用Create React App初始化的TypeScript项目，自带的开发服务器原生支持热重载，操作步骤：

• 终止当前运行的serve服务
• 在项目根目录执行：

  npm start
  

该命令会启动开发环境，实时监听TypeScript源码变更，自动编译并刷新页面，同时还会实时进行类型检查，完全无需手动构建或重启服务。

方案二：自动构建+静态服务重启（仅在必须用生产构建时使用） #

如果因特殊需求必须基于生产构建包运行，可通过工具组合实现自动构建与服务重启：

1. 安装依赖工具：

   npm install --save-dev concurrently nodemon
   

2. 修改package.json中的scripts字段：

   {
     "scripts": {
       "build:watch": "react-scripts build --watch", // 若为自定义webpack配置，替换为对应的监听构建命令
       "serve:dev": "nodemon --watch build --exec 'serve -s build'",
       "dev": "concurrently \"npm run build:watch\" \"npm run serve:dev\""
     }
   }
   

3. 启动服务：

   npm run dev
   

   工作逻辑：
   • build:watch 会监听源码变化，自动重新构建生产包到build目录
   • nodemon 监听build目录的文件变更，自动重启serve服务，触发页面刷新

注意：此方案的构建速度远慢于官方开发服务器，会降低开发效率，仅建议在特殊场景下使用。

内容的提问来源于stack exchange，提问作者Moe Htet Oo