chalk开源库

---

前言

前段时间看别人分析vue cli的基础配置时，看到了这个第三方库，感觉很好玩，正好自己也在学习node基础，于是自己赶紧玩一下。玩的路上凑巧碰到了它的两个小兄弟，顺路一起玩一下。

chalk作用与使用

这个chalk的源码可以去github上自己看，官网上还有示例，使用起来很简单。

作用：在浏览器控制台或终端中修改打印的字符串样式，如字体样式，字体颜色等
缺点：好像不支持渐变色，只有单色
安装： npm install chalk

在项目中引入使用如下所示，使用方式很多，可去官网查看示例。

console.log(chalk.blue('Hello world!'));  // 打印出的字体为蓝色
console.log(chalk.red('Hello') + ' World' + chalk.red('!')); // 还支持拼接
console.log(chalk.pink.bgRed.bold('Hello world!')); // 支持链式调用，字体变色、加粗、背景色

chalk在node中使用的版本坑

我是在node项目中与前端项目中都玩了下这个库，首先在node项目中直接npm install chalk后，使用require方法导入使用发现报错：

去官网查看发现从chalk从5.0+版本开始，只支持ESModule格式，chalk是使用export default导出的，chalk之前的版本支持CommomJs格式，chalk是使用module.exports导出的。我直接安装默认是5.0.1最新版，require引入所以报错。

于是我将chalk版本换为4.x版本，npm install chalk@4.x 发现可以正常使用，效果如下：

chalk在node中使用场景

可在终端输出不同值时使用不同颜色的字体，有一个醒目的效果，比如终端打印错误时使用红色字体等。自己也可以封装小函数，按情况返回不同颜色的字体。

const chalk = require('chalk');
const hint = (...info) => {
  console.log(chalk.blue(info));
}
const error = (...info) => {
  console.log(chalk.red(info));
}

vue cli搭建的项目不支持chalk

我使用 vue cli脚手架创建了一个vue2项目，安装了chalk最新版本5.0.1版，引入时发现直接报错，这个错误我解决不掉，不知道什么问题。

于是我退而求其次，安装了5.0.0版本，5.x就这两个版本！引入后发现不报错，但是没起作用！奶奶个腿的，我直接安装4.x版本，使用require方式导入，还是不起作用！
我…我又使用vuecli脚手架创建了vue3项目试一下，发现和vue2猫了个咪的一样！我放弃了…

webpack搭建前端项目支持chalk

难受，我觉得肯定可以在浏览器控制台使用，我把我很久之前自己用webpack搭建的vue项目掏了出来，试了一下，它变色了变色了！

总结

所以我说嘛，chalk的作用就是在浏览器控制台或终端中修改打印的字符串样式，虽然在浏览器控制台上打印没啥意义，一般也用不到，主要是用在node终端打印的。它的两个小兄弟下次再说吧，困了。