低代码与脚手架：打造自研的 CLI 工具自研 CLI 封装业务规范、技术收敛与全流程自动化，从“一键基建”到低代码生成，

对于 8 年经验的资深开发者来说， “懒”是最高级的赞美。如果你发现自己在一个月内重复配置了三次同样的 Lint 规则、复制了五次同样的目录结构，那么你就该意识到：你的生产力正在被这种低效的“搬运”吞噬。

在前端工程化体系中，CLI（命令行界面）工具是封装团队最佳实践、实现“一键基建”的核心武器。

一、为什么我们要“自研” CLI？

市面上已经有 create-react-app 或 vue-cli，为什么还要自研？

业务强绑定： 官方工具是普适的，但自研工具可以内置公司私有的组件库、埋点 SDK、SSO 登录逻辑和 CI/CD 模版。
技术栈收敛： 强制团队统一使用 pnpm、特定版本的 TypeScript 或 Tailwind CSS，减少维护成本。
流程自动化： 除了拉取模板，CLI 还可以集成自动创建 Git 仓库、自动分配权限、自动生成 API 代码等功能。

二、 CLI 工具的“权力清单”：核心技术选型

要写一个专业的 CLI，你需要这套成熟的 Node.js 工具链：

commander / yargs： 命令参数解析（如 my-cli create <name>）。
inquirer / prompts： 命令行交互，让用户做选择题或填空题。
chalk / picocolors： 让你的终端输出变得五颜六色（成功是绿的，报错是红的）。
ora： 终端加载动画（Spinner），让等待过程不焦虑。
execa： 增强版的 child_process，用于执行 git clone 或 pnpm install。
download-git-repo： 远程下载 GitHub/GitLab 上的模版仓库。

三、实战：三步打造一个项目脚手架

第一步：命令定义

在 bin/index.js 中定义入口，利用 commander 监听 create 命令。

JavaScript

#!/usr/bin/env node
const { program } = require('commander');

program
  .command('create <project-name>')
  .description('创建一个新的项目模板')
  .action((name) => {
    // 逻辑代码
  });

program.parse(process.argv);

第二步：交互问询

询问用户需要什么功能，比如是否需要 Pinia、是否需要 E2E 测试。

JavaScript

const questions = [
  {
    type: 'list',
    name: 'template',
    message: '请选择项目模板',
    choices: ['Vue3-Vite-Starter', 'React-Next-Admin'],
  },
  {
    type: 'confirm',
    name: 'install',
    message: '是否自动安装依赖？',
    default: true,
  }
];

第三步：模版拉取与动态渲染

静态模式： 直接从 GitLab 仓库 git clone 对应的分支。
动态模式（更高级）： 使用 handlebars 模板引擎，根据用户刚才的选择，动态修改 package.json 中的字段（如项目名称、作者、依赖项）。

四、进阶：从脚手架到低代码（Low-Code）

如果 CLI 解决的是“从 0 到 1”的基建问题，那么低代码/弱代码解决的就是“从 1 到 N”的效率问题。

Schema 驱动代码生成： 编写一个脚本，读取 Swagger/OpenAPI 的 JSON 结构，自动生成 TypeScript 类型定义和 API 请求函数。
区块（Block）复用： 类似 Ant Design Pro，通过 CLI 一键插入一个“登录页面区块”或“表格筛选区块”，而不是手动复制粘贴代码。
内联脚本（In-place Scripts）： 比如开发一个 my-cli add-page <name> 命令，它能自动在 src/views 创建文件，并顺便在 router.js 里插好路由配置。

💡 给前端开发者的硬核贴士

版本管理： CLI 自身也要记得做版本检查（比如检测到旧版本时提示 npm update -g my-cli），否则会导致团队成员用的模版版本不统一。
本地开发调试： 在 CLI 项目目录下执行 npm link（或 pnpm link --global），这样你就可以在全局直接使用你正在开发的命令了。
别忘了 chmod +x： 确保你的入口脚本有执行权限，并且顶部带有 #!/usr/bin/env node。

结语

自研 CLI 是前端工程师从“使用者”向“建设者”转变的标志。它沉淀了你的技术深度，也将你从繁琐的配置中彻底解脱。

低代码与脚手架：打造自研的 CLI 工具

一、 为什么我们要“自研” CLI？