项目背景
vite出现之后，迅速带走了一大波webpack的使用者，即使是对打包工具不熟悉的小白，也能很快感受到两者的区别——vite快的多！
但是习惯了vue-cli的同学（我），对于一个不能保存模板策略的工具，是无法忍受的，它居然每次都需要我选择模板、选择用js还是ts，这是让人无法忍受的。当然，vite官方还提供了社区维护的模板 即 awesome-vite，同学可点击链接感受一下这些模板，不能说我们小白用不到吧，可以说是完全不认识。
vite-creater 诞生了 github源码 👉 点击走你
什么是vite-creater?
我需要vite-creater吗？
如果你是一个熟练的vue玩家，我猜你可能需要它，它可以像vue-cli一样，储存一个自己的选配策略，它甚至支持你包含自定义的第三方库。
使用vite-creater
安装vite-creater
npm i vite-creater -g
快速开始
vcreater init <yourProjectName>
vite-creater内置了一个贴心的选配策略：
自定义选配
vite-creater会问询一系列常用套件，包括：css预处理器、使用js还是ts、是否使用vue-router、使用vuex还是pinia
最后，vite-creater会问你，是否需要其他的第三方包，比如我们需要使用 超好用的大屏自适应工具 vue-autofit ,我们就输入vue-autofit
如果vite-creater要求你选择框架，你可以根据自己的需要选择你的框架：
使用保存的选配方案
vite-creater是怎么实现的？
vite-creater是node编写的。
开发所需的库
"commander": "^10.0.1" 可以执行dos命令
交互式输出工具，提供问询式命令行交互会用到
本地存储，相当于是cookie或者localStorage，用来储存用户保存的选配
开发步骤
使用npm 初始化项目
npm init
需要输入项目基本信息，此步骤会初始化一个标准的Npm包，并生成一个package.json，
使用commander库初始化命令
import { program } from 'commander';
program
.version('1.0.0'
.description(`vite-creater是一款用于快速创建vite项目的脚手架工具`;
program
.command('init <projectName>'
.description('使用vite-creater创建项目'
.option('-p, --projectName <string>', 'project name'
.action(async (initProjectName => {
await askForOptions(initProjectName //这里调用我们的自定义问询函数
};
program.parse(process.argv;
在node开发的cli中，可以使用async/await来阻塞程序，以等待步骤完成或者用户输入。
使用inquirer创建交互式问询输出
import inquirer from 'inquirer';
let preSetRules = [
{
name: 'selectRule',
type: 'list',
message: '选择一个预设规则，或者进入自定义流程',
choices: preSetRulesList, //这是一个数组，仅可包含字符串，如["item1","item2"]
}
]
let isPreSetRules = await inquirer.prompt(preSetRules
当如上代码被执行时，将会输出一个可以通过上下箭头键选择的列表（list）
使用configstore 储存用户的选配方案
import Configstore from 'configstore';
const conf = new Configstore('vite-creater';
conf.set("customRulesList", customRulesList; //新建或修改 参数：键名，数据
let customRulesList = conf.get('customRulesList';
其中customRulesList 可以是数组或者对象，当然也可以是字符串等，你可以把configstore 完全当作cookie来使用。
使用child_process创建子进程
import { exec } from 'child_process';
function execCreateTs(command {
console.log('exec：', command;
return new Promise((resolve, reject => {
const child = exec(command, (err, stdout, stderr => {
if (err {
console.log('err::: ', err;
reject(err
}
}
child.stdout.on('data', async data => { //监听子进程的输出
if (data.includes('Package name' {
process.stdout.write('\x1b[32m' + data + '\x1b[0m';
child.stdin.write('\n';
}
if (data.includes('Vue' {
process.stdout.write('\x1b[2J\x1b[0f';
process.stdout.write('\x1b[32m' + data + '\x1b[0m';
clearAnimation(
selectFramework(child
}
if (data.includes('TypeScript' {
process.stdout.write('\x1b[32m' + data + '\x1b[0m';
process.stdout.write('\x1b[2J\x1b[0f';
child.stdin.write('\n';
resolve(child.stdout
}
if (data.includes('is not empty' {
// 退出进程
console.log('\n\x1b[31m×\x1b[0m 目录已存在';
process.exit(;
}
}
}
}
上述代码由vite-creater创建ts项目为例，参数command即可以是任何dos命令。下面的if来查询子进程的输出中包含的字符，以此来确定子进程进行到哪一步了（我不知道这么做是不是符合规范的，不过开发的时候我想到了这个办法。）
selectFramework方法代码如下：
async function waitUserPresskey( {
// 返回一个promise对象
return await new Promise((resolve, reject => {
process.stdin.setRawMode(true;
process.stdin.resume(;
process.stdin.on('data', (key => {
key = key.toString('ascii'; //需要转为ascii码
resolve(key
};
};
}
async function selectFramework(child {
let input = await waitUserPresskey(;
// 如果按下ctrl+c，退出进程
if (input === '\u0003' {
process.exit(;
}
child.stdin.write(input; // 向子进程转发命令
}
当调用它时，程序会等待一个用户输入，然后直接转发到子进程中，当子进程再次输出其他信息时，又会回到我们上面的监听，于是，只要用户还没有选定框架，vite会一直处在框架选择页面，也就是还包含Vue字符，所以会再次进入selectFramework函数，这样就完成了一个递归问询，直到用户选择了框架。
全自动化流程实现
根据上面的学习，我们理所当然的可以将这一步收纳进自动化的范畴，只需执行两条简单的dos命令即可。
await execNpmInstall('npm i'
await execNpmInstall(installCommand
function execNpmInstall(command {
console.log('exec：', command;
return new Promise((resolve, reject => {
const child = exec(command, (err, stdout, stderr => {
if (err {
reject(err
}
}
child.stdout.on('data', async data => {
// 当npm i 完成时
if (data.includes('packages in' {
console.log('\n', data;
resolve(child.stdout
}
}
}
}
如果我们需要安装 之前用户储存的第三方库，只需要使用使用conf.get('xxx';去获取数据，然后传入该函数即可。
完成
查看 vite-creater 的 npm主页
结语
懦弱之举，我决不姑息！