自定义控制台输出实用工具

目标

提供一种简易的方式自定义控制台输出，快捷定义项目的输出样式，从而输出高辨识度的控制台输出文本。 提供 Chalk 类似兼容的方式对输出内容进行处理（Browser's Chalk）

理念

遵循开闭原则，提供默认预置样式与样式串联叠加能力，同时开放样式自定义与样式 Alias 的设置。

重要说明 ⚠️

为了保持API调用的浏览器兼容性与输出内容的可读性，此实用工具在非现代浏览器（IE等）上会使用 原始格式 输出，请留意。 为了保持跨浏览器兼容性，您使用的样式描述 CSS 文本串的类型定义最好限定在下述列表内

• background 与其全写版本。
• border 与其全写版本。
• border-radius
• box-decoration-break
• box-shadow
• clear 和 float
• color
• cursor
• display
• font 与其全写版本。
• line-height
• margin
• outline 与其全写版本。
• padding
• text-transform 这类 text-* 属性
• white-space
• word-spacing 和 word-break
• writing-mode

效果演示

bc.log(bc.bgMagenta.white.lighter.large('hello world'))

bc.log(bc.bgBlack.white.bold.larger('hello world'))

bc.log(bc.bgCyan.black.largest.asTag('hello world'))

bc.log(bc.bgMagenta.white.lighter.massive.asTag('hello world'))

bc.log(bc.cyan.bgBlack('hello world'))

bc.log(bc.asWarning.strikethrough('hello world'))

bc.log(bc.asAlert.underline('hello world'))

bc.log(bc.asMarquee('hello world'))

使用方式

先安装 bchalk 包

# 使用 yarn
yarn add bchalk --save
# 使用 npm
npm install bchalk

初始化有两种方式，您可以直接使用我们直接提供的默认 browserChalk 实例

import { browserChalk as bc } from 'bchalk'
// 定制
bc.setupRootStyle('color: red;')
  .setupStyle('asTag', bc.bold.padded.rounded)
  .setupStyle(
    'asMarquee',
    'font-size: 30px; padding: 20px 30px 20px 30px; display: inline-block; border: 3px solid gold;',
  )
// 输出
bc.log(bc.bgCyan.black.largest.asTag('hello world'))
// 覆盖 window.console (不建议)
window.console = bc

或者为了在多处使用，您也可以使用自定义全局单例初始化

import BrowserChalk from 'bchalk'
// 实例化定制
const bc = BrowserChalk.getInstance('color: red;')
    .setupStyle('asTag', bc.bold.padded.rounded)
    .setupStyle(
        'asMarquee',
        'font-size: 30px; padding: 20px 30px 20px 30px; display: inline-block; border: 3px solid gold;',
    )
// 输出
bc.log(bc.bgCyan.black.largest.asTag('hello world'))
// 覆盖 window.console (不建议)
window.console = bc

API

BrowserChalk constructor

interface BrowserChalkInitOptions {
  rewriteOriginalConsole?: boolean
}
/**
 * Creates an instance of BrowserChalk.
 * @param {string} [rootStyle='']
 * @param {BrowserChalkInitOptions} [options]
 * @memberof BrowserChalk
 */
public constructor (rootStyle: string = '', options?: BrowserChalkInitOptions)

BrowserChalk.getInstance

/**
 * getInstance 单例获取器
 * @static
 * @param {string} [rootStyle]
 * @param {BrowserChalkInitOptions} [options]
 * @returns
 * @memberof BrowserChalk
 */
public static getInstance(rootStyle?: string, options?: BrowserChalkInitOptions)

BrowserChalk.setupRootStyle

/**
 * @API
 * 设置根样式（默认样式）
 * @param {string} cssString
 * @memberof BrowserChalk
 */
public setupRootStyle (cssString: string = '')

BrowserChalk.setupStyle

/**
 * @API
 * 添加样式，可以是样式字符串，或者别的样式的引用
 * e.g:
 * 	bc.setupStyle('asWarning', 'backgroundColor: yellow')
 * 	bc.setupStyle('asHint', bc.bgBlack.white.bold.larger)
 * @param {string} styleAlias
 * @param {(string | BrowserChalkStyle)} [styleContent='']
 * @returns
 * @memberof BrowserChalk
 */
public setupStyle (styleAlias: string, styleContent: string | BrowserChalkStyle = '')

预置样式表

BrowserChalk内置了多个预置样式，您可完全不需要定制便能使用，如下所示：

字体颜色

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

背景颜色

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

字形

• bold
• lighter
• italic
• strikethrough
• underline
• large
• larger
• largest
• massive

块样式

• padded
• rounded

我们还提供了扩展的浏览器 CSS 颜色预置集，您可单独取用：

import { setupStyle as setupTanStyle } from 'bchalk/dist/extend/tan.esm'
// 注册
const bc = BrowserChalk.getInstance()
setupTanStyle(bc)
// 使用
bc.log(bc.bgTan.black('hello world'))
bc.log(bc.bgWhite.tan('hello world'))