Vite 构建工具 — 基于 Rolldown/Oxc 的下一代极速前端构建工具¶

# 创建新项目（推荐方式，自动选最新版）
npm create vite@latest my-app -- --template react-ts
# 模板选项：vanilla, vue, react, preact, lit, svelte, solid（加 -ts 为 TypeScript）

cd my-app
npm install       # 安装依赖
npm run dev       # 启动开发服务器（默认 http://localhost:5173）
npm run build     # 生产构建，输出到 dist/
npm run preview   # 本地预览构建结果

# 检查 Vite 版本
npx vite --version

// vite.config.ts — 项目配置文件
import { defineConfig } from 'vite';       // 类型安全的配置函数
import react from '@vitejs/plugin-react';  // React 支持插件

export default defineConfig({
  plugins: [react()],                      // 启用 React 插件
  server: {
    port: 5173,                            // 开发服务器端口
    host: '0.0.0.0',                       // 允许外部访问（局域网调试）
    proxy: {
      '/api': {                            // 代理：把 /api 请求转发到后端
        target: 'http://localhost:8080',
        changeOrigin: true,                // 修改请求头中的 origin
      },
    },
  },
  build: {
    outDir: 'dist',                        // 构建输出目录
    sourcemap: true,                       // 生成 source map（调试用）
    rollupOptions: {
      output: {
        manualChunks: {                    // 手动代码分割
          vendor: ['react', 'react-dom'], // 第三方库单独打包
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': '/src',                         // @ 符号代替 src 目录
    },
  },
});

# 环境变量（.env 文件）
# Vite 只暴露以 VITE_ 开头的变量给前端代码

# .env.development（开发环境）
VITE_API_BASE=http://localhost:8080/api

# .env.production（生产环境）
VITE_API_BASE=https://api.example.com

# 在代码中使用
const apiBase = import.meta.env.VITE_API_BASE;  // Vite 专用环境变量访问方式
const isDev = import.meta.env.DEV;               // 是否为开发模式

// 静态资源处理
import logo from './assets/logo.svg';            // 导入图片，返回 URL 字符串
import styles from './App.module.css';           // CSS Modules 自动支持

// 动态导入（代码分割）
const HeavyChart = React.lazy(                   // React.lazy 配合动态导入
  () => import('./components/HeavyChart')        // 只在需要时才加载这个模块
);

// Glob 导入（批量导入文件）
const modules = import.meta.glob('./pages/*.tsx');  // 匹配所有 tsx 文件

// ── 配置生信工具的前端开发环境 ──
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';  // 打包分析插件

export default defineConfig(({ mode }) => ({   // mode 区分 dev/prod
  plugins: [
    react(),
    mode === 'analyze' && visualizer({          // 只在分析模式启用
      open: true,                              // 构建完自动打开浏览器
      filename: 'dist/bundle-analysis.html',  // 报告输出路径
    }),
  ].filter(Boolean),                           // 过滤掉 false 值

  server: {
    proxy: {
      '/api/blast': {                          // 代理 BLAST 接口
        target: 'http://blast-server:8080',
        rewrite: path => path.replace(/^\/api/, ''),  // 去掉 /api 前缀
      },
    },
  },

  build: {
    target: 'es2020',                          // 目标浏览器 ES 版本
    minify: 'esbuild',                         // 用 esbuild 压缩（快）
    rollupOptions: {
      output: {
        manualChunks(id) {                     // 函数式代码分割
          if (id.includes('node_modules')) {
            if (id.includes('echarts')) return 'echarts';  // ECharts 单独包
            if (id.includes('d3')) return 'd3';            // D3 单独包
            return 'vendor';                               // 其他第三方库合并
          }
        },
      },
    },
  },
}));

# 常用命令
npm run dev          # 开发服务器
npm run build        # 生产构建
npm run preview      # 预览构建结果
NODE_ENV=analyze npm run build  # 分析打包

# 常用插件
@vitejs/plugin-react           # React + HMR
@vitejs/plugin-vue             # Vue 3
vite-plugin-svgr               # SVG 转 React 组件
vite-tsconfig-paths            # tsconfig paths 别名支持
rollup-plugin-visualizer       # 打包体积分析

# 模板速查
--template vanilla-ts          # 纯 TS
--template react-ts            # React + TS
--template vue-ts              # Vue 3 + TS

# 官方文档：https://vite.dev/
# 插件生态：https://github.com/vitejs/awesome-vite