从零开始搭建前端脚手架（二）-- [解决目录重名问题]

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/127668609

一、前言

本篇文章延续上篇从零开始搭建前端脚手架的事情，新增脚手架创建模板时文件夹重名的处理方法。

二、处理文件夹重名问题

问题出现

这里是我在创建项目的时候，文件夹名称没有修改，还跟上次一样，结果在第二次git拉取项目的时候，就报了如下图所示错误

然后我就发现，我改个名字就好了，或者把创建时候的名字修改一下就好了。所以这里我们可以给用户两个选择：1.告知其重名，请修改名称；2.覆盖现有文件夹。

解决思路

我们就这么办，在获取到用户的创建命令后，我们在用户的创建路径上查询当前路径上是否有重名文件夹，如果有，则询问用户修改名称或者覆盖，若修改文件夹名称，则让用户重新输入文件夹名称，再重复一次检验重名机制即可；若用户选择覆盖，则删除掉现有文件夹，然后直接下载新的即可。

交互设计

这里我们先写一个检查重名的方法

// 设置检测重名的问题交互
const duplicateName = [{name: "duplicateName", // 选项名称message: "当前目录已存在，请选择", // 选项提示语type: "list", // 选项类型 另外还有 confirm check 等choices: [ // 具体的选项{name: "覆盖", // 选项展示的名称value: "overWrite", // 用户最终选择的值},{name: "重命名",value: "rename"}]},{name: 'newName',// 这里设置当前面用户选择重命名后，让用户输入新名称when: answers => answers.duplicateName === 'rename',type: 'input',message: '目录名称为:'}
]

开始处理重名

然后我们再写一个方法，用来判断用户输入的名称是否重复，因为用户选择重命名后输入的名称也可能是重复的，因此我们要使用递归去判断重名

// 这里注意要安装下'fs-extra'来替代'fs'
import fs from 'fs-extra'

/*** 判断是否有同名文件夹start */
const isHas = (projectName) => { // projectName是用户输入的目录名const targetDir = path.join(process.cwd(), projectName)return fs.existsSync(targetDir)
}
/*** 判断是否有同名文件夹end */
// 检查重名--递归 
const checkName = (name) => { // name是用户输入的目录名if (isHas(name)) {inquirer.prompt(duplicateName).then(res => {if (res.duplicateName === 'overWrite') { // 若用户选择重写// 获取用户要操作的目录地址const targetDir = path.join(process.cwd(), name)// 创建loding文字提示及图标实例const loadingMsg = ora(`正在删除 ${chalk.cyan(targetDir)}...`)loadingMsg.start()// 删除目录及其所包含的文件fs.remove(targetDir).then(val => {loadingMsg.succeed()loadingMsg.stop()// 这里是执行下载模板的方法letDownload(name)})} else {// 若用户选择重命名，则在经历一次判断是否重名checkName(res.newName)}})} else {// 若未重名，则直接选择模版下载步骤letDownload(name)}
}

这里咱们将上一篇中写好的下载逻辑，给封装了下letDownload，代码如下

// 下载对应模板
const letDownload = (projectName) => {/*** 初始化loading图标文字 start */const spinner = ora('模版下载中 ...')/*** 初始化loading图标文字 end */inquirer.prompt(question).then(res => {\spinner.start()// 获取到第一项中，用户选择的值，这里偷了个懒，大家可以根据答案和问题获取对应下载链接。let info = question[0].choices.find(item => item.value === res.features)download(`direct:${info.link}`, `./${projectName}`, {clone: true}, (err) =>{if (err) {spinner.fail()console.log(chalk.red(err))console.log(chalk.red('获取模版失败'))} else {spinner.succeed()console.log(chalk.green('Success!'))}spinner.stop()})})
}

最后在解析用户输入命令时候，代码内容修改为如下即可，直接调用名称重复检测

 program.version(packageJsonData.version, '-v, --version').command('create <projectName>').action((projectName) => { // 当用户输入create命令时走这里// 清空控制台console.clear()// 这里我们就可以对用户输入的命令进行进行操作console.log(`用户想创建一个名为${chalk.cyan(projectName)}的项目`)// 检测重名checkName(projectName)})
program.parse(process.argv);