Github: https://github.com/TaroXin/vue-pretty-logger

Table of content

• 老生常談 Console
• 不如換種姿勢(shì)？
• vue-pretty-logger 做了什么
• 安裝方式
• 開始使用
• 使用命令輸出
• Loader Option 配置項(xiàng)
• Example
• 提交 Issues

老生常談 Console

提起瀏覽器的 Console API，相比大家都覺得是老生常談了，在我們剛開始學(xué)習(xí)前端到使用各種框架馳騁在前端界之間，Console 的使用頻率從來不會(huì)很低，不管是通過 Console.log() 打印一條信息，還是 Console.error() 去輸出錯(cuò)誤信息，都不免接觸到 Console

但是，有時(shí)候我會(huì)覺得 Console 很無趣，不管是原生的 API，還是網(wǎng)上封裝的各種各樣的庫，都沒有什么新意，永遠(yuǎn)在幾個(gè) API 之間徘徊，而vue-pretty-logger的出現(xiàn)就是打破 Console 的限制，誰指定 Console 就必須這樣用？

vue-pretty-logger只讓你有兩點(diǎn)感受，酷，簡單

不如換種姿勢(shì)？

來看看 Console 是怎么使用的

let num = 123
console.log(num) // result -> 123

其實(shí)不難理解，畢竟 Console 的 API 如此簡單，網(wǎng)上有很多關(guān)于 Console 的具體使用方式，筆者在這里就不贅述了

再來看看 vue-pretty-logger

let num = 123 // {#}
// result -> 123

如果你不理解做了什么，接下來我會(huì)詳解，但是從表面上來講，我們不必要去多寫一句輸出了，而且這種方式比較傾向于 Hack，所以使用起來會(huì)很酷

vue-pretty-logger 做了什么

vue-pretty-logger 將你原來需要多寫的一句 console.log() 簡化成了 // {#} 的寫法，在 loader 執(zhí)行期間，獲得該注釋，并轉(zhuǎn)換為相應(yīng)的 console 進(jìn)行輸出

簡單來講，vue-pretty-logger 做了你自己不想做的

有沒有覺得突然世界都好玩了許多，OK，程序界慣例，我們來輸出一只 Hello World

安裝方式

你可以使用 npm or yarn 來安裝 vue-pretty-logger，因?yàn)?logger 本身的性質(zhì)就處于開發(fā)環(huán)境，所以你最好加上 -D or --dev 選項(xiàng)，這樣在生產(chǎn)環(huán)境就不會(huì)打包此代碼

npm install -D vue-pretty-logger
// or
yarn add --dev vue-pretty-logger

請(qǐng)確認(rèn)你下載的是最新版本，因?yàn)樾鹿δ艿氖褂弥辉谧钚掳姹局写嬖?/p>

首先，你得知道一點(diǎn)，vue-pretty-logger 其實(shí)是一個(gè) webpack loader, 也就是說，你只需要將它配置在 webpack 對(duì)于 .vue 文件的處理 loader 之中就可以了

...
module: {
    rules: [
        {
            test: /.vue$/,
            use: [
                {
                    'vue-loader'
                },
                {
                    'vue-pretty-logger',
                    options: {
                        ...
                    }
                }
            ]
        }
    
    ]
}
...

需要注意的是，vue-pretty-logger 必須在 vue-loader 之前處理 .vue 文件, 所以，它必須處于 use 數(shù)組的最后一位

開始使用

接著，你就可以在你的 .vue 文件之中使用 vue-pretty-logger 了，如下

<template>
    <div></div>
</template>

<script>
    export default {
        mounted () {
            const str = 'Hello World' // {#} -e    
        }
    }
</script>

Perfect，成功輸出 Hello World，但是， -e，又代表什么意思呢，該命令指定了當(dāng)前的輸出級(jí)別是 error 級(jí)別，一會(huì)我們會(huì)看到更多的命令

我們來看看 vue-pretty-logger 具體可以應(yīng)用到什么地方

