prefix-log-loader

让你在使用console.logAPI 进行调试的时候更加方便。

1. 自动捕获console.log的入参,将其作为打印结果前缀展示在控制台
2. 设定默认前缀样式，提供 4 种可选样式

Getting Started

To begin, you'll need to install prefix-log-loader:

npm install --save-dev prefix-log-loader

or

yarn add -D prefix-log-loader

or

pnpm add -D prefix-log-loader

Then add the plugin to your webpack config. For example:

Example

全局config1

vue.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "prefix-log-loader",
            options: {},
          },
        ],
      },
    ],
  },
}

demo1.js

console.log(null)
console.log(undefined)
console.log(true)
console.log("hello world")
console.log(10086)

demo2.js

const time = new Date()
const arr = [1, 2, 3]
const person = {
  name: "Hello World",
  age: 16,
  others: {
    grade: 9,
  },
}
console.log(time)
console.log(arr)
console.log(arr[2])
console.log(person)
console.log(person.name)
console.log(person.others)
console.log(person.others.grade)

全局config2

vue.config2.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "prefix-log-loader",
            options: {
              type: "success",
              textWrap: true,
            },
          },
        ],
      },
    ],
  },
}

demo1.js

console.log(null)
console.log(undefined)
console.log(true)
console.log("hello world")
console.log(10086)

demo2.js

const time = new Date()
const arr = [1, 2, 3]
const person = {
  name: "Hello World",
  age: 16,
  others: {
    grade: 9,
  },
}
console.log(time)
console.log(arr)
console.log(arr[2])
console.log(person)
console.log(person.name)
console.log(person.others)
console.log(person.others.grade)

局部config

vue.config2.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "prefix-log-loader",
            options: {
              type: "info"
            },
          },
        ],
      },
    ],
  },
}

demo.js 实现在代码中个性化的控制

console.log(null,'info')
console.log(undefined,'success')
console.log(true,'warning')
console.log("hello world",'danger')

Options

| 选项 | 类型 | 默认值 | 可选值 | 描述 | | ----------- | ------- | ------ | --------------------------- | ----------------------------- | | type | String | info | info,success,warning,danger | 前缀样式 | | textWrap | Boolean | false | 单元格 3 | 日志是否换行 | | customStyle | String | null | 例如: 'color: red' | 这是一个 CSS 对象的字符串形式 |