vite源码debug

如何下载源码到本地，然后可以运行起来，debug，学习使用以后再看源码，可以加深对内部细节的理解。

下载源码到本地

一般官方文档中都有对应的github链接，比如vite, 然后下载源码到本地

重点目录结构说明

RRADME.md

该文档中简要介绍了vite的基本介绍，和packages相关相关说明;

Contribution.md

该文件Contribution有如何启动工程，debugger，如何提pull request等流程说明；

package

vite源码里面package目录，主要有以下三个包，这里主要分析vite的debugger流程。

Package	描述
vite	vite主要的源码
@vitejs/plugin-legacy	vite对不支持es module的浏览器，补丁插件兼容支持
create-vite	vite工程的脚手架

playground

练操场，里面有很多vite实践的例子，包括alias, css, ssr等配置的例子; 可以使用这些里面启动demo。

build vite

进入package/vite中的package.json中，重点看"bin", "scripts"属性;

• bin中定义了vite这个别名的可执行文件"bin/vite.js";
• script中定义了vite运行和构建的命令;

  "bin": {
    "vite": "bin/vite.js"
  },
  
  "scripts": {
    "dev": "tsx scripts/dev.ts", 
    "build": "rimraf dist && pnpm build-bundle && pnpm build-types",
  },

根据Contribution中的说明，一步步操作

1. 运行 pnpm i 在Vite的根目录
2. 运行 pnpm run build 在Vite的根目录;

debugging vite

利用VSCode自带的调试工具，就可以轻松运行起来vite源码,

1. 在vs code中 扩展工具中debugger按钮

2. 如果没有配置过launch.json debugger配置文件，添加launch.json配置文件，主要定义type类型，和program入口文件

// launch.json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
          "<node_internals>/**"
        ],
        "program": "packages/vite/bin/vite.js",
      }
    ]
  }

3.点击debugger按钮， 就可以启动vite 然后出现debugger 按钮面板;

4. playground中具体运行

任意打开playground底下的项目，package.json中有描述了debug script ,终端控制台运行debug命令，一样可以启动vite

vite 启动入口分析

知道怎么debugger了，第一个断点断在哪里，看一下vite的入门，来打第一个断点

1. 在package.json中，看到定义的bin可执行文件，vite/bin/vite.js, 进入了start();

2. 进入"../dist/node/cli.js", 执行了parse()

3. 在parse()方法中，执行了createServer(), 创建本地服务器，所以第一个断点端在这里，可以分析创建本地服务器的这个过程