vscode调试项目源码和vite源码设置

创建文件.vscode/launch.json文件

调试web项目

pnpm run dev开发环境(注意先把开发环境跑起来，浏览器能访问http://localhost:5173):

{
  "name": "debug web",
  "request": "launch",
  "type": "msedge",
  "url": "http://localhost:5173",
  "webRoot": "${workspaceFolder}"
},

调试 vite 源码配置

1. 注意命令行添加了--force

2. 添加resolveSourceMapLocations:

{
  "name": "调试: dev",
  "request": "launch",
  "runtimeExecutable": "pnpm",
  "runtimeArgs": ["run", "dev", "--force"],
  "cwd": "${workspaceFolder}",
  "console": "integratedTerminal",
  "skipFiles": ["<node_internals>/**"],
  "type": "node",
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**", "**/node_modules/.vite-temp/**"]
}

简版配置：

{
  "type": "node-terminal",
  "name": "run dev",
  "request": "launch",
  "command": "pnpm run dev --force",
  "cwd": "${workspaceFolder}",
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**", "**/node_modules/.vite-temp/**"]
}

插件容器

插件容器（Container）通过 Rollup 风格的构建钩子管理模块解析和转换流程。以下是关键阶段及其调用的钩子顺序：

1. 服务器启动阶段（vite dev）

• config: 修改初始配置（异步）
• configResolved: 配置解析完成后（同步）
• configureServer: 配置开发服务器中间件（同步）
• buildStart: 服务器开始监听前触发（异步）

2. 模块请求处理阶段（浏览器请求）

• resolveId: 解析模块路径（如 import './foo' → 绝对路径）
• load: 加载模块内容（如读取文件内容）
• transform: 转换模块内容（如 TS → JS、JSX 编译）

3. 热更新阶段（文件修改时）

• handleHotUpdate: 自定义 HMR 更新逻辑

4. 生产构建阶段（vite build）

• options: 修改 Rollup 选项（替换/操作配置）
• buildStart: 构建开始（异步）
• resolveId + load + transform: 处理每个模块（与开发阶段类似）
• buildEnd: 构建结束（无论成功与否）
• closeBundle: 资源关闭时（清理资源）