前端生成组件模版原理-Node版

CreateService 函数功能说明

CreateService 是一个用于自动生成前端组件模块（widget）的服务函数，核心流程如下：

路径初始化

• 获取项目中 src/、template/、menu.ts、widgets 等路径。

模板复制

• 使用 otiai10/copy 将 template 文件夹复制到 src/，生成 widget 临时文件夹。

文件内容与名称替换

• 遍历临时目录，将文件中 MyPluginName 等关键词替换为实际组件名。
• 对应文件名同时重命名。

目录移动与清理

• 删除中间过程路径；
• 将临时 widget 目录迁移到 widgets/ 目录。

菜单更新

• 构建并追加新的菜单项及映射至 menu.ts 文件；
• 自动生成符合 TypeScript 类型声明的结构。

构建记录追加

• 根据类型将组件 ID 写入 .build.local 或 .build.prod 文件，用于后续追踪构建状态。

const { replaceFileContent, replaceFileName } = require("./file-replace");
const fs = require("fs-extra");
const path = require("path");
const Log = require("./Log");
const slash = require("slash");

/**
 * 将字符串首字母大写
 *
 * @param string 要处理的字符串
 * @returns 返回首字母大写的字符串
 */
function capitalizeFirstLetter(string) {
  return string.replace(/\b\w/g, function (char) {
    return char.toUpperCase();
  });
}
/**
 * 将字符串的首字母小写
 *
 * @param string 待处理的字符串
 * @returns 返回处理后的字符串
 */
function decapitalizeFirstLetter(string) {
  return string.replace(/\b\w/g, function (char) {
    return char.toLowerCase();
  });
}

function regExpGenerater(str) {
  return new RegExp(`${str}`, "g");
}

function merge(strArr = []) {
  return strArr.map((str) => regExpGenerater(str));
}

async function createWidget(currentPath, { widgetName, entityName }) {
  // 先复制组件出来
  // 需要在组件根目录
  // 执行命令
  const bakPath = path.join(__dirname, "../src/bak");
  const upWidgetName = capitalizeFirstLetter(widgetName);
  const lowWidgetName = decapitalizeFirstLetter(widgetName);

  const upEntityName = capitalizeFirstLetter(entityName);
  const lowEntityName = decapitalizeFirstLetter(entityName);
  // 替换内容
  try {
    fs.removeSync(slash(bakPath));
    const globBakPath = slash(bakPath + "/**/*");

    fs.copySync(slash(path.join(__dirname, "../src/MyPluginName")), bakPath);
    await replaceFileContent(
      globBakPath,
      merge(["MyPluginName", "myPluginName", "MyEntityName", "myEntityName"]),
      [upWidgetName, lowWidgetName, upEntityName, lowEntityName]
    );
    Log.success("内容替换成功,正在替换组件名称...");
    await replaceFileName(globBakPath, "MyPluginName", upWidgetName);
    await replaceFileName(globBakPath, "myPluginName", lowWidgetName);
    await replaceFileName(globBakPath, "MyEntityName", upEntityName);
    await replaceFileName(globBakPath, "myEntityName", lowEntityName);

    // 移动到目标目录
    fs.copySync(
      bakPath,
      slash(path.resolve(process.cwd(), "./src/widgets/" + widgetName)),
      {
        overwrite: true,
      }
    );
    Log.success("组件创建成功");
    fs.removeSync(bakPath);
  } catch (err) {
    console.error(err);
  }
}

/**
 * 创建组件
 */
module.exports = createWidget;