如何为npm scripts中的echo命令添加视觉样式？
2026-5-27
给npm脚本的echo提示添加样式（颜色、粗细、背景色）
嘿，这个需求太棒了！给构建流水线的阶段提示加上视觉样式，能让你一眼就看清当前执行到哪一步，大大提升调试和查看日志的效率。下面我给你分享两种在Bash环境下实现的方法，直接就能用到你的package.json脚本里：
方法1：用原生ANSI转义码（无需额外依赖）
Bash终端支持ANSI转义序列来控制文本样式，格式是：\033[<样式代码>m，结尾必须用\033[0m重置回默认样式，避免后续命令的输出也带上样式。
常用样式代码速查：
- 格式控制：
1（加粗）、4（下划线）、7（反显） - 前景色（文字颜色）：
30（黑）、31（红）、32（绿）、33（黄）、34（蓝）、35（紫）、36（青）、37（白） - 背景色：
40（黑）、41（红）、42（绿）、43（黄）、44（蓝）、45（紫）、46（青）、47（白）
你的package.json修改示例：
把preclean的echo命令改成这样，就能输出加粗绿色文字+黑色背景的醒目提示：
{ "scripts": { "clean": "rimraf a-directory/", "preclean": "echo -e \"\n\\033[1;32;40m[ Cleaning build directories ]\\033[0m\n\"" } }
注意：在
package.json里，反斜杠需要转义成\\，同时要加-e参数让echo解析转义字符。
方法2：用chalk包（更易读，适合复杂样式）
如果你不想记繁琐的ANSI代码，推荐用chalk这个专门处理终端样式的npm包，语法更直观，可读性更强，还能自动兼容不同终端环境。
步骤：
- 先安装
chalk作为开发依赖：
npm install --save-dev chalk
- 修改
package.json的脚本，用npx chalk直接生成样式化文本：
{ "scripts": { "clean": "rimraf a-directory/", "preclean": "npx chalk bold green bgBlack '\n[ Cleaning build directories ]\n'" } }
这样写出来的代码一目了然，不用关心转义细节，维护起来也更轻松。
更多样式示例：
- 加粗红色错误提示：
npx chalk bold red '[ Error: Build failed ]' - 黄色背景黑色警告：
npx chalk black bgYellow '[ Warning: Deprecated script ]' - 下划线蓝色信息：
npx chalk underline blue '[ Starting production build ]'
不管用哪种方法，执行npm run clean时，你的提示信息都会从平淡的文字变成醒目的视觉标记，再也不会被一堆日志淹没啦！
内容的提问来源于stack exchange，提问作者Glynn Smith
相关产品推荐
相关产品推荐
