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

安装

可通过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'

原文始发于微信公众号（胖蔡话前端）：Chalk实现终端样式的自定义

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223082.html

Chalk实现终端样式的自定义

安装

基础使用

相关推荐

发表回复