胖蔡叨叨叨
你听我说

Chalk实现终端样式的自定义

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}}`;

安装

可通过npmyarn实现安装:

$ 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'

相关资源

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Chalk实现终端样式的自定义
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