ASP.NET MVC(.NET Framework4.7)集成ReactJS替代ExtJS方案咨询

完全可以实现需求，优先选择Vite作为React构建工具，配置成本极低，不需要 eject 或修改复杂的封装配置，完全适配.NET Framework 4.7 MVC的非重构渐进式迁移要求。

方案1：Vite配置直接输出静态资源、不生成index.html（最适配你的需求） #

按以下步骤配置即可：

• 项目初始化：在MVC项目根目录新建独立的ReactSrc文件夹存放React代码，和原有Controllers/Views/Content目录平级，在该目录下执行npm create vite@latest . -- --template react初始化React项目，选择JavaScript/TypeScript变体都可以。
• 修改Vite配置：打开vite.config.js，直接替换为以下配置，核心是调整构建入口、输出路径、移除html生成逻辑：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(),
    // 双保险：构建完成后强制删除可能生成的index.html
    {
      name: 'remove-build-html',
      writeBundle(_, bundle) {
        delete bundle['index.html']
      }
    }
  ],
  build: {
    // 构建产物直接输出到MVC项目的静态资源目录，根据你的项目结构调整路径
    outDir: '../Content/react-build',
    emptyOutDir: true,
    rollupOptions: {
      // 构建入口直接指向React的入口js/ts文件，不使用默认的index.html作为入口
      input: './src/main.jsx',
      output: {
        // 两种命名规则二选一：
        // 1. 固定文件名：适合快速接入，cshtml里直接写死引用路径，发布时拼个版本号处理缓存即可
        entryFileNames: 'react-entry.js',
        chunkFileNames: 'chunks/[name].js',
        assetFileNames: 'assets/[name].[ext]'
        // 2. 带hash文件名：适合生产环境缓存优化，需要配合Razor逻辑自动扫描最新文件引用
        // entryFileNames: 'react-entry.[hash].js',
        // chunkFileNames: 'chunks/[name].[hash].js',
        // assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  },
  server: {
    port: 3000,
    cors: true // 开发时允许MVC站点跨域引用Vite服务的资源
  }
})

• 调整React挂载逻辑：修改src/main.jsx，不再依赖index.html里的根节点，直接对接_Layout里预留的容器：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const mountNode = document.getElementById('react-mount-point')
if (mountNode) {
  ReactDOM.createRoot(mountNode).render(<App />)
}

• 对接_Layout.cshtml：在布局页合适的位置加React挂载容器，在页面底部引入构建出来的静态资源即可：

<!-- 放在body里你需要渲染React内容的位置 -->
<div id="react-mount-point"></div>

<!-- 放在body末尾，用固定文件名的话直接写死路径就行 -->
@if (!HttpContext.Current.IsDebuggingEnabled)
{
  <link rel="stylesheet" href="@Url.Content("~/Content/react-build/assets/react-entry.css")">
  <script src="@Url.Content("~/Content/react-build/react-entry.js")"></script>
}

• 配置构建脚本：打开React目录下的package.json，把scripts调整为：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:watch": "vite build --watch" // 监听React文件改动，自动重新构建输出到MVC静态目录
  }
}

执行npm run build:watch就能实现你要的监听构建效果，跑MVC项目刷新页面就能看到最新的React内容，不需要重启MVC站点。

方案2：开发环境热更新联调（开发效率更高，推荐搭配使用） #

如果不想开发时每次等全量构建，可以在上面的配置基础上，加个开发环境的资源引用判断，直接对接Vite的开发服务器，支持React热更新，改完代码秒生效：

• 直接在_Layout.cshtml的资源引用部分加判断，调试模式下直接引Vite本地服务的资源：

@if (HttpContext.Current.IsDebuggingEnabled)
{
  <script type="module" src="http://localhost:3000/@vite/client"></script>
  <script type="module" src="http://localhost:3000/src/main.jsx"></script>
}
else
{
  <link rel="stylesheet" href="@Url.Content("~/Content/react-build/assets/react-entry.css")">
  <script src="@Url.Content("~/Content/react-build/react-entry.js")"></script>
}
<div id="react-mount-point"></div>

开发时先执行npm run dev拉起Vite开发服务，再启动MVC项目，就能正常用React的热更新能力，和纯React项目开发体验一致，生产环境还是走构建后的静态资源，完全不影响原有发布流程，只要把npm run build加到MVC项目的预生成事件命令里，发布时会自动构建最新的React资源。

不推荐使用create-react-app的原因 #

CRA的构建配置封装程度极高，要修改构建入口、关闭index.html生成必须eject配置或者用第三方插件覆写，维护成本高，且CRA目前已经官方停止维护，对新的React特性支持滞后，完全没必要在渐进式迁移的场景下使用。

迁移过程完全不需要改动原有ExtJS逻辑，两个框架可以在同一页面共存，只要保证挂载节点不冲突即可，你可以按模块/页面逐步替换ExtJS功能，符合你不重构整个项目的要求。

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