前言
在前端开发中，经常需要输出一些调试信息，来定位代码中的问题。通常我们会使用 console.log 来输出调试信息。但是在开发过程中，一些方法仅在发布时才需要输出调试信息，此时使用 console.log 很不方便，而 npm 包 rogger 可以很好地解决这个问题。
rogger 简介
rogger 是一个优秀的前端日志组件，它可以输出各种等级的日志信息，如 debug、info、warn、error 等。此外，rogger 还支持多种日志存储方式，包括本地存储、远程存储以及多种定制存储。它的使用简单且功能强大，非常适合在前端开发中使用。
安装
使用 npm 安装 rogger 十分简单。在终端中进入项目根目录，运行以下命令即可：
npm install rogger
使用
引入
使用 npm 安装完 rogger 之后，我们需要先在代码中引入它。在需要使用的 TS/JS 文件的头部，加入以下代码：
import rogger from 'rogger';
配置
接下来我们需要配置 rogger。我们可以通过创建一个 Logger 实例来进行配置：
const logger = rogger.create({
// 配置项
});其中，create 方法接受一个配置对象。具体配置项如下：
level：日志等级，默认为'debug'，可选值包括'debug'、'info'、'warn'、'error'和'fatal'。storage：日志存储方式。默认为'console'，可选值包括'console'、'localStorage'和'sessionStorage'。除此之外，还可以自定义日志存储方式，这里不做详细介绍。logFormat：日志格式化函数，默认为：function logFormat(time, level, message) { return `[${time}] [${level.toUpperCase()}] ${message}`; }可在这里自定义日志格式。
输出日志
rogger 的使用非常简单。我们只需要调用 logger 实例的相应方法即可。
logger.debug('这是一个 DEBUG 日志');
logger.info('这是一个 INFO 日志');
logger.warn('这是一个 WARN 日志');
logger.error('这是一个 ERROR 日志');
logger.fatal('这是一个 FATAL 日志');持久化存储
除了默认的控制台输出外，rogger 还支持将日志信息存储到本地或者远程服务器上。其中，通过 localStorage 和 sessionStorage 存储方式存储的日志信息可以在浏览器控制台中查看。
-- -------------------- ---- -------
----- ------ - ---------------
-- ----
------ --------
-- ------
-------- ---------------
-- -------
---------- ------ ------ -------- -- -------- ---------- ------------
---
------------------ ----- -----在控制台中，打开 Application -> Local Storage，可以看到一个名为 Logger 的键值对，其中 value 即为我们存储的日志信息。同理，使用 'sessionStorage' 存储方式，可以在 Session Storage 中查看日志信息。
如果需要将日志信息存储到远程服务器上，可以改写 storage 配置项为一个定制的存储方式。具体方法请查看官方文档。
总结
rogger 是一个强大而简洁的前端日志组件。它的使用非常简单，同时支持多种日志存储方式。在前端开发中，我们可以使用它来输出各种等级的日志信息，帮助我们在开发过程中更快地定位问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dbc81e8991b448db7b6