前置
本小节说的是create-vite 使用的template模板的实现原理,我们在使用vite创建项目的时候,在控制台中输入pnpm create vite,会让你进行选择模板,然后根据用户选择的模板生成一套完整的项目文件。
具体如下:
原理讲解
我们在github上下载vite源码,可以看到,在packages包中含有create-vite和vite两个目录,分别对应**创建模板项目和vite核心源码内容**。
- 首先在当前项目根目录下pnpm install 安装依赖,然后进入create-vite项目中通过npm link 将create-vite命令链接到全局,然后直接在create-vite文件夹中定位入口文件,最终找到src/index.ts文件,然后找到init函数在其中打上断点。(下面截图我是在github上截的图,你需要在你本地克隆的项目中找到对应的地方哈)
- 然后在终端中打开create-vite的目录,并开启js调试模式,最终就会进入到你的断点的位置。
- 其实核心内容就是根据用户的选择项来复制对应的项目模板到你的执行目录下。具体内容自己打断点吧。
第三方库介绍
- minimist:用户简单的用户交互的工具,只用于简单的。如果要使用复杂的用户交互,推荐使用commander。
- picocolors:类似与chalk一样的库,在控制台中输入带颜色的字体。这个对比chalk更小。在vite源码中使用的是picocolors,而在vue3中好像使用的是chalk(vue3中需要你们去探索一下)。