Vite 在项目中的使用分析

## 📋 目录

- [Vite 工作流程](#vite-工作流程)
- [开发服务器流程](#开发服务器流程)
- [构建流程](#构建流程)
- [插件处理流程](#插件处理流程)
- [关键配置说明](#关键配置说明)
- [依赖关系](#依赖关系)

## Vite 工作流程

## 开发服务器流程```mermaid

## 构建流程```mermaid

## 插件处理流程```mermaid

## 关键配置说明

### 1. 基础配置

### 2. 配置详情

#### 插件配置

| 插件 | 用途 | 关键配置 |
|------|------|----------|
| `@vitejs/plugin-react` | React 支持，JSX 转换 | 默认配置 |
| `vite-plugin-svgr` | SVG 转 React 组件 | `svgrOptions` |
| `@originjs/vite-plugin-commonjs` | CommonJS 模块转换 | `skipPreBuild: true`, `exclude` |
| `viteStaticCopy` | 静态资源复制 | `targets: [{ src, dest }]` |

#### 路径解析配置

resolve: { extensions: ['.web.mjs', '.mjs', '.web.js', '.js', '.web.ts', '.ts', '.web.tsx', '.tsx', '.json', '.web.jsx', '.jsx'], alias: { // 从 modules.webpackAliases 继承 '@': 'src', // ... 其他别名 }, preserveSymlinks: true, // 保留符号链接，用于 yalc 本地联调 }

#### CSS 预处理器配置

css: { preprocessorOptions: { less: { math: 'always', javascriptEnabled: true, additionalData: ` @import "./src/styles/var.less"; @import "./src/styles/roe-theme.less"; `, // 全局注入样式变量 }, }, }

#### 开发服务器配置

server: { port: 3000, // 默认端口 host: '0.0.0.0', // 允许外部访问 open: true, // 自动打开浏览器 proxy: require(proxySetup), // 代理配置（从 config/setupProxy.js 加载） }

#### 构建配置

build: { outDir: 'dist', // 输出目录 assetsDir: 'static', // 静态资源目录 emptyOutDir: true, // 构建前清空输出目录 sourcemap: true, // 生成 SourceMap rollupOptions: { input: { main: 'src/index.tsx', // 入口文件 index: 'public/index.html', // HTML 模板 }, }, }

#### 依赖优化配置

optimizeDeps: { esbuildOptions: { plugins: [ esbuildCommonjs(['react-resizable']), // 特殊处理 react-resizable ], }, }

## 依赖关系```mermaid

## 关键特性

### 1. 环境变量处理
- 通过 `config/env.js` 获取环境变量
- 使用 `define` 配置注入到代码中
- 支持 `.env` 和 `.env.web` 文件

### 2. 路径别名
- 从 `config/modules.js` 继承 webpack 别名配置
- 支持 `@` 指向 `src` 目录
- 保留符号链接，支持 yalc 本地联调

### 3. CommonJS 兼容
- 使用 `@originjs/vite-plugin-commonjs` 处理 CommonJS 模块
- 特殊处理 `react-resizable` 等库
- 排除 `screen-editor` 等不需要转换的包

### 4. 静态资源处理
- SVG 通过 `vite-plugin-svgr` 转为 React 组件
- 静态资源通过自定义插件复制到构建目录
- 支持 `@base` 资源的自动复制

### 5. Less 全局样式
- 自动注入 `var.less` 和 `roe-theme.less`
- 支持 Less 数学运算
- 启用 JavaScript 表达式

### 6. 开发体验优化
- HMR 热模块替换
- 自动打开浏览器
- 代理配置支持 API 转发
- SourceMap 支持调试

## 使用命令

| 命令 | 说明 | 流程 |
|------|------|------|
| `yarn start` | 启动开发服务器 | 加载配置 → 启动服务器 → HMR |
| `yarn start:base` | 本地联调模式 | yalc link → 启动服务器 |
| `yarn build` | 生产构建 | 优化 → 打包 → 输出 |
| `yarn build:svg` | 生成 SVG 雪碧图 | 扫描 SVG → 生成雪碧图 |

## 注意事项

1. **不允许使用 require**：src 目录内必须使用 import
2. **样式导入**：去掉 `~` 符号
3. **SVG 处理**：使用手动生成雪碧图方式，避免启动时转换
4. **本地联调**：使用 yalc 进行 `@base` 的本地联调
5. **缓存清理**：遇到依赖问题可删除 `node_modules/.vite` 文件夹