Published on

vite-1.0源代码解读准备

Authors
  • avatar
    Name
    祝你好运
    Twitter

解读准备主要是要能够修改源代码,然后用我们修改后的代码来运行一个test程序,知道具体运行过程中的一些数据,验证我们的推想。 首先说明,我这里只用到了静态调试,也就是打log,在我不明白的地方,输出详细的log。动态调试也可以搞,不过我觉得vite本身的代码并不是特别复杂,所以就没有太大的必要来搞动态调试。

clone源码

  1. 从[vite]clone代码,git@github.com:vitejs/vite.git
  2. 切换到v1.0.0-rc.13tag所在的位置,git checkout bd448fb7
  3. 新建一个分支,这样方便后面来回切换,git checkout -b source-analyze-1.0
  4. 安装依赖并运行项目yarn;yarn dev
  5. 不要关闭上面的命令,新开一个命令行,然后运行yarn link。link的意思就是后面我们可以在测试程序中用这个vite,而不是安装到node_modules下面的那个vite。

注意这一步也可以先fork一下,然后clone自己的,然后后面可以给原仓库提PR

新建并运行测试项目

  1. npm init vite-app TestVite --jsx react,这里我是用的React,因为我熟悉React,方便我阅读和分析代码。
  2. cd TestVite
  3. yarn
  4. yarn link "vite"
  5. yarn dev --debug 这样就可以看到命令行里面有很多log打出来,项目也启动起来了。准备动作就做好了。