Express托管静态资源时，React开发如何实现浏览器自动刷新？

当然可以实现浏览器自动刷新！这里有几个实用的方案，你可以根据自己的项目需求来选择：

方案1：结合nodemon + webpack Watch（基础版） #

这个方案适合想保留现有Express服务器配置，同时实现自动重启服务器和自动打包的场景：

1. 首先安装nodemon（用来监听服务器文件变化并自动重启）：

   npm install nodemon --save-dev
   

2. 修改你的package.json中的scripts字段，添加开发命令：

   "scripts": {
     "start": "node server.js",
     "dev": "nodemon server.js & webpack --watch"
   }
   

3. 运行npm run dev后，nodemon会在服务器文件修改时自动重启Express，webpack --watch会在前端源码变化时自动重新打包到public目录。不过这个方案的小缺点是：静态资源更新后，浏览器需要手动刷新——如果想要自动刷新浏览器，可以搭配下面的方案3。

方案2：用webpack-dev-server（React项目首推） #

这是React开发中最常用的方案，webpack-dev-server会把打包后的资源放在内存中（比写入硬盘更快），同时支持热模块替换（HMR）——不用刷新整个页面就能更新组件，开发体验更好：

1. 修改你的webpack.config.js，添加devServer配置：

   const path = require('path');
   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
   const webpack = require('webpack');
   
   module.exports = {
     mode: 'development',
     entry: './src/index.js', // 你的React入口文件
     output: {
       path: path.resolve(__dirname, './public'),
       filename: 'bundle.js'
     },
     devServer: {
       static: {
         directory: path.resolve(__dirname, './public'),
       },
       hot: true, // 开启热模块替换
       open: true, // 自动打开浏览器
       proxy: {
         // 如果你的Express有API接口，把API请求代理到Express服务器
         '/api': 'http://localhost:1128'
       },
       port: 3000 // 前端开发服务器的端口
     },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
       new ReactRefreshWebpackPlugin() // 配合React热刷新
     ],
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               plugins: [require.resolve('react-refresh/babel')]
             }
           }
         }
       ]
     }
   };
   

2. 安装所需依赖（如果还没装）：

   npm install webpack-dev-server @pmmmwh/react-refresh-webpack-plugin react-refresh babel-loader @babel/core @babel/preset-react --save-dev
   

3. 修改package.json的scripts：

   "scripts": {
     "server": "node server.js",
     "dev": "webpack serve"
   }
   

4. 运行时先启动Express服务器：npm run server，再启动前端开发服务器：npm run dev。浏览器会自动打开http://localhost:3000，此后修改React源码会自动更新页面，甚至不需要刷新！

方案3：用browser-sync监听静态目录 #

如果不想改动太多webpack配置，也可以用browser-sync来监听public目录的变化，自动刷新浏览器：

1. 安装browser-sync：

   npm install browser-sync --save-dev
   

2. 直接在命令行运行（或者加到package.json的scripts里）：

   browser-sync start --server './public' --files './public/**/*' --proxy 'localhost:1128'
   

这个命令会启动一个代理服务器，监听public下所有文件的变化，一旦Webpack打包完成，就会自动刷新浏览器，同时把请求转发到你的Express服务器。

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