如何在React应用中通过Bun启用热重载功能？

首先明确：Bun的--watch标志仅负责监听文件变更并重启进程，并不内置React的热模块替换（HMR）能力，这就是你修改文件后浏览器无法实时更新的核心原因。下面是具体解决方案：

方案1：使用Bun官方React模板（推荐） #

Bun官方提供的React模板已经预置了HMR配置，直接用它创建项目即可：

bun create react ./my-react-app
cd my-react-app
bun dev

启动后修改App.js等文件，浏览器会自动完成热重载，无需手动重启服务。

方案2：为现有项目手动配置HMR #

如果是已有的React项目，按以下步骤添加HMR支持：

1. 安装依赖：

   bun add -D react-refresh @babel/plugin-transform-react-jsx-source
   

2. 在项目根目录创建bunfig.toml，添加HMR启用配置：

   [dev]
   hmr = true
   

3. 修改你的入口文件（比如dev.tsx），加入HMR检测逻辑：

   import { render } from 'react-dom/client';
   import App from './App';
   
   const rootElement = document.getElementById('root');
   if (!rootElement) throw new Error('Root element not found');
   
   const root = render(<App />, rootElement);
   
   // 处理HMR更新
   if (import.meta.hot) {
     import.meta.hot.accept('./App', () => {
       const UpdatedApp = require('./App').default;
       root.render(<UpdatedApp />);
     });
   }
   

4. 用bun dev命令启动开发服务，替代原来的bun --watch run dev.tsx。bun dev是Bun专门的开发服务器命令，原生支持HMR。

备选方案：实现浏览器自动全刷新（非HMR） #

如果不需要模块级热替换，仅需文件变更时页面全刷新，可以用bun --watch配合简单的刷新逻辑：

• 在入口HTML中添加一段livereload脚本（无需额外依赖）：

  <script>
    const ws = new WebSocket(`ws://localhost:${location.port}/livereload`);
    ws.onmessage = () => location.reload();
  </script>
  

• 然后在dev.tsx中加入WebSocket服务逻辑，让Bun在文件变更时向客户端发送刷新信号（这种方式体验不如HMR，仅作备选）。

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