前言
在现代前端开发中,命令行工具 (CLI) 已经成为开发者日常工作中不可或缺的一部分。而如何让CLI工具更加友好、直观,提供良好的用户体验?交互式命令行界面是关键。这里将介绍如何使用Enquirer 来构建交互式命令行。
Enquirer 是一个现代化、直观且用户友好的命令行提示工具库。它提供了简洁的 API 、现代化的界面以及更强大的交互功能。
开始
安装
npm install enquirer 
# or
yarn yarn add enquirer
使用
1.基本选择提示
const { Select } = require("enquirer");
const prompt = new Select({
  name: "color",
  message: "选择你喜欢的颜色",
  choices: ["红色", "黄色", "蓝色"],
});
prompt
  .run()
  .then((answer) => console.log("你选择了:", answer))
  .catch(console.error);
2.多选提示
const { MultiSelect } = require('enquirer');
const prompt = new MultiSelect({
  name: 'foods',
  message: '选择你喜欢的食物(按空格选择)',
  choices: [
    { name: 'pizza', value: '披萨' },
    { name: 'burger', value: '汉堡' },
    { name: 'sushi', value: '寿司' },
    { name: 'noodles', value: '面条' }
  ]
});
prompt.run()
  .then(answers => console.log('你选择了:', answers))
  .catch(console.error);
3.输入框提示
const { Input } = require('enquirer');
const prompt = new Input({
  name: 'username',
  message: '请输入你的用户名'
});
prompt.run()
  .then(answer => console.log('用户名:', answer))
  .catch(console.error);
4.表单输入
const { Form } = require('enquirer');
const prompt = new Form({
  name: 'user',
  message: '请填写用户信息',
  choices: [
    { name: 'firstName', message: '名' },
    { name: 'lastName', message: '姓' },
    { name: 'email', message: '邮箱' }
  ]
});
prompt.run()
  .then(value => console.log('用户信息:', value))
  .catch(console.error);
5.自动补全
const { AutoComplete } = require('enquirer');
const prompt = new AutoComplete({
  name: 'flavor',
  message: '选择你喜欢的编程语言(输入可过滤)',
  limit: 10,
  initial: 2,
  choices: [
    'JavaScript',
    'TypeScript',
    'Python',
    'Java',
    'C++',
    'C#',
    'Go',
    'Ruby',
    'Swift',
    'Kotlin'
  ]
});
prompt.run()
  .then(answer => console.log('你选择了:', answer))
  .catch(console.error);
6.自定义验证
const { Input } = require('enquirer');
const prompt = new Input({
  name: 'age',
  message: '请输入你的年龄',
  validate(value) {
    if (isNaN(value)) return '请输入数字';
    if (value < 18) return '必须年满18岁';
    return true;
  }
});
prompt.run()
  .then(answer => console.log('年龄:', answer))
  .catch(console.error);
构建一个 Cli 项目
在这里我们使用 prompt 函数构建:
const { prompt } = require("enquirer");
async function initProject() {
  const answers = await prompt([
    {
      type: "select",
      name: "type",
      message: "选择框架",
      choices: ["Vue", "React"],
    },
    {
      type: "input",
      name: "name",
      message: "输入项目名称",
      validate: (value) => (value.trim() ? true : "项目名称不能为空"),
    },
    {
      type: "confirm",
      name: "typescript",
      message: "确定要安装吗?",
    },
    {
      type: "multiselect",
      name: "features",
      message: "选择额外功能(按空格选择)",
      choices: [
        { name: "eslint", message: "ESLint代码检查" },
        { name: "prettier", message: "Prettier代码格式化" },
        { name: "tests", message: "单元测试" },
        { name: "ci", message: "CI配置" },
      ],
    },
  ]);
  console.log("\n配置汇总:");
  console.log("项目类型:", answers.type);
  console.log("项目名称:", answers.name);
  console.log("使用TypeScript:", answers.typescript ? "是" : "否");
  console.log("额外  功能:", answers.features.join(", "));
}
initProject().catch(console.error);