如何用ViteJS构建Node.js应用？求单仓统一构建示例项目

核心思路 #

Vite底层依赖esbuild，完全可以通过配置扩展能力，同时处理前端React项目和后端Fastify项目，无需额外引入tsup。关键是给后端代码配置适配Node环境的Vite构建规则，利用Vite的lib模式和SSR模式输出符合Node要求的产物。

项目结构 #

monorepo/
├── packages/
│   ├── frontend/          # React前端应用
│   │   ├── src/
│   │   ├── index.html
│   │   └── vite.config.ts
│   └── backend/           # Fastify后端服务
│       ├── src/
│       │   └── index.ts
│       └── vite.config.ts
├── package.json
└── tsconfig.json

关键配置实现 #

后端Vite配置（packages/backend/vite.config.ts）

针对Node环境调整构建规则，输出CommonJS格式产物，排除第三方依赖和Node核心模块：

import { defineConfig } from 'vite';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: 'src/index.ts',
      formats: ['cjs'],
      fileName: () => 'index.js',
    },
    rollupOptions: {
      // 标记不需要打包进产物的依赖
      external: ['fastify', 'node:http', 'node:path', 'node:fs'],
      plugins: [nodeResolve({ preferBuiltins: true })],
    },
    ssr: true, // 开启SSR模式，适配Node运行环境
  },
});

前端Vite配置（packages/frontend/vite.config.ts）

常规React项目配置即可：

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
  },
});

根目录package.json脚本

统一管理构建和开发命令：

{
  "scripts": {
    "build:frontend": "cd packages/frontend && vite build",
    "build:backend": "cd packages/backend && vite build",
    "build": "npm run build:frontend && npm run build:backend",
    "dev:frontend": "cd packages/frontend && vite",
    "dev:backend": "concurrently \"cd packages/backend && vite build --watch\" \"nodemon --watch packages/backend/dist --exec node packages/backend/dist/index.js\""
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@vitejs/plugin-react": "^4.2.1",
    "concurrently": "^8.2.2",
    "nodemon": "^3.0.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.11"
  },
  "dependencies": {
    "fastify": "^4.25.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

后端示例代码（packages/backend/src/index.ts） #

import fastify from 'fastify';

const app = fastify({ logger: true });

// 示例接口
app.get('/', async () => {
  return { message: 'Fastify backend powered by Vite!' };
});

const start = async () => {
  try {
    await app.listen({ port: 3001 });
    console.log('Backend running at http://localhost:3001');
  } catch (err) {
    app.log.error(err);
    process.exit(1);
  }
};

start();

注意事项 #

• 后端构建时通过external排除第三方依赖，避免把fastify等库打包进产物，减少体积且符合Node模块加载逻辑
• 开发时用concurrently同时运行Vite的监听构建和nodemon的进程重启，实现热更新效果
• 根目录的tsconfig.json可以配置monorepo的共享TypeScript规则，比如设置composite: true方便跨包类型检查

内容的提问来源于stack exchange，提问作者Frédéric Mascaro