响应组织的号召，正好最近在学习 vite，活动上也正好有一篇关于阅读create-vite的任务，于是就果断的加入了，这里记录一下阅读的过程。
学习任务
- 源码：create-vite
- create-vite 不到400行代码；
- 可以学会如何写一个脚手架等等；
- 注意：如果克隆的最新的代码(最新的create-vite已升级为 ts)，按照我文中的方式不能调试。推荐使用 npx esno src/index.ts调试源码。
初始化环境
跟着上面的链接，克隆下来源码，发现是根据pnpm来管理依赖的，所以需要安装pnpm，怎么安装就不说了，接着就是安装依赖。
然后就是看CONTRIBUTING.md文件了，里面很详细的解释了如何调试源码，但是是基于vscode的，我用的是webstorm，所以我这里就讲一下webstorm的调试方式。
WebStorm 调试
WebStorm调试的方式很简单，不管是.js还是.ts都可以在webstorm中直接调试，不需要额外的配置，因为有内置的TypeScript支持。
由于新版的
vite已经升级为ts，我这里就以ts为例。
- 可以直接打开
.ts，通过鼠标右键选择调试，然后就可以在右侧的行号处打断点了，就可以调试了。
这种方式调试完成之后，会在webstorm的Edit Configurations中生成一个Node.js的配置，下次就可以直接选择Node.js来调试了。
但是这种方式不能在package.json的"type": "module"下调试，会报错。
- 上面的方案是可以快捷生成一个
Node.js的配置，也可以手动添加，通过右上角的Edit Configurations。
选择Node.js，然后填写信息就好了：
- 也可以直接在
package.json中添加scripts，然后通过npm run来调试。
点击这个小箭头，也会出现debug的选项，然后就可以进行调试了。
这种方式会生成一个npm的配置，同样也会出现在Edit Configurations中。
- 上面的这些方式在
create-vite中都不行，所以需要增加一些额外的配置。
我们在package.json中的scripts中添加"debug": "npx esno src/index.ts"，然后执行第三步的方式，就可以调试了。
- 还有一种可以调试
.ts的插件Run Configuration for TypeScript，但是需要安装ts-node，也是在.ts文件中右键选择就好了，上面第一种方式的选项中有。
断点调试
在webstorm中，可以在行号处打断点，然后就可以进行调试了。
同时可以在断点处右键，为断点添加条件，这样就可以在满足条件的时候才会进入断点。
在下方的调试器中，可以看到当前的变量值，也可以在这里修改变量的值。
这些里面要讲的东西很多，这里就不一一讲解了，有兴趣的可以自己去研究一下，就是各种右键点击，设置值，打印值等等。
今天的分享就到这里了，明天开始正式的源码阅读。
