不用Vite/CRA搭建React服务遇JSX问题，求Vite原理与全栈方案

1. 直接引入JSX报「Disallowed MIME type」错误的原因 #

浏览器原生不支持JSX语法，仅能识别标准JavaScript（对应MIME类型为application/javascript）。当你直接在index.html中引入.jsx文件时：

• Express默认会将.jsx文件的MIME类型设为application/octet-stream（二进制流格式）
• 浏览器无法将该类型文件识别为可执行的JS模块，因此抛出「Disallowed MIME type」错误

2. Vite开发模式的核心原理 #

Vite的开发服务器会拦截所有前端资源请求：

• 当浏览器请求.jsx文件时，Vite会调用内置的esbuild实时将JSX编译为浏览器可识别的标准JavaScript
• 编译完成后，Vite会给响应设置正确的application/javascript MIME类型，再返回给浏览器
• 整个过程采用按需编译（仅编译当前页面用到的文件），无需提前将所有代码打包到dist文件夹，因此你看不到预生成的build产物

3. 手动搭建nodemon+Express+React全栈应用 #

用esbuild做实时编译（和Vite底层一致，轻量高效），步骤如下：

3.1 初始化项目与安装依赖 #

npm init -y
# 生产依赖
npm install express react react-dom
# 开发依赖
npm install -D nodemon esbuild esbuild-express-middleware

3.2 项目结构 #

your-project/
├── src/
│   ├── App.jsx       # React根组件
│   └── main.jsx      # 入口文件
├── public/
│   └── index.html    # HTML模板
└── server.js         # Express服务器

3.3 编写核心文件 #

public/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React + Express App</title>
</head>
<body>
  <div id="root"></div>
  <!-- 引入JSX入口，注意type="module" -->
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

src/App.jsx

export default function App() {
  return <h1>Hello React + Express!</h1>;
}

src/main.jsx

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

server.js

const express = require('express');
const { esbuildMiddleware } = require('esbuild-express-middleware');
const path = require('path');

const app = express();
const PORT = 3000;

// 提供public目录下的静态文件（比如index.html）
app.use(express.static(path.join(__dirname, 'public')));

// 用esbuild中间件处理JSX/JS文件请求，实时编译
app.use(
  '/src',
  esbuildMiddleware({
    root: __dirname,
    bundle: true,
    loader: { '.jsx': 'jsx' },
    target: 'es2020',
  })
);

// 后端API示例
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express backend!' });
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

3.4 启动开发服务 #

在package.json里添加启动脚本：

{
  "scripts": {
    "dev": "nodemon server.js"
  }
}

然后运行：

npm run dev

访问http://localhost:3000就能看到React应用，同时可以调用/api/hello接口。

3.5 生产环境打包 #

开发时用实时编译，生产环境需要提前把JSX编译成静态文件：

1. 添加打包脚本到package.json：

{
  "scripts": {
    "build": "esbuild src/main.jsx --bundle --loader:.jsx=jsx --outfile=public/dist/bundle.js --target=es2020"
  }
}

2. 运行npm run build，会在public/dist生成打包后的bundle.js
3. 修改public/index.html，把引入的/src/main.jsx换成/dist/bundle.js
4. 生产环境启动服务器：node server.js

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