如何调试vite源码

基于最新发布的vite 4.0，对vite核心源码进行调试

环境

1. node 14 及以上
2. pnpm

克隆vite仓库

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

调试vite

1. 在vite项目根目录下执行pnpm i，安装依赖
2. 在packages/vite，使用pnpn run dev构建vite开发版本，注意不要使用pnpm run build构建，因为在生产环境打包时不会生成sourceMap
3. 在vite项目源代码中打上断点，我们这里选择命令行的入口文件packages/vite/src/node/cli.ts，找到注册devServer启动命令的代码

// dev
cli
  .command('[root]', 'start dev server') // default command
  .alias('serve') // the command is called 'serve' in Vite's API
  .alias('dev') // alias to align with the script name
  // ...
  .action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
    const { createServer } = await import('./server') // 在这行前面打上断点即可
    // ...
  })

4. 点击侧边栏工具的运行和调试，点击 JavaScript 调试终端按钮，打开调试终端

5. 在调试终端中进入playground/xxx任意的一个项目中，运行pnpm run dev，即可开始调试vite源码 6. 按F5跳到下一个断点，也就是我加的代码下一行，输出一下 7. 再按一次F5直接放行，就可以看到服务已经启动了，点击链接即可打开demo项目页面

更进一步

想要更近一步了解vite，可以推荐从如下这些方面入手

1. vite如何启动服务
2. vite如何构建
3. vite服务如何响应请求，如何转换模块（vue模版，样式文件，图片...）
4. vite如何实现HMR
5. vite如何实现依赖预购建
6. ...

看vite源码我们可以学到什么

1. 认识最新的构建工具体系
2. 认识monorepo项目结构
3. 提高水群能力

最后提一下vite 4.0

1. 升级了 Rollup 3
2. 把vue/react框架的插件抽离出去了，单独开了仓库，获得更多的star
3. react开发模式可以用swc替代babel
4. CSS 作为字符串导入
5. 兼容性 ...