prompts: Node.js 命令行问答交互程序

prompts 是一个 Node.js npm 包，用来实现命令行问答程序，通常被一些 CLI 程序使用，比如 create-vite^[1] 就是使用 prompts 让用户选择哪种模板创建程序的。

初始化项目

本地创建 prompts-demos/ 目录，开始我们学习之旅。

$ mkdir prompts-demos
$ cd .prompts-demos
# 使用 VS Code 中打开当前目录
$ code .

初始化项目，安装依赖：

$ pnpm init
# 使用 ES Module 组织模块 
$ npm pkg set type="module"
# 安装 prompts
$ pnpm install prompts @types/prompts

❝

TIP：prompts 没有内置声明文件，我们通过下载类型包 @types/prompts 支持。

❞

练习

每条 Prompt 都是 PromptObject 类型对象，包含一个 type 属性，用来决定提问类型。

下面是 type 属性类型定义 PromptType 的具体取值范围。

type PromptType = "text" | "password" | "invisible" | "number" | "confirm" | "list" | "toggle" | "select" | "multiselect" | "autocomplete" | "date" | "autocompleteMultiselect";

以下我们举一些常用 type 的例子，练习 prompts 的使用。

import prompts from 'prompts'

// 练习代码

text：文本提问

console.log(
  await prompts([
    {
      type: 'text',
      name: 'projectName',
      message: 'Project Name:',
      initial: 'vite-project'
    }
  ])
)

字段含义：

name：指定当前提问在返回对象中的属性名
message：显示给用户看的提问内容
initial：用户在不输入情况下，采用的默认值

执行看下效果：

第一次我们使用默认值 vite-project，第二次我们输入了自定义项目名 hello-world。

confirm：确认提问

const defaultTargetDir = 'vite-project'
let targetDir = defaultTargetDir

console.log(
  await prompts([
    {
      type: 'text',
      name: 'projectName',
      message: 'Project Name:',
      initial: defaultTargetDir,
      onState: (state) => {
        console.log(state)
        targetDir = state.value
      }
    },
    {
      type: 'confirm',
      name: 'overwrite',
      message: `Target directory "${targetDir}" is not empty. Remove existing files and continue?`,
      initial: true
    }
  ])
)

这个例子稍微复杂一丢丢。我们先进行了一次文本提问，用这一步输入的内容拼接第二个确认问题的问题。注意，为了能够在中间过程获得提问内容，我们用了 onState 钩子函数。

字段含义：

name：指定当前提问在返回对象中的属性名
message：显示给用户看的提问内容
initial：用户在不输入情况下，采用的默认值。confirm 默认值是 false（对应 N/No），我们改为 true（对应 Y/Yes）

执行看下效果：

与 text 不同的是，confirm 的返回值是个布尔值。

select：选择项

const FRAMEWORKS = [
  {
    name: 'vanilla',
    display: 'Vanilla'
  },
  {
    name: 'vue',
    display: 'Vue'
  },
  {
    name: 'react',
    display: 'React'
  },
  {
    name: 'preact',
    display: 'Preact'
  }
]


console.log(
  await prompts([
    {
      type: 'select',
      name: 'framework',
      message: 'Select a framework:',
      choices: FRAMEWORKS.map(framework => {
        return {
          title: framework.display,
          value: framework
        }
      })
    }
  ])
)

字段含义：

name：指定当前提问在返回对象中的属性名
message：显示给用户看的提问内容
choices：选项列表，是一个数组。成员类型 { title: string, value:any }——title 是选择时展示的文本，value 表示返回值。

执行看下效果：

选择

选中

配合 `kolorist` 一起使用

目前选择框架时候，高亮文字都是一样的颜色。为了便于区分，我们可以为不通框架文字展示时显示不通颜色，这里需要借助 kolorist 工具包。

安装依赖：

$ pnpm install kolorist

修改 select 案例代码：

import prompts from 'prompts';
import {
  cyan,
  green,
  magenta,
  yellow,
} from 'kolorist'

const FRAMEWORKS = [
  {
    name: 'vanilla',
    display: 'Vanilla',
    color: yellow
  },
  {
    name: 'vue',
    display: 'Vue',
    color: green
  },
  {
    name: 'react',
    display: 'React',
    color: cyan
  },
  {
    name: 'preact',
    display: 'Preact',
    color: magenta
  }
]


console.log(
  await prompts([
    {
      type: 'select',
      name: 'framework',
      message: 'Select a framework:',
      choices: FRAMEWORKS.map(framework => {
        return {
          title: framework.color(framework.display),
          value: framework
        }
      })
    }
  ])
)

执行看下效果：

忽略此步：`type: null`

type: null 是一个特殊类型，prompts 会直接掠过这条 Prompt，通常用来根据输入做条件展示的场景。

import fs from 'node:fs'
import prompts from 'prompts'

const defaultTargetDir = 'vite-project'
let targetDir = defaultTargetDir

console.log(
  await prompts(
    [
      {
        type: 'text',
        name: 'projectName',
        message: 'Project name:',
        initial: defaultTargetDir,
        onState: (state) => {
          targetDir = state.value || defaultTargetDir
        },
      },
      {
        type: () =>
          !fs.existsSync(targetDir) ? null : 'confirm',
        name: 'overwrite',
        message: () =>
          (targetDir === '.'
            ? 'Current directory'
            : `Target directory "${targetDir}"`) +
          ` is not empty. Remove existing files and continue?`,
      },
    ]
  )
)