一、前言

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

二、处理文件夹重名问题

问题出现

这里是我在创建项目的时候，文件夹名称没有修改，还跟上次一样，结果在第二次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);

结果图集

实验结果如下

以上就是选择覆盖的逻辑。

以上就是选择重命名的逻辑。

三、后记

以上就是本篇内容，让用户可以选择覆盖或重命名，解决文件夹创建重名的问题。后续我还会继续添加功能，丰富的脚手架的功能。

本篇完结！ 撒花！ 感谢观看！ 希望能帮到你！