前言
在前端开发中，经常需要输出一些调试信息或者日志信息，而 console.log 不能满足我们的需求，因为输出的信息不够明确、可读性不够好。而且在正式环境下要及时清除一些无用的日志信息，否则会带来性能问题。因此，我们需要使用一个更好的日志输出工具。
在众多的日志输出工具中， sleek-log 是一种轻量级、插件化、可扩展的前端日志输出框架，支持多种级别的日志输出，并具有颜色区分、位置信息等功能。
这篇文章将介绍如何使用 sleek-log 包来输出日志信息。
安装
您可以使用 npm 安装 sleek-log：
npm install sleek-log --save-dev
使用
初始化
在使用 sleek-log 之前，我们需要先初始化它：
const { createLogger } = require('sleek-log');
const logger = createLogger();日志级别
sleek-log 提供以下日志级别：
tracedebuginfowarnerrorfatal
其中，trace 是最低的级别， fatal 是最高的级别。
配置
我们可以使用以下选项来配置 sleek-log：
name: 日志记录器的名称，默认为default。level: 日志级别，表示只输出该级别及以上级别的日志，默认为info。output: 日志输出方法，表示输出到哪里，默认为console.log。colors: 日志颜色配置，可以自定义不同级别日志的颜色。默认为：
{
trace: 'white',
debug: 'green',
info: 'cyan',
warn: 'yellow',
error: 'red',
fatal: 'magenta'
}使用 createLogger 函数创建的日志记录器已经使用了默认配置。
输出日志
输出日志非常简单，只需要调用日志记录器相应的方法，比如：
logger.trace('trace message');
logger.debug('debug message');
logger.info('info message');
logger.warn('warn message');
logger.error('error message');
logger.fatal('fatal message');其中，trace、debug、info、warn、error、fatal 分别对应于不同级别的日志。
位置信息
sleek-log 支持输出日志的位置信息，只需要添加以下代码：
logger.add(new Log4js.Ext.Console());
自定义输出
我们可以使用自定义函数来替代默认的 console.log，实现自己的输出方式。只需要在创建日志记录器时传入一个 output 函数即可。
示例：
-- -------------------- ---- ------- ----- - ------------ - - --------------------- -------- ----------------- - -- -- ----- ------------------- --------------------------------------- - ----- ------ - -------------- ------- ------------ --- ------------------- ---------
总结
sleek-log 是一个非常实用的日志输出工具。它支持多种级别的日志，颜色输出，位置信息和自定义输出等功能。使用 sleek-log 可以让我们更加清晰地了解我们的程序在运行中发生了什么，从而更好地进行调试和优化。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
----- - ------------ - - ---------------------
-------- ----------------- -
-- -- ----- -------------------
---------------------------------------
-
----- ------ - --------------
----- -----------
------ --------
------- -------------
------- -
------ -------
------ --------
----- -------
----- ---------
------ ------
------ ---------
-
---
------------------- ----------
------------------- ----------
----------------- ----------
----------------- ----------
------------------- ----------
------------------- ----------输出结果：
... <div>fatal message</div> <div style="color: magenta;">[myLogger] [2019-12-13T07:10:10.628Z] FATAL: fatal message</div>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f81238a385564ab6b96