npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chivy

v3.0.1

Published

可配置的前端日志打印工具.

Downloads

126

Readme

chivy

TypeScript Build Status Coverage Status Npm Package Info Downloads

综述

chivy 是一个可配置的前端日志打印工具, 让你可以按照级别和模块管理你的 console.log, 或者通过自定义 driver 完成将控制台打印转发到后台等高级操作.

安装

npm install chivy

使用

配置

chivy 使用 konph 进行配置, konph 用法见: https://www.npmjs.com/package/konph

配置项:

  • chivy-level: 当前网页 log 级别, 低于此级别的日志将不会打印. 可填写整数, 默认为 0. 也可填字符串, 字符串到整数换算规则如下(不区分大小写):

DEBUG: 0 INFO: 1 WARN: 2 ERROR: 3 MUTE: 4

  • chivy-modules: 被打开的模块名. 可填一个数组, 或者用","隔开的字符串. 默认为['**']

chivy-modules 中的 module 名使用"/"分割, 每一段称为一个 section, 匹配时以 section 为单位从左向右匹配. chivy-modules 中的 module 名支持单 section 通配符"*"和多 section 通配符"**", 通配符和其他字符不能混用, 一个 section 要么是通配符, 要么是其他字符.

  • chivy-driver-flags: driver 打印配置. 类型为形如['color', 'level', 'module', 'time']的数组, 可以通过增删元素选择打印方式或字段:
    • color: 彩色打印.
    • level: 打印日志级别.
    • module:打印模块名称.
    • time:打印日志时间.

注意:由于 driver 可以自定义实现, 此处的 flags 元素和元素解释也可自定义, 由自定义 driver 接收.

配置例子:

window.__Konph = {
  "chivy-level": "warn",
  "chivy-modules": ["**"], // 这样配置会打开所有module
  "chivy-driver-flags": ["color", "level", "module"]
};

代码示例

import Logger from "chivy";

const log = new Logger("project/module");

log.debug("Debug message!");
log.info("Info message!");
log.warn("Warn message!");
log.error("Error message!");

自定义

Logger 通过 Driver 执行打印, Filter 执行过滤. 通过依赖注入, 可以通过自定义 Driver 和 Filter 的方式自定义 chivy 的行为.

例如:

import Logger, { IDriver, IFilter } from "chivy";

class Driver implements IDriver {
  // ...
}

class Filter implements IFilter {
  // ...
}

Logger.injector.Driver = Driver;
Logger.injector.Filter = Filter;

const log = new Logger("foo/bar");

IDriver:

/**
 * 日志打印接口.
 *
 * @export
 * @interface IDriver
 */
export interface IDriver {
  /**
   * 打印日志.
   *
   * @param {Level} level 日志级别
   * @param {string} moduleName 模块名
   * @param {Array} params 其他参数
   *
   * @memberof Driver
   * @instance
   */
  log(level: Level, moduleName: string, ...params: any[]): void;
}

IFilter:

/**
 * 日志过滤器接口.
 *
 * @export
 * @interface IFilter
 */
export interface IFilter {
  /**
   * 过滤日志.
   *
   * 可以通过赋值Logger.injector.logFilter替换.
   *
   * @param {Level} level 日志级别
   * @param {Path} moduleName 模块名
   * @returns {boolean} 需要打印返回true, 否则返回false
   */
  exec(level: Level, moduleName: Path): boolean;
}

其中 Path 是对使用"/"分隔的路径字符串的封装, 提供了 equal, match 和 toString 三个方法, 支持通配符. 如果外部需要使用, 可以通过如下代码引入:

import { IFilter, Path } from "chivy";

class Filter implements IFilter {
  exec(level: Level, moduleName: Path): boolean {
    return moduleName.match("foo/bar/**/Foobar");
  }
}