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

一、前言

本篇文章延续上篇《从零开始搭建前端脚手架（二）——模板基础功能》，新增动态创建模板的相关方法，包括：新增、删除、展示所有模板相关功能，这样我们就不用每次增加新的模板都需要手动修改脚手架代码，只需要在这个新增模板的函数里对模板进行处理，就可以自动生成我们需要的模板代码了。

二、代码实现

1. 新增模板

/**
 * 新增模板
 * @param {string} name 模板名称
 * @param {string} content 模板内容
 */
function addTemplate(name, content) {
  // 校验模板名称和内容是否合法
  if (!name || !content) {
    throw new Error("模板名称和内容不能为空！");
  }

  // 读取模板库
  const templates = JSON.parse(fs.readFileSync(templateDbPath));

  // 检查模板名称是否已经存在
  if (templates[name]) {
    throw new Error(`模板名称“${name}”已存在！`);
  }

  // 添加新模板
  templates[name] = content;

  // 将模板库写入文件
  fs.writeFileSync(templateDbPath, JSON.stringify(templates));

  // 打印成功信息
  console.log(`模板“${name}”已成功创建！`);
}

2. 删除模板

/**
 * 删除模板
 * @param {string} name 模板名称
 */
function deleteTemplate(name) {
  // 校验模板名称是否合法
  if (!name) {
    throw new Error("模板名称不能为空！");
  }

  // 读取模板库
  const templates = JSON.parse(fs.readFileSync(templateDbPath));

  // 检查模板名称是否存在
  if (!templates[name]) {
    throw new Error(`模板名称“${name}”不存在！`);
  }

  // 删除模板
  delete templates[name];

  // 将模板库写入文件
  fs.writeFileSync(templateDbPath, JSON.stringify(templates));

  // 打印成功信息
  console.log(`模板“${name}”已成功删除！`);
}

3. 展示所有模板

/**
 * 展示所有模板
 */
function listTemplates() {
  // 读取模板库
  const templates = JSON.parse(fs.readFileSync(templateDbPath));

  // 打印模板名称列表
  console.log("模板列表：");
  for (const name in templates) {
    console.log(`- ${name}`);
  }
}

三、使用示例

// 新增模板
addTemplate("simple-page", "<h1>Hello World!</h1>");

// 删除模板
deleteTemplate("simple-page");

// 展示所有模板
listTemplates();

四、结语

通过本文，我们已经完成了前端脚手架的基础功能开发，包括：初始化项目、添加模板、删除模板、展示所有模板。在下一篇文章中，我们将进一步完善脚手架的功能，添加一些高级功能，例如：模板变量替换、命令行参数处理等。