consola 教程

2019-09-23 16:17:13

你没看错,consola 和 console 只差一个字母,并且它们都是控制器日志输出的好帮手。console 在某些方面,使用有些局限性。consola 是一个功能更丰富,更漂亮的控制台日志输出控件。今天我们一起来学习它的

什么是 Consola ?

  • Easy to use 易于使用。

  • Fancy output with Fallback for Continuous Integration (CI) environments 具有连续集成(CI)环境的备用输出。

  • Global mockable stdout/stderr wrapper 全球mockable stdout/stderr包装。

  • Pluggable reporters  可插拔的插件。

  • Consistent Command Line Interface (CLI) experience 命令行接口(CLI)。

  • Scoped Loggers 有范围的记录日志。

安装 Consola

yarn 安装方法:

1
yarn add consola

npm 命令安装方法:

1
npm i consola

一些用法。

基本用法

1
2
3
4
5
6
7
const consola = require('consola')
// See types section for all available types
consola.start('Starting build')
consola.success('Built!')
consola.info('Reporter: Some info')
consola.error(new Error('Foo'))

图片效果如下:

Consola

输出的日志内容如下:

1
2
3
4
5
[2:17:17 PM] Starting build
[2:17:17 PM] [TEST] Log from test scope
[2:17:18 PM] Built!
[2:17:18 PM] Some info
[2:17:18 PM] Error: Foo

日志的作用域

日志的分组使用:

1
2
const logger = consola.withScope('test')
logger.info('Log from test scope'// [Test] Log from test scope

Reporter

根据不同的终端,默认情况下使用FancyReporter或BasicReporter。

  • BasicReporter

  • FancyReporter

  • JSONReporter

  • WinstonReporter

上面4个是 Consola 提供的4种可供选择的 Reporter。另外我们还可以自定义 Reporter。相关用法可以查看官方文档:https://github.com/nuxt/consola。更多 API 的用法也可以参考官方 demo 和文档。


  • 2018-03-04 10:15:33

    HTTP代理协议 HTTP/1.1的CONNECT方法

    我们平时使用HTTP协议无非就是GET、POST这些方法,但是HTTP的内容远不止那些。今天就来说说HTTP代理使用的CONNECT。这个不是在网页开发上用的,如果没兴趣就跳过吧。

  • 2018-03-05 11:30:04

    iOS wkwebkit 播放HTML5 视频 全屏问题解决

    使用html5 的video标签播放视频的时候,限制视频的尺寸,在android上是没有问题的,但是在ios上发现,视频没有开始播放的时候还是好的,但是一旦播放开是,就会全屏,非常奇怪。

  • 2018-03-07 14:35:32

    centos7下yum安装ffmpeg

    安装EPEL Release,因为安装需要使用其他的repo源,所以需要EPEL支持 yum install -y epel-release

  • 2018-03-08 09:44:12

    前端性能监控:window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能,包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:44:15

    前端性能监控:window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能,包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:47:14

    ES6,Array.fill()函数的用法

    ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组。

  • 2018-03-08 09:53:39

    document.readyState

    一个document 的 Document.readyState 属性描述了文档的加载状态。

  • 2018-03-09 02:09:23

    ArrayBuffer:类型化数组

    ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口。这些对象早就存在,属于独立的规格,ES6将它们纳入了ECMAScript规格,并且增加了新的方法。