初始化vite项目是如何工作的？

唯有奶茶解百忧
119 阅读2分钟

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

这篇文章主要讲的是create-vite做了哪些工作？

首先，我们将Vite.js克隆到本地;

git clone https://github.com/vitejs/vite.git
cd vite
code . // vscode打开项目

我们一般通过以下几个命令来初始化Vite.js项目：

npm create vite
yarn create vite

如果需要指定项目名称和模板，则加上对应的参数：

# npm 6.x 
npm create vite@latest my-vue-app --template vue 
# npm 7+, extra double-dash is needed: 
npm create vite@latest my-vue-app -- --template vue 
# yarn 
yarn create vite my-vue-app --template vue 
# pnpm 
pnpm create vite my-vue-app --template vue

这里我们就有疑问了？为什么之前用npm init变成了npm create，查看了npm官方文档之后就明白了，

image.png create命令是init的别名， 这就不难理解了。以下两个命令等效。

npm init create-vite
npm create vite

这样一看，我们就很容易找到Vite.js的入口了，在package/create-vite/index.ts这个文件里。

找到入口之后，我们就可以开始看看Vite.js如何初始化项目的。

主线任务从第187行init函数开始，接着是几个问答，

image.png 项目名称，选择一个框架，选择一个变体，问题的结果收集在第200行的result变量里，288行如果覆盖清空项目文件夹，否则就创建文件。 通过对result的分析得到fullCustomCommand变量，接着会执行command，脚本执行完毕之后，会走到349行的write函数开始创建项目的文件，一直到347行整个流程结束。这就是init函数做的事情，其他声明的方法都是来辅助init整个流程的。

明白主线任务之后，我们再来看分支，具体做了什么事情。因为是ts写的，关于type类型声明就不需要看了;

  • 21行argv: 收集命令行npm create vite参数的值；
  • 27行FRAMEWORKS: 约定了框架的属性，包括名字，颜色，显示，变体
  • 177行TEMPLATE：框架数组，181行renameFiles：gitignore相关，185行的defaultTargetDir:默认文件夹名称；

init()里的变量：

  • argTargetDir和argTemplate：命令行参数里的项目名称和模板
  • targetDir:argTargetDir和defaultTargetDir二选一；
  • result
    • projectName: 项目名称
    • overwrite: 目录存在相同的是否覆盖。
    • overwriteChecker: 取消覆盖
    • packageName: 确定package.json文件的name属性
    • framework: 选择框架
    • variant: 选择变体JavaScript或者TypeScript
  • template: 决定模板名称
  • pkgInfo: npm_config_user_agent得到用户配置信息
  • pkgManager: 包管理工具
  • isYarn1: 是否是yarn
  • customCommand: 通过template得到对应的脚本
  • templateDir:得到模板文件夹，向文件夹写入文件

结束语

整个Vite.js初始化的工作就是这样了

avatar
文章
阅读
粉丝