笔记 - chalk 使用

chalk 是一个npm 包，用来对控制台 console.log 的内容进行样式包装。

chalk的用法非常简单，安装后，直接使用即可。

--------------- update --------------------

在chalk的github issue 中，有几个关于 Browser support? 的类似问题。。

从回答来看，chalk并不打算支持浏览器环境。hmmm...  请忽略下面关于浏览器环境的各种尝试。

--------------- 分隔线 --------------------

但是，在不同的环境，chalk的表现并不一致。

node环境

1. 安装： npm install chalk

2. 在文件(比如check-test.js)中引入chalk，并编写需要输出的内容：

// chalk-test.js

const chalk = require('chalk');

console.log(chalk.green('hello world !'));

console.log(chalk.red.bgWhite.underline('bg white and has underline !'));

3. 执行： node chalk-test.js, 即可得到运行结果

可以看到，不需要进行额外的设置，就可以看到chalk所产生的效果。非常ok~

 

下面则是我们日常要面对的浏览器环境

浏览器环境

同上，我们执行 安装，引入，使用chalk，三个步骤，

运行，可以看到： 

设置完全没有生效。这是为什么？带着这个问题我继续搜索了一下，发现有同学已经遇到过了，并给出了

解决方案：

方案1. 在引入chalk时，在constructor中将enabled 设置为true， 如下： ---- 经测试无效，且报错

const chalk = new require('chalk').constructor({ enabled: true });

方案2. 将chalk的enabled 设置为true， 如下： ---- 经测试无效

chalk.enabled = true;

方案3. 将chalk的 level 设置为 1 、2、 3， 如下： ---- 经测试有效，但是仍存在其他问题, underline 无效

chalk.level = 1; // level的值可以设置为 1 2 3，分别代表不同的颜色范围

 --- 为了方便背景在控制台展示，换了bgGreen

方案4. 在启动时添加FORCE_COLOR启动项，如下：  ---- 测试无效，但可能跟本地环境有关系，待进一步验证

FORCE_COLOR=true npm start // FORCE_COLOR的值也可以设置为 1、 2、 3

……

到目前为止，仅方案3能呈现我想要的基本效果，但是方案3中underline并未生效。具体的原因，需再进一步确认。

 

chalk还有些很有意思的api，继续探索吧~