vite 3.0 都发布了，还不知道vite 是如何创建项目的吗

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，  点击了解详情一起参与。
• 这是源码共读的第37期，链接

create-vite 源码地址

首先看vite是如何创建项目的

一般会使用 npm create vite@lastest 或者 npm init vite@lastest 命令 但为什么执行该命令就会创建项目呢，带着疑问看了npm init（create 是 init 的别名）介绍说明

这里简单阐述下什么意思

npm init 可用于设置新的或现有的NPM包 我们一般创建新项目都会 npm init -y 创建一个package.json 如果添加initializer 则代表有一个名为 create- 的npm包, 内部会通过npm-exec 下载，然后package 中的 bin中 create- 命令执行。

看到这里 忽然 感觉 原来如此呀！！！

入门铺垫已完成， 下一步，vite源码走起。

解析源码

上面讲了一般通过 npm create vite@lastest 创建一个新的vite项目，那就会先下载 create-vite 包，然后运行 package.json bin 中的 create-vite 命令 也就是 src/index.ts 文件 如图

使用命令 npx tsx packages/create-vite/src/index.ts 进行调试

可以看到里面就执行了一个init 方法。 首先先得了解几个工具库

1. minimist 用于获取命令行参数, 格式化参数。详细看
2. prompts 提供了选项式对话的 命令行工具。详细看
3. kolorist 用来在命令行输出不同颜色的字符。详细看

具体实现如下

总结

1. 通过学习 create-vite 让我更深刻的了解了 npm init 命令下的黑盒子是如何运行的。

2. 让我清楚的了解到vite 是如何创建项目的
   一、拷贝已经写好的基本模板
   二、通过命令运行 vue （或其他框架 ）来自定义创建项目

3. 学习几个新的工具库（minimist,prompts,kolorist）