Node.js16 TypeScript环境下cli-progress进度条不显示问题

核心问题原因 #

你的代码存在3个直接导致进度条不显示的问题：

1. 进度值更新逻辑错误
   forEach循环的索引idx从0开始，你初始化进度条时当前值已经设为0，第一次循环调用bar1.update(0)不会触发任何进度变更；最后一次循环的idx值为games.length - 1，进度永远无法到达你设置的总长度，就直接执行了stop()。
2. 同步逻辑阻塞终端渲染
   cli-progress的进度条渲染依赖Node.js事件循环调度，你当前的循环是纯同步逻辑，执行过程中会阻塞事件循环，进度条的重绘任务完全没有机会执行，所有更新操作会被积压直到stop()被调用，进度条直接被清理，视觉上就像完全没有显示。
3. 导入兼容风险
   如果你的TS配置没有开启esModuleInterop，默认导入的cliProgress可能是undefined，运行时会直接报错无法初始化进度条。

修复方案 #

1. 纯同步逻辑场景（如你当前示例的简单属性赋值） #

这种场景下业务逻辑会在几毫秒内执行完成，进度条本身就会快速走完，修正进度值即可正常触发渲染：

// 如果运行提示cliProgress is not a function，替换为 import * as cliProgress from "cli-progress"
import cliProgress from "cli-progress";    

export const UpdateTags = (games:any[]) => {
    const bar1 = new cliProgress.SingleBar({}, cliProgress.Presets.shades_classic);
    const total = games.length;
    bar1.start(total, 0);

    games.forEach((game, idx) => {
        game.tag = "game " + idx;
        // 修正进度值，从1开始累加，最后一次刚好到达总进度
        bar1.update(idx + 1);
    });

    bar1.stop();
};

2. 含异步IO的实际业务场景（如接口请求、文件读写） #

这类场景需要用异步循环写法，给事件循环留足调度空间，才能看到进度条逐帧推进的效果：

import cliProgress from "cli-progress";    

export const UpdateTags = async (games:any[]) => {
    const bar1 = new cliProgress.SingleBar({}, cliProgress.Presets.shades_classic);
    const total = games.length;
    bar1.start(total, 0);

    for (let idx = 0; idx < total; idx++) {
        const game = games[idx];
        // 替换为实际业务逻辑，比如接口请求、文件读写
        await new Promise(resolve => setTimeout(resolve, 50));
        game.tag = "game " + idx;
        bar1.update(idx + 1);
    }

    bar1.stop();
};

额外排查项 #

• 确认运行环境是交互式TTY终端：如果在CI非交互环境运行、将输出重定向到文件、使用不支持ANSI转义码的IDE输出面板，cli-progress会默认禁用渲染，不会显示进度条
• 确认TS配置：tsconfig.json中开启esModuleInterop: true，避免模块导入异常
• 确认依赖安装完整：删除node_modules和锁文件后重新执行npm install，排除依赖安装不全的问题

内容的提问来源于stack exchange，提问作者phongyewtong