一、需求

因为要基于 webpack4 搞一个脚手架,需要在终端以不同的颜色输出各种信息,如 success、error、warn等

webpack 默认使用的是 webpack-log 作为日志输出,而 webpack-log 使用了下面几个依赖:

const chalk = require('chalk');
const loglevel = require('loglevelnext'); //eslint-disable-line
const logSymbols = require('log-symbols');
const uuid = require('uuid/v4');

webpack-log 的源代码:

虽然 log-symbol 能够标识不同等级的错误,但实际上是无法 color 输出的。

二、实现

一般来说,原生的 node.js 要进行 color console.log() 需要使用颜色的 16进制 进行颜色替换,但是未免太麻烦了。

colors.js 是一个用于 node.js 终端 console.log 的颜色库,每周下载量很恐怖,有 7,043,935+,这个数量比 webpack-loglog-symbol 多得多。

colors.js 文档地址:

1、安装

yarn add colors -D
# npm install  -D colors

2、colors 支持的样式

colors 不仅仅支持输出的文字颜色,还支持输出的背景颜色、字体样式等。

1)支持的字体颜色

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • gray
  • grey

2)支持的背景颜色

  • bgBlack
  • bgRed
  • bgGreen
  • bgYellow
  • bgBlue
  • bgMagenta
  • bgCyan
  • bgWhite

3)支持的样式

  • reset
  • bold
  • dim
  • italic
  • underline
  • inverse
  • hidden
  • strikethrough

4)其他

  • rainbow
  • zebra
  • america
  • trap
  • random

3、结合 webpack-log 使用

const weblog = require('webpack-log');
const colors = require('colors');
const log = weblog({name:'wds'});

log.info('Server Starting');

log.info(colors.green('Server Starting'));

上面代码的效果:

1.jpg

通过 colors 修饰之后,效果好了很多。

log.info(colors.green('Server Starting')); 除了这种写法之外,可以直接向下面这样的写法:

log.info('Server Starting'.green);

最终的效果是一样的:

2.jpg

4、单独封装 log

如果需要自己封装自己的 log,一样的效果,无非就是将 webpack-log 换成 console.log(),比如下面的示例代码:

下面代码只是简单示例,实际使用过程中,应当考虑的方面很多

const logger = {
  info(msg){
    console.log(`[Info] ${colors.green(msg)}`);
  },
  warn(msg){
    console.log(`[Warn] ${colors.yellow(msg)}`);
  },
  error(msg){
    console.log(`[Error] ${colors.red(msg)}`);
  }
};

logger.info('info message');
logger.warn('warn message');
logger.error('error message');

效果:

4.jpg

三、扩展

扩展的方式不过多去介绍,文档中说的很明白了,只说两种。

1、重命名

比如自定义 logger 的时候,使用的颜色名称是 reg/green 这些,重命名之后,可以使用 warn/info

var colors = require('colors'); 
colors.setTheme({
  silly: 'rainbow',
  input: 'grey',
  verbose: 'cyan',
  prompt: 'grey',
  info: 'green',
  data: 'grey',
  help: 'cyan',
  warn: 'yellow',
  debug: 'blue',
  error: 'red'
});
// outputs red text
console.log("this is an error".error);
// outputs yellow text
console.log("this is a warning".warn);

2、合并样式

如果需要合并样式,比如将 颜色 red 和 样式 underline 结合:

var colors = require('colors');
colors.setTheme({
  custom: ['red', 'underline']
});
console.log('test'.custom);