用 Ora 添加加载动画

Ora 简介

在已有「commander + prompts + chalk」的 CLI 上，使用 ora 可以为「准备中」「加载中」等异步等待过程加上旋转动画，避免长时间无反馈，提升体验。

特点概览：

旋转动画 — 内置多种 spinner 样式，可自定义
状态切换 — start() 启动、succeed() / fail() / warn() / info() 结束并显示结果
与 chalk 搭配 — 结束文案可用 chalk 上色，如 spinner.succeed(chalk.green("完成"))
Promise 友好 — 适合包在异步逻辑前后使用
轻量 — 无额外依赖，ESM 友好

常用方法：

ora("提示文案").start() — 启动旋转动画
spinner.succeed("文案") — 停止并显示成功（✓）
spinner.fail("文案") — 停止并显示失败（✗）
spinner.warn("文案") — 停止并显示警告

初始化步骤

1. 安装 ora

在项目根目录安装。官方仓库: ora

npm install ora -w @repo/cg

2. 导入 ora 模块

在 src/cmd/root.ts 顶部增加 ora 的默认导入，与 commander、prompts、chalk 放在一起。

src/cmd/root.ts

import { Command } from 'commander'
import { input } from '@inquirer/prompts'
import chalk from 'chalk'
import ora from 'ora'

// ... 其他代码

3. 在 action 中加入加载动画与错误处理

在默认执行的逻辑里：先打印标题；用 ora("正在准备...").start() 启动旋转，等待约 1.5 秒后 spinner.succeed(chalk.green("准备完成"))；再执行原有的 input 与 chalk 输出。用 try/catch 捕获用户按 Ctrl+C 触发的 ExitPromptError，静默退出不打印堆栈。

src/cmd/root.ts

program
  .name('code-gen')
  .description('代码生成器 CLI 工具')
  .version('1.0.0')
  .action(async () => {
    try {
      console.log('代码生成cmd工具\n')

      // ora 加载动画 demo
      const spinner = ora('正在准备...').start()
      await new Promise((r) => setTimeout(r, 1500))
      spinner.succeed(chalk.green('准备完成'))

      const answer = await input({ message: '输入你的名字' })
      console.log('你的名字是：', chalk.blue(answer))
    } catch (err) {
      // Ctrl+C 会触发 ExitPromptError，静默退出不打印堆栈
      if (err instanceof Error && err.name === 'ExitPromptError') {
        process.exit(0)
      }
      throw err
    }
  })

说明： ora("文案").start() 返回的实例上调用 succeed("文案") 会停止旋转并显示 ✓ 与文案；ExitPromptError 来自 @inquirer/prompts，在用户中断（如 Ctrl+C）时抛出，此处选择直接 process.exit(0) 不刷屏。

4. 完整代码示例

src/cmd/root.ts

import { Command } from 'commander'
import { input } from '@inquirer/prompts'
import chalk from 'chalk'
import ora from 'ora'

const program = new Command()

program
  .name('code-gen')
  .description('代码生成器 CLI 工具')
  .version('1.0.0')
  .action(async () => {
    try {
      console.log('代码生成cmd工具\n')

      // ora 加载动画 demo
      const spinner = ora('正在准备...').start()
      await new Promise((r) => setTimeout(r, 1500))
      spinner.succeed(chalk.green('准备完成'))

      const answer = await input({ message: '输入你的名字' })
      console.log('你的名字是：', chalk.blue(answer))
    } catch (err) {
      // Ctrl+C 会触发 ExitPromptError，静默退出不打印堆栈
      if (err instanceof Error && err.name === 'ExitPromptError') {
        process.exit(0)
      }
      throw err
    }
  })

program.parse()

5. 运行测试

在项目根目录执行：

run.sh

bun run packages/cg/src/index.ts

预期效果： 先输出「代码生成cmd工具」；接着出现「正在准备...」并带旋转动画，约 1.5 秒后变为 ✓「准备完成」（绿色）；然后出现「输入你的名字」提示，输入并回车后以蓝色打印名字。若在提示时按 Ctrl+C，会静默退出且不打印堆栈。

6. 更多用法示例

// 成功 / 失败 / 警告
const s = ora('处理中...').start()
await doWork()
s.succeed(chalk.green('完成'))
// 或 s.fail(chalk.red("失败")); / s.warn(chalk.yellow("警告"));

// 换一种 spinner 样式（需查 ora 文档中的 spinner 名）
ora({ text: '加载中...', spinner: 'dots' }).start()

Git 提交

git.sh

git add .
git commit -m "feat: 使用 ora 添加加载动画与 Ctrl+C 静默退出"

On this page