我们在开发项目或者开发node cli 工具，希望我们的终端输出友好的日志提示，带有颜色，背景等等
今天推荐一个美化终端输出的js 库 picocolors
vite也在用哟~
特点
- 无依赖
- 比
chalk库 小14倍 ， 快 2倍 - PostCSS、SVGO、Stylelint 和 Browserslist 等流行工具都在使用
- 支持 node 6+ 和浏览器， 支持 CJS 和ESM 项目
- 自带TypeScript 类型声明。
NO_COLOR友好。
安装
shell
npm i picocolors
pnpm add picocolors快速上手
js
import pc from "picocolors"
console.log(
pc.green(`How are ${pc.italic(`you`)} doing?`)
)Picocolors 提供了一个对象，其中包括各种文本着色和格式设置功能
文字颜色
blackredgreenyellowbluemagentacyanwhitegray
js
console.log(`I see a ${pc.red("red door")} and I want it painted ${pc.black("black")}`)背景颜色
bgBlackbgRedbgGreenbgYellowbgBluebgMagentabgCyanbgWhite
js
console.log(
pc.bgBlack(
pc.white(`Tom appeared on the sidewalk with a bucket of whitewash and a long-handled brush.`)
)
)其他
除了设置背景颜色和文字颜色，还可以设置其他效果
dim, bold, hidden, italic, underline, strikethrough, reset, inverse
实用的工具函数
isColorSupported返回 boolean , 当前环境，是否支持使用 颜色编码和格式
js
import pc from "picocolors"
if (pc.isColorSupported) {
console.log("Yay! This script can use colors and formatters")
}createColors(enabled)返回具有手动定义颜色支持配置的新 API 对象的函数
js
import pc from "picocolors"
let { red, bgWhite } = pc.createColors(options.enableColors)使用 picocolors 替代 chalk
- 第一步， 替换导入的包
js
- import chalk from 'chalk'
+ import pico from 'picocolors'- 第二步，替换使用
js
- chalk.red(text)
+ pico.red(text)- 如果存在链式调用，则替换为 嵌套的写法
js
- chalk.red.bold(text)
+ pico.red(pico.bold(text))- 可以使用
colorize-template来替换 chalk 的标记模板文字
这个一般使用的比较少
js
+ import { createColorize } from 'colorize-template'
+ let colorize = createColorize(pico)
- chalk.red.bold`full {yellow ${"text"}}`
+ colorize`{red.bold full {yellow ${"text"}}}`另外， chalk 地址： 传送门