Vite Plugin React SWC 使用教程
1. 项目的目录结构及介绍
vite-plugin-react-swc/
├── scripts/
├── src/
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── playwright.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json
- scripts/: 包含项目的脚本文件。
- src/: 包含项目的源代码文件。
- .gitignore: 指定Git忽略的文件和目录。
- CHANGELOG.md: 记录项目的更新日志。
- LICENSE: 项目的许可证文件。
- README.md: 项目的介绍和使用说明。
- package.json: 项目的依赖和脚本配置。
- playwright.config.ts: Playwright 测试配置文件。
- pnpm-lock.yaml: pnpm 的锁定文件,确保依赖版本一致。
- pnpm-workspace.yaml: pnpm 的工作区配置文件。
- tsconfig.json: TypeScript 的配置文件。
2. 项目的启动文件介绍
项目的启动文件通常是 package.json
中定义的脚本。例如:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}
- dev: 启动开发服务器。
- build: 构建项目。
- serve: 预览构建后的项目。
3. 项目的配置文件介绍
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src"]
}
- compilerOptions: TypeScript 编译选项。
- include: 指定包含的文件和目录。
playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30 * 1000,
expect: {
timeout: 5000
},
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
actionTimeout: 0,
trace: 'on-first-retry'
}
});
- testDir: 测试文件的目录。
- timeout: 测试超时时间。
- expect: 预期配置。
- fullyParallel: 是否并行运行测试。
- forbidOnly: 是否禁止仅运行标记的测试。
- retries: 重试次数。
- workers: 并发工作线程数。
- reporter: 报告格式。
- use: 其他使用配置。
通过以上配置,可以更好地理解和使用 vite-plugin-react-swc
项目。