如何开发一个CLI工具?

一、CLI 工具本质是什么?

一句话:

👉 一个通过命令行触发的 Node 程序 + 参数解析 + 输出结果

比如:

复制代码
my-cli create project-name
my-cli build
my-cli deploy --env=prod

二、技术选型(推荐组合)

基于你现在的技术背景,推荐:

核心

  • Node.js(必须)

  • npm / pnpm(发布)

常用库

  • 参数解析:commander(最主流)

  • 交互式命令:inquirer

  • 终端美化:chalk

  • 加载动画:ora

  • 执行 shell:execa


三、最小可用 CLI(一步一步做)

1. 初始化项目

复制代码
mkdir my-cli
cd my-cli
npm init -y

2. 声明 CLI 入口

package.json 里加:

复制代码
{
  "name": "my-cli",
  "bin": {
    "my-cli": "./bin/index.js"
  }
}

👉 这一步非常关键:

以后你可以直接在终端输入 my-cli


3. 创建入口文件

复制代码
mkdir bin
touch bin/index.js

写入:

复制代码
#!/usr/bin/env node

console.log('Hello CLI');

加权限:

复制代码
chmod +x bin/index.js

4. 本地测试 CLI

复制代码
npm link

然后运行:

复制代码
my-cli

四、加入命令解析(核心能力)

用 commander:

复制代码
npm install commander

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

const program = new Command();

program
  .name('my-cli')
  .description('一个示例 CLI 工具')
  .version('1.0.0');

program
  .command('create <name>')
  .description('创建项目')
  .option('-t, --template <type>', '模板类型')
  .action((name, options) => {
    console.log('项目名:', name);
    console.log('模板:', options.template);
  });

program.parse();

运行:

复制代码
my-cli create demo -t react

五、加入交互(更像真实工具)

复制代码
npm install inquirer

const inquirer = require('inquirer');

async function ask() {
  const answers = await inquirer.prompt([
    {
      type: 'input',
      name: 'projectName',
      message: '项目名称?'
    }
  ]);

  console.log(answers);
}

ask();

六、真实 CLI 会做什么?

你可以做这些(很实用):

1️⃣ 项目脚手架(最常见)

类似:

  • create-react-app

  • vite

功能:

  • 拉模板

  • 自动安装依赖

  • 初始化 git

👉 核心:

复制代码
const execa = require('execa');

await execa('git', ['clone', repo]);

2️⃣ 自动化工具

比如:

  • 一键部署

  • 自动打包

  • 发布 npm


3️⃣ 内部效率工具(你现在项目很适合)

比如:

  • 自动生成 API 文件

  • 自动生成表格配置

  • 自动生成 React 页面模板


七、发布到 npm(让别人也能用)

复制代码
npm login
npm publish

别人就可以:

复制代码
npm install -g my-cli
my-cli create demo

八、进阶能力(重点)

你可以逐步升级 CLI:

✅ 1. 下载远程模板

复制代码
npm install download-git-repo

✅ 2. 动态配置模板

  • handlebars / ejs

✅ 3. 多命令拆分结构

复制代码
commands/
  create.js
  build.js
  deploy.js

✅ 4. 支持 TypeScript

直接用 TS 写 CLI(强烈推荐)


九、一个真实 CLI 结构(推荐你照这个写)

复制代码
my-cli/
├── bin/
│   └── index.js
├── commands/
│   ├── create.js
│   └── build.js
├── utils/
│   └── log.js
├── package.json

十、给你一个练手项目(很适合你)

你可以做一个:

👉 "性能平台 CLI 工具"

结合你现在的项目:

功能:

  • perf create page → 自动生成页面模板

  • perf create api → 自动生成接口文件

  • perf report → 自动导出 Excel / PDF

  • perf mock → 启动 mock 服务

这会直接提升你工作效率,也能写进简历(非常加分)。

相关推荐
鱼樱前端33 分钟前
别再自己拼凑了!这款 Vue 3.5+ 严肃产品级组件库,把 AI 对话、工作流和复杂数据全包了!
javascript·vue.js·github
Listen·Rain1 小时前
Vue3:setup详解
前端·javascript·vue.js
kyriewen2 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh3 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
jump_jump3 小时前
Kysely 源码解剖:类型安全 SQL 如何走到 AST
node.js·orm·源码阅读
星栈5 小时前
深度复盘:比 EventLoop 更隐蔽!Node 微任务堆积引发的线上接口雪崩事故
后端·node.js
索西引擎5 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
万敏5 小时前
Vue3 全栈实战第二周:Pinia + Vite + Router + axios 完整记录
vue.js·node.js·全栈
小雪_Snow6 小时前
JavaScript 中的三种常用事件
开发语言·前端·javascript
蓝胖子酱6 小时前
在 Electron 中用 electron-store 实现加密存储与自定义格式文件
前端·javascript·数据库