chalk
提供了终端样式颜色的解决方案,一般的我们的前端启动的nodejs
服务终端返回信息都是黑白色,通过使用chalk
可以辅助我们输出自定义样式的终端颜色。本篇文章我们将结合chalk
提供的使用文档来介绍如何使用chalk
库。
当前chalk
版本号为v 5.2
版本,为纯ESM
包,使用之前需要满足如下条件:
- 如果使用
TypeScript
,则需要使用TypeScript 4.7
或更高版本。 - 如果您使用捆绑器,请确保它支持 ESM 并且您已为 ESM 正确配置它。
Nodejs
版本要求12.20
及以上
继续使用 Chalk v4
完全没问题。多年来一直很稳定。Chalk v5相较于Chalk v4对于操作的属性做了些许修改,Chalk v5 将一些属性默认导出移动到单独的命令导出。使用最新版本需要了解其修改部分:
chalk.Instance
→Chalk
chalk.supportsColor
→supportsColor
chalk.stderr
→chalkStderr
chalk.stderr.supportsColor
→supportsColorStderr
- 删除 .keyword()、.hsl()、.hsv()、.hwb() 和 .ansi() 着色方法
- 标记的模板文字支持移动到一个单独的包中:
chalk-template
-import chalk from 'chalk';
+import chalkTemplate from 'chalk-template';
-chalk`2 + 3 = {bold ${2 + 3}}`;
+chalkTemplate`2 + 3 = {bold ${2 + 3}}`;
安装
可通过npm
或yarn
实现安装:
$ npm install --save-dev chalk # 或者使用yarn
$ yarn add -D chalk
基础使用
使用的话,可以直接通过chalk包裹输出文本,通过chalk设置想要的文本内容实现自定义颜色:
import chalk from 'chalk';
console.log(chalk.blue('Hello world!'));
Chalk
使用组合式API
,支持我们可以通过链式操作访问API
,示例如下:
import chalk from 'chalk';
const log = console.log;
// 组合样式字符串和普通字符串
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
// 使用可链接的 API 组合多种样式
log(chalk.blue.bgRed.bold('Hello world!'));
//
传入多个参数
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
//
嵌套样式
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
// 嵌套相同类型的样式 (color, underline, background)
log(chalk.green(
'I am a green line ' +
chalk.blue.underline.bold('with a blue substring') +
' that becomes green again!'
));
// ES2015 模板字面量
log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);
// 在支持它的终端仿真器中使用 RGB 颜色。
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));
轻松定义您自己的主题:
import chalk from 'chalk';
const error = chalk.bold.red;
const warning = chalk.hex('#FFA500'); // Orange color
console.log(error('Error!'));
console.log(warning('Warning!'));
利用 console.log
字符串替换:
import chalk from 'chalk';
const name = 'Sindre';
console.log(chalk.green('Hello %s'), name);
//=> 'Hello Sindre'