基于区块开发（二）：命令行工具

const blockArray = blocks.map((block) => {
  const { name, value, preview } = block;
  const link = terminalLink("预览", preview);
  return {
    name: `📦  ${chalk.cyan(name)}  ${link}`,
    value: value,
  };
});

const choice = await inquirer.prompt([
  {
    type: "list",
    name: "block",
    message: `⛰  请选择区块（共 ${blockArray.length} 个 )`,
    choices: blockArray,
    pageSize: 10,
  },
  {
    type: "confirm",
    name: "cwd",
    message: `在当前目录安装区块吗？[${cwd}]`,
    default: "y",
  },
]);

// 选中的区块和安装路径
const { block, cwd: cur } = choice;

// child_process模块
const exec = cp.exec;
const spinner = ora();

// 目标目录
const dir = path.resolve(".")
// 存放区块源码仓库的临时目录
const tmpdir = path.resolve(dir, ".block");

spinner.start(`📥  获取区块`);
exec(
  `git clone --depth=1 http://git.xxx.com/xxx/block.git ${tmpdir}`
);
spinner.succeed();

spinner.start(`💻  拷贝区块`);
// 这里都block变量是用户选择都区块名称
const sourceDir = path.resolve(tmpdir, `src/block/${block}`);
exec(`cp -r ${sourceDir}/. ${dir}/${block}`);
spinner.succeed();

spinner.start(`🗑️   清理源区块文件`);
rimraf.sync(tmpdir);
spinner.succeed();

spinner.start(`👌  区块安装完成`);
spinner.succeed();

const containRoute = fs.existsSync(`${sourceDir}/routes`);

// 如果存在 routes 目录，则为多页面区块，需要处理路由逻辑
if (containRoute) {
  const re = new RegExp("^(.*/src).*", "gi");
  const result = re.exec(dir);
  let destDir;

  if (!result || !result[1]) {
    // 操作目录不包含 src 目录
    const inProjectRoot = fs.existsSync(`${cwd}/src`);

    if (!inProjectRoot) {
      throw new Error(
        "找不到 src 目录。区块包含路由配置，请在项目内运行此命令。"
      );
    }
    destDir = `${cwd}/src`;
  } else {
    destDir = result[1];
  }

  // 拷贝新的文件
  await runCmd(`cp -r ${sourceDir}/modules ${destDir}/`);
  await runCmd(`cp -r ${sourceDir}/routes ${destDir}/`);

  const files = fs.readdirSync(`${sourceDir}/routes/route`);
  if (!files || files.length === 0) {
    throw new Error("区块不包含路由文件");
  }
  // 获取路由变量名【AST】
  const routeName = getNamedExport(`${sourceDir}/routes/route/${files[0]}`);

  const i = files[0].indexOf(".tsx");
  const routeFileName = files[0].substring(0, i);
  // 插入 import 和 export（routes/index）【AST】
  insertImportAndExport(
    `${destDir}/routes/index.tsx`,
    routeName,
    routeFileName
  );
  // 获取 route-path 一级路由名【AST】
  const moduleName = getModuleName(`${destDir}/constants/route-path.ts`);
  if (!moduleName) {
    console.error(
      "❗️ " +
        chalk.red(
          `没有找到文件${destDir}/constants/route-path.ts, 需要手动将新增路由添加到app.ts`
        )
    );
  } else {
    // 更改 app.ts【AST】
    updateEntry(`${destDir}/app.ts`, moduleName, routeFileName, routeName);

    const selectedItem = blocks.find((item) => item.value === block);
    // 插入新菜单【AST】
    updateMenu(
      `${destDir}/configs/menu.js`,
      moduleName,
      routeFileName,
      selectedItem.name
    );
  }
}

// 插入 import 和 export（routes/index）
function insertImportAndExport(indexRoutePath, routeName, routeFileName) {
  let importInserted = false;

  const result = fs.existsSync(indexRoutePath);
  if (!result) {
    throw new Error(`没有找到文件：${indexRoutePath}`);
  }

  const content = fs.readFileSync(indexRoutePath, "utf8");

  const ast = parser.parse(content, {
    sourceType: "module",
    plugins: ["jsx", "typescript"],
  });

  traverse(ast, {
    ImportDeclaration(astPath) {
      // 插入import（routes/index）
      if (!importInserted) {
        const id = t.identifier(routeName);
        const sp = t.importSpecifier(id, id);
        const literal = t.stringLiteral(`./route/${routeFileName}`);
        const declare = t.importDeclaration([sp], literal);
        astPath.insertBefore(declare);
        importInserted = true;
      }
    },
    ExportDefaultDeclaration(astPath) {
      // 导出路由（routes/index）
      const properties = astPath.node.declaration.properties;
      const id = t.identifier(routeName);
      const property = t.objectProperty(id, id, false, true);
      properties.push(property);
    },
  });

  const output = generate(ast, { jsescOption: { minimal: true } });
  fs.writeFileSync(indexRoutePath, output.code);
}