最终实现效果:通过 pnpm create template-vue3-ts-preset
安装我们自己的项目
源码:这里
声明:本项目的核心源码也是基于开源vite修改而来,本质是想让大家明白创建一个脚手架并发布到npm上走完流程。
前置知识:了解npm、node 以及 《如何创建一个本地的脚手架》
本篇主要带你寻找 pnpm create vite 背后究竟在运行哪些文件,官方的vite脚手架究竟走的是哪里的接口
首先:你需要看完《如何创建一个本地的脚手架》 明白如何在本地创建一个cli 命令,这很重要!接着我们打开vite源码
- 这里我们可以看到vite本身有很多目录,找到其中的 packages/create-vite 目录,这里面存放的就是vite脚手架项目,也就是我们常常使用的npm create vite 这条命令 (这个其实也可以通过create-vite在npm查找到)。
- 在目录中我们找到package.json 这个文件,从上一篇文章《如何创建一个本地的脚手架》我们可以了解到,在创建命令时,实际上入口文件就是package.json中"bin"对象,如图所示
这里的create-vite命令指向了index.js文件,那么我们去寻找全局最外层的index.js也就是下图这个文件
从这个文件中的代码我们不难看出他最终指向dist目录下的index.mjs 文件,可是,我们发现在craete-vite这个包中并没有发现dist这个目录
- 使用过脚手架创建项目的同学大概知道,dist目录是用来存放我们打包完成之后的项目的,那么这里其实也不例外,也是存放我们打包完成之后的代码的,那么这里为什么会没有dist目录呢?其实原因很简单,在全局中我们可以找到 .gitignore 文件,这个文件是用来忽略上传到远程项目的文件或文件夹:
其中dist赫然在列,说明了dist目录就不会被上传到远程项目中,那么dist目录究竟该如何恢复,其中又隐藏了哪些东西呢?我们不妨把整个vite项目拷贝下来,然后打开create-vite这个项目,运行下打包的命令,这样我们就可以看到dist中到底写了什么了。或者其实可以采用另一种方式,也可以看到:就是在NPM官网中的create-vite包中,因为这里涉及到我们最终运行的 crete-vite命令,所以这里的dist文件夹将不会被忽略,否则我们的将无法正确执行后续代码。可以看到dist下有一个index.mjs 打开文件我们可以看到如下内容:
-
很明显,这个文件的内容是被编译过的,并不利于我们查看或者学习,那么我们可以做以下判断: 即然是打包好的文件,那么一定会存在源文件。
-
所以如果有经验的的同学大概能猜到src目录就是我们的工作目录,也就是核心代码所在的地方,或者通过观察package.json中打包命令build确定文件为 build.config.ts 并通过build.config.ts可以查看到entries 这个对象来确定入口文件为src/index
* 打开src目录,发现里面只有一个index.ts文件,读取index.ts文件:
我们可以看到引入了fs模块,所以可以判定这是一个运行在nodejs当中的文件,
那么我们由此可以确定: 整个create-vite 命令都是围绕着 src/index 这个文件进行的。也就是说,src/index.mjs就是整个脚手架的入口