从零开始搭建前端脚手架（三）-- [动态添加、删除模板]

一、前言

本篇文章延续上篇从零开始搭建前端脚手架的事情，新增动态创建模板的相关方法，包括：新增 、删除、展示所有模板相关功能，这样我们就不必每增加一个模板，就需要修改代码了。

二、实现步骤

1.设计思路-总纲

我们先说一下设计思路，主要包括以下内容

1.需要一个json文件去存储所有的模板。
2.将与用户的选择模板交互内容选项变为从json文件获取。
3.设置不同命令，操作模板文件的增删以及展示

2.创建模板存储文件

首先我们创建一个模板存储的json文件，放入到libs文件夹中(libs/record.json)

[{"name": "electron","value": "electron1","description": "electron+vue2(桌面端项目)","link": "https://gitee.com/airdark/first-electron-1.git" },{"name": "web","value": "web","description": "vue2+webpack+iview(浏览器项目)","link": "https://gitee.com/airdark/vue2-demo.git"},{"name": "h5","value": "h5","description": "vue2+vant(移动端项目)","link": "https://gitee.com/airdark/nuxt-website"}
] 

3.将创建的模板数据引入

读取json文件中的模板信息，将数据赋值给create命令的交互问题中

 import fs from 'fs-extra'

import path from 'path'
import { fileURLToPath } from 'url'
const __filenameNew = fileURLToPath(import.meta.url)

const __dirnameNew = path.dirname(__filenameNew)

let rootPath = __dirnameNew.slice(0, __dirnameNew.length - 3)

// 获取当前模板列表
const templateList = JSON.parse(fs.readFileSync(rootPath + 'libs/record.json', 'utf8'))

// 设置让用户选择模版的问题项
const question = [{name: "features", // 选项名称message: "请选择要创建的项目模板", // 选项提示语type: "list", // 选项类型 另外还有 confirm check 等choices: templateList}
] 

4.添加模板命令

添加模板的主要思路是，通过用户手动输入模板的名称、下载地址等信息，我们收集到信息之后录入到json文件中，来保存数据。这里我们创建添加模板的交互问题及命令

let addQuestion = [{name: 'name',type: 'input',message: '请输入模板名称',validate(val) {if (!val) {return '名称为必填项！'} else if (templateList.some(item => item.name === val)) {return '名称重复！'} else {return true}}},{name: 'description',type: 'input',message: '请输入模板描述'},{name: 'link',type: 'input',message: '请输入模板地址',validate(val) {return !val ? '模板地址为必填项' : true}}
]

program.command('add').action(() => {inquirer.prompt(addQuestion).then(answer => {// 将模板的name赋值给valuelet template = { value: answer.name, ...answer }// 放入模板集合中templateList.push(template)// 重新写入到文件中进行保存fs.writeJson(rootPath + 'libs/record.json', templateList).then(() => {console.log(chalk.greenBright('添加成功'))console.table(templateList)}).catch(err => {console.log(chalk.redBright('添加失败'))console.log(err)})})}); 

如上设置后，输入air add命令进行测试，会出现如图所示结果与交互。

5.删除模板命令

删除的思路与添加类似，也是需要重新写入json文件，如下代码所示

let removeQuestion = [{name: 'name',type: 'input',message: '请输入要删除的模板名称',validate(val) {if (!val) {return '名称为必填项！'} else if (!templateList.some(item => item.name === val)) {return '名称不存在！'} else {return true}}}
]

const remove = () => {console.clear()inquirer.prompt(removeQuestion).then(answer => {// 获取要删除的模板为第几个let index = templateList.findIndex(item => item.name === answer.name)// 删除该模板信息templateList.splice(index, 1)// 重新写入文件fs.writeJson(rootPath + 'libs/record.json', templateList).then(() => {console.log(chalk.greenBright('删除成功'))console.table(templateList)}).catch(err => {console.log(chalk.redBright('删除失败'))console.log(err)})})
} 

如上设置后，输入air remove命令进行测试，会出现如图所示结果与交互。

6.模板列表展示命令

这个就很简单了，我们直接用console.table()来搞就好了。

program.command('list').action((name) => {console.clear()console.table(templateList)}); 

如上设置后，输入air list命令进行测试，会出现如图所示结果与交互。

完成这些之后我们再来看看我们的创建项目的命令中的模板是不是也发生了变化，如图所示

以上 我们就完成了动态添加或删除模板。

三、后记

通过这篇文章的所述方式，我们增加了新的命令，实现了动态添加、删除模板的功能。

随着命令的增多，我们目前将所有的命令都写在了bin/index.js文件之中，代码会略显繁重，可读性较差。下一篇文章，我会将文件内容分出对应的模块，进行代码拆分。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享