简单看看 vite 的一点点源码.md

TIP

vite 版本：5.0.9

学习的坎坷

不得不说，中国人想要学习先进的知识实在是坎坷了。想在 github 下载个著名的开源仓库，网速满得跟乌龟似的，下了一点点就报错了。好不容易从 gitee 上下载好，下载依赖又遇到问题。从镜像下载依赖有些是没有的，只能把相应的暂时用不到的依赖给删除掉重下。

我觉得这几步可能就劝退一些人了吧。

明确入口是在哪里

我们在 vite 仓库下载好依赖后，接下来该怎么做呢？我们平时使用 vite 就是执行它的命令，比如：vite、vite serve、vite build。

为什么我们能使用这个 vite 命令呢？原因是在 \vite\packages\vite\package.json 中定义了 bin 字段。

json

{
  "bin": {
    "vite": "bin/vite.js"
  }
}

所以我们执行 vite 命令时，其实执行的是 bin/vite.js 这个文件。所以我们就在 bin/vite.js 中打上断点，进行调试。

准备调试

如何使用 vscode 调试 js 文件？点击 vscode 左侧的一条工具栏中的 Run and Debug 按钮，添加一个配置，然后就可以启动调试了。调试前记得先在某行代码前面打上断点，这样程序才会停在那里。

添加调试配置时会自动创建 .vscode/launch.json 文件。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\packages\\vite\\bin\\vite.js"
    }
  ]
}

然后我们打上断点，一步步执行。发现很多代码都都看不懂。但其实影响也不是特别大，因为我们看源码的目的是：

启发我们平时编码
了解一些有用的依赖，工具
锻炼思维
帮助我们更熟悉、理解 vite

当然目的不止这些。除此之外多说一句，从经验上看，像弄懂全部源码就是痴人说梦。

调试

开始调试后，如果我们没有做什么特别的操作，那么最后一定会走进这个函数：

function start() {
  return import('../dist/node/cli.js')
}

看来是去执行 dist/node/cli.js 文件了。这个文件需要经过打包才会生成在 dist 目录。继续断点，发现不会往下走了。于是乎，我们修改下 launch.json 文件，开始调试 dist/node/cli.js 文件。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\packages\\vite\\bin\\vite.js"
      "program": "${workspaceFolder}\\packages\\vite\\dist\\node\\cli.js"
    }
  ]
}

了解到 cac 依赖库

然后，我们就会发现有许多这样的代码：

这时候我们大概会想知道这个 cli 是什么东西。我们如果多看两眼，会发现一些有点熟悉的东西，像 serve、dev、preview 这些单词，不就是我们经常执行 vite 命令 vite serve、vite dev、vite preview 所遇到的嘛。

通过查找变量来源，知道了一个叫做 cac 的库。

import { cac } from 'cac';
// ...
const cli = cac('vite');

这个库可以获取用户在控制台中输入的命令，然后根据这些命令进行一些操作。或者说，这个库让人可以通过控制台与程序进行交互。

我们可以再详细看看 cac 的文档，然后再看看它在 vite 中是怎么使用的。

vite 是如何获取 version 的？

在这个文件中，如果我们点进去下面的代码，还可以学到 vite 是如何获取 package.json 中的 version 字段。

// VERSION 的值与 package.json 中的 version 字段的值相同
cli.version(VERSION);

到此为止

ok，源码看到这里就差不多了。本篇文章真的是简单的看看 vite 的一点点源码，超级浅尝辄止。希望以后能更进一步，了解更多关于 vite 的源码。

简单看看 vite 的一点点源码.md ​

学习的坎坷 ​

明确入口是在哪里 ​

准备调试 ​

调试 ​

了解到 cac 依赖库 ​

vite 是如何获取 version 的？ ​

到此为止 ​