调试vite

调试vite 1（console.log看日志）

1. 先把vite的仓库Clone到本地

vite的github仓库地址： github.com/vitejs/vite

git clone https://github.com/vitejs/vite.git

2. 安装项目依赖 vite是使用pnpm的，在根目录执行

pnpm install

3. 在playground目录下面创建一个vue的vite项目，用来调试

（暂时先不用playground已有的测试项目调试，后面再一一学习）

## 进入到目录下
cd playground

## 执行初始化vite项目指令
npm init vite
## 项目名叫 vue-vite-project-test
## 依次选择下面的选项
## vue
## TypeScript

4. 修改 vue-vite-project-test 的 package.json文件

{
  "name": "vue-project-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "node ../../packages/vite/bin/vite.js",
    "build": "vue-tsc && node ../../packages/vite/bin/vite.js build",
    "preview": "node ../../packages/vite/bin/vite.js preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "typescript": "~5.6.2",
    "vite": "^6.0.1",
    "vue-tsc": "^2.1.10"
  }
}

或者改为 （推荐，使用pnpm的workspace:*，会自动安装本地仓库中的vite） 然后在根目录重新执行 pnpm install

{
  "name": "vue-project-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "typescript": "~5.6.2",
    "vite": "workspace:*",
    "vue-tsc": "^2.1.10"
  }
}

5. 此时在vite的根目录运行

pnpm run dev

启动vite仓库

6. 然后在 vue-vite-project-test 目录下执行

pnpm install
pnpm run dev
pnpm run build
pnpm run preview

都会通过本地的vite去启动

但是这没办法通过vscode的debugger来看每一步的步骤，只能通过console.log去看控制台

让我们看下面的方案，使用vscode的debugger模式调试

调试vite 2（vscode debugger调试）

继续使用上面创建的 vue-vite-project-test 项目来调试。 调试这三个指令 pnpm run dev pnpm run build pnpm run preview

1. 在vite项目的根目录下面，新建文件夹 .vscode，在 .vscode 文件夹下创建文件 launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug: pnpm run dev",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/packages/vite/bin/vite.js",
      "args": ["--debug"],
      "cwd": "${workspaceFolder}/playground/vue-vite-project-test",
      "console": "integratedTerminal",
      "outFiles": ["${workspaceFolder}/packages/vite/dist/**/*.js"],
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/packages/vite/**",
        "!**/node_modules/**"
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug: pnpm run build",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/packages/vite/bin/vite.js",
      "args": ["build", "--debug"],
      "cwd": "${workspaceFolder}/playground/vue-vite-project-test",
      "console": "integratedTerminal",
      "outFiles": ["${workspaceFolder}/packages/vite/dist/**/*.js"],
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/packages/vite/**",
        "!**/node_modules/**"
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug: pnpm run preview",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/packages/vite/bin/vite.js",
      "args": ["preview", "--debug"],
      "cwd": "${workspaceFolder}/playground/vue-vite-project-test",
      "console": "integratedTerminal",
      "outFiles": ["${workspaceFolder}/packages/vite/dist/**/*.js"],
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/packages/vite/**",
        "!**/node_modules/**"
      ]
    }
  ]
} 

2. 这时候在左侧打开vscode的 Run and Debug 面板，会多出来三个指令

• Debug: pnpm run dev
• Debug: pnpm run build
• Debug: pnpm run preview

使用F5，或者点击面板的开始按钮，就可以开始调试了，调试前记得加几个断点

2.1 断点一，调试 Debug: pnpm run dev

// packages/vite/src/node/server/index.ts
export function createServer(
  inlineConfig: InlineConfig = {},
): Promise<ViteDevServer> {
  console.log('cheny !!!!! createServer')
  // 在此处添加断点
  debugger
  return _createServer(inlineConfig, { listen: true })
}

2.2 断点二，调试 Debug: pnpm run build

// packages/vite/src/node/build.ts
export async function createBuilder(
  inlineConfig: InlineConfig = {},
  useLegacyBuilder: null | boolean = false,
): Promise<ViteBuilder> {
  console.log('cheny !!!!! createBuilder')
  // 在此处添加断点
  debugger

2.3 断点三，调试 Debug: pnpm run preview

// packages/vite/src/node/preview.ts
export async function preview(
  inlineConfig: InlineConfig = {},
): Promise<PreviewServer> {
  console.log('cheny !!!!! preview')
  // 在此处添加断点
  debugger