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

87 阅读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行renameFilesgitignore相关,185行的defaultTargetDir:默认文件夹名称;

init()里的变量:

  • argTargetDirargTemplate:命令行参数里的项目名称和模板
  • targetDir:argTargetDirdefaultTargetDir二选一;
  • 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初始化的工作就是这样了