vite不能选配方案？vite-creater强势来袭！

我正在参加「掘金·启航计划」

项目背景

vite出现之后，迅速带走了一大波webpack的使用者，即使是对打包工具不熟悉的小白，也能很快感受到两者的区别——vite快的多！

vite官方文档第一句也是讲述其名字的由来 Vite (法语意为 "快速的") ,其logo也与其名字一样，处处都透露着一个字，那就是快！

但是习惯了vue-cli的同学（我），对于一个不能保存模板策略的工具，是无法忍受的，它居然每次都需要我选择模板、选择用js还是ts，这是让人无法忍受的。当然，vite官方还提供了社区维护的模板 即 awesome-vite ，同学可点击链接感受一下这些模板，不能说我们小白用不到吧，可以说是完全不认识。

为此，"好东西" vite-creater 诞生了 github源码 👉 点击走你

什么是vite-creater?

vite-creater是vite的一个前置的自动化cli程序，它可以按照用户自定义的流程全自动的创建项目，并安装依赖，当vite-creater提示完成时，你就可以直接npm run了！它调用的是npm create vite，除了选择框架外，其余的一切操作都不需要你动手，你只需预设一个策略即可！

我需要vite-creater吗？

如果你是一个熟练的vue玩家，我猜你可能需要它，它可以像vue-cli一样，储存一个自己的选配策略，它甚至支持你包含自定义的第三方库。

如果你还不了解vite，或者你希望使用vite原汁原味的功能，你可能不需要vite-creater，不过欢迎你使用，vite-creater会随着vite的更新而更新！

使用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常用包，如需其他框架，可以全选择no，然后在自定义第三方包中添加你的框架需要的包即可）

最后，vite-creater会问你，是否需要其他的第三方包，比如我们需要使用 超好用的大屏自适应工具 vue-autofit ,我们就输入vue-autofit

最后，可以选择将此选配方案保存，你可以选择给它取一个名字，当然也可以不取，因为vite-creater会在预设方案列表中展示所有依赖名称和使用的语言。

如果vite-creater要求你选择框架，你可以根据自己的需要选择你的框架：

当选择完框架后，即可快速完成项目创建了！并且已经下载了你的自定义包。

使用保存的选配方案

当你创建过一个方案并选择了保存后，工具会在下次使用时向你展示你保存的选配方案，直接选择即可一键生成项目，不用再重复选配过程。

vite-creater是怎么实现的？

vite-creater是node编写的。

调用Node编写的cli程序，必须在node环境下才可以运行，因为node的cli实际上是由node代理执行的，即V8引擎去解析和执行的，当我们全局安装了一个node cli程序时，node会自动把其命令加载到环境变量中，当我们的JS代码被执行时，是node在与操作系统交互。所以，我们不需要了解它具体的运行原理，我们只需要知道JS怎么写就可以了。

开发所需的库

"commander": "^10.0.1" 可以执行dos命令

"inquirer": "^9.2.0" 交互式输出工具，提供问询式命令行交互会用到

"configstore": "^6.0.0" 本地存储，相当于是cookie或者localStorage，用来储存用户保存的选配

开发步骤

使用npm 初始化项目

npm init

需要输入项目基本信息，此步骤会初始化一个标准的Npm包，并生成一个package.json ，

注意如果希望发布到npm，应该先在npm官网查看是否有相同或相似的包名，有的话是发布不了的，需要取一个标新立异的包名，或者就需要带上@userName/的前缀

使用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创建子进程

这是一个node内置的库，允许开发者创建一个子进程，并与子进程通讯

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()方法，这个方法是在子进程中出现了Vue字符时，我们判定vite进入了框架选择步骤，于是我们将子进程的输出展示到主进程中，也就是上面提到的框架选择页面

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函数，这样就完成了一个递归问询，直到用户选择了框架。

全自动化流程实现

当完成上述步骤之后，我们已经可以看到vite+vue的项目已经创建完成了，这时就已经完成了vite官方工具所做的，一般来说，我们需要进入该文件夹，然后执行npm i ，然后安装我们需要的包 npm i ....

根据上面的学习，我们理所当然的可以将这一步收纳进自动化的范畴，只需执行两条简单的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账号后，使用npm publish命令即可发布。

查看 vite-creater 的 npm主页

本项目已在 github开源 github源码 👉 点击走你

结语

懦弱之举，我决不姑息！