變量賦值

    
    let str = 'Hello World' // {#}
    // equals: console.log(str)
    str = 'Goodbye World' // {#}
    // equals: console.log(str)

函數(shù)聲明

<script>
    export default {
        mounted () {
            
        }，
        methods: {
            testFunc (p1, p2) { // {#} -sign
                // equals: console.log(p1, p2)
            }
        }
    }
</script>

函數(shù)調(diào)用

<script>
    export default {
        mounted () {
            this.testFunc(1, 'Hello') // {#} -stop -time
            // equals: const result = this.testFunc(1, 'Hello'); console.log(result)
        }，
        methods: {
            testFunc (p1, p2) { // {#} -i -t TestFunc
                
            }
        }
    }
</script>

你可以為你的注釋后面加上更多的命令來達(dá)成你的目的，當(dāng)然前提是你懂得這些命令該怎么用

使用命令輸出

輸出級(jí)別命令有四個(gè)，-e -d -w -i，分別代表 console 的四個(gè)輸出級(jí)別，error debug warn info，你可以在注釋語句后面加指定的命令來輸出指定的級(jí)別，如果你添加了多個(gè)級(jí)別命令，那么優(yōu)先級(jí)為 -e > -d > -w > -i

其他命令如下

-t 你可以指定當(dāng)前打印的使用應(yīng)用什么 Tag 方便你去區(qū)分繁多的 Console 內(nèi)容，-t TestFunc 將會(huì)為打印結(jié)果加上一個(gè) TestFunc 的 tag，前提是該輸出語句擁有級(jí)別命令中的任意一種，結(jié)果如下

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World')

-i -t TestFunc

-sign 用來給輸出的日志信息打上標(biāo)記，比如上面的函數(shù)使用 -sign 之后的結(jié)果如下

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -sign

image

-count 用來輸出函數(shù)被調(diào)用的次數(shù)，同樣，我們以 testFunc 來做實(shí)驗(yàn)，結(jié)果如下

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -count

image

-time 用來記錄函數(shù)執(zhí)行所需要的時(shí)間，修改我們的函數(shù)調(diào)用，結(jié)果如下

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time

image

我們發(fā)現(xiàn)，控制臺(tái)多打印了一行 undefined，來告訴我們方法的返回值，但是我們不需要這個(gè)信息，只需要獲得方法的執(zhí)行時(shí)間，那么就需要下面的命令

-stop 停止默認(rèn)動(dòng)作，結(jié)果如下

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time -stop

image

-profile 為你的函數(shù)添加一個(gè) profile，相當(dāng)于 console.profile() console.profileEnd()

// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time -stop -profile

如果你不愿意用 // {#} 的方式來表示打印注釋，或者想要設(shè)定一個(gè)全局的 tag，那么 Option 就派上用場了

Loader Option 配置項(xiàng)

hook 配置項(xiàng)，默認(rèn)為 #, 修改 hook 就可以達(dá)到修改 // {#} 的目的，比如我想修改為 Log，那么需要指定 hook: 'Log'，結(jié)果如下

this.testFunc('Hello', 'World') // {Log} -time -stop

tag 配置項(xiàng)，則是指定一個(gè)全局的 Tag，你可以這樣修改，tag: 'PrettyLogger'

infoTag 配置項(xiàng)，指定 -i 輸出時(shí)的前綴，默認(rèn)為 INFO

infoTagStyle 配置項(xiàng), 指定輸出的樣式，樣式格式為 css 格式

error warn debug 的配置項(xiàng)與 info 一致

Example

你可以在 Github 倉庫找到 example/，倉庫地址為 https://github.com/TaroXin/vue-pretty-logger，如果你覺得vue-pretty-logger符合你的口味，那不妨點(diǎn)擊一下 star，畢竟支持就是動(dòng)力

提交 Issues

如果你在使用過程中碰到了任何的疑問，歡迎提交 Issues，你的建議將讓 vue-pretty-logger 越來越完美，不過我們的發(fā)展方向只有一個(gè)，酷，簡單