在Visual Studio（非VS Code）中配置React项目实现无需编译实时预览的方法

直接把script标签指向app.tsx肯定行不通——浏览器原生根本不认识TypeScript、JSX/TSX语法，这些代码必须经过转译、打包才能被浏览器解析。不过我们可以通过配置开发服务器，实现修改代码后自动实时更新页面，不用手动编译，具体方案如下：

方案一：用webpack-dev-server实现实时编译与热更新 #

如果你的项目是基于webpack构建的（微软教程的Node.js+React项目一般默认用webpack），这是最贴合现有项目的方案：

1. 安装依赖 #

首先安装webpack-dev-server开发依赖：

npm install --save-dev webpack-dev-server

2. 修改webpack配置文件 #

找到项目中的webpack.config.js（如果没有就新建），添加devServer配置，并确保模式设为开发模式：

const path = require('path');

module.exports = {
  // 保留你现有的entry、output、module.rules等配置
  entry: './app.tsx', // 你的React入口文件路径
  output: {
    filename: 'app-bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      // 确保有处理TS/TSX的规则，比如用ts-loader
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      // 其他处理CSS、静态资源的规则...
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // 支持解析这些后缀的文件
  },
  // 添加devServer配置
  devServer: {
    static: {
      directory: path.join(__dirname, './'), // 指向项目根目录，让dev server能访问index.html
    },
    hot: true, // 开启热模块替换，修改代码后无需刷新页面
    open: true, // 启动服务器后自动打开浏览器
    port: 3000, // 自定义端口，可根据需要修改
  },
  mode: 'development', // 开发模式下编译更快，包含调试信息
};

3. 更新package.json的脚本命令 #

把原来的start命令改成用webpack-dev-server启动：

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production" // 生产环境打包用这个命令，会生成dist目录
  }
}

4. 启动开发服务器 #

现在运行npm start，浏览器会自动打开你的项目。之后每次修改app.tsx或其他源文件，webpack-dev-server会自动重新编译（编译后的文件存在内存中，不会生成物理的dist/app-bundle.js），并通过热模块替换更新页面，完全不用手动编译！

注意：如果热更新没自动触发，可以在app.tsx末尾添加这段代码启用HMR支持：

if (module.hot) {
  module.hot.accept();
}

方案二：迁移到Vite（更轻量快速的选择） #

如果你不想折腾webpack配置，Vite对React+TypeScript的支持非常友好，启动速度和热更新速度都更快：

1. 初始化Vite项目（如果要迁移） #

npm create vite@latest my-react-ts-app -- --template react-ts

然后把现有项目的组件、业务代码迁移到新的Vite项目中即可。

2. 启动开发服务器 #

进入项目目录后运行：

npm install
npm run dev

Vite会自动处理TSX/TypeScript的转译，修改代码后几乎瞬间就能看到页面更新。

为什么直接引用app.tsx不行？ #

浏览器只能理解原生的HTML、CSS、JavaScript，而：

• TSX/JSX是React的扩展语法，需要转译为普通JS
• TypeScript代码需要编译为ES5/ES6等浏览器支持的JS版本
• 多个模块文件需要打包合并成浏览器能识别的单个文件（或按需加载的文件）

所以必须经过构建工具处理，直接引用源文件浏览器根本无法解析，这就是页面空白的原因。

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