Table of content
- 老生常談 Console
- 不如換種姿勢(shì)魂奥？
-
vue-pretty-logger做了什么 - 安裝方式
- 開(kāi)始使用
- 使用命令輸出
- Loader Option 配置項(xiàng)
- Example
- 提交 Issues
老生常談 Console
提起瀏覽器的 Console API菠剩，相比大家都覺(jué)得是老生常談了，在我們剛開(kāi)始學(xué)習(xí)前端到使用各種框架馳騁在前端界之間耻煤，Console 的使用頻率從來(lái)不會(huì)很低具壮，不管是通過(guò) Console.log() 打印一條信息，還是 Console.error() 去輸出錯(cuò)誤信息哈蝇，都不免接觸到 Console
但是棺妓，有時(shí)候我會(huì)覺(jué)得 Console 很無(wú)趣，不管是原生的 API炮赦，還是網(wǎng)上封裝的各種各樣的庫(kù)怜跑，都沒(méi)有什么新意，永遠(yuǎn)在幾個(gè) API 之間徘徊吠勘，而vue-pretty-logger的出現(xiàn)就是打破 Console 的限制性芬，誰(shuí)指定 Console 就必須這樣用？
vue-pretty-logger只讓你有兩點(diǎn)感受看幼，酷批旺，簡(jiǎn)單
不如換種姿勢(shì)？
來(lái)看看 Console 是怎么使用的
let num = 123
console.log(num) // result -> 123
其實(shí)不難理解诵姜，畢竟 Console 的 API 如此簡(jiǎn)單汽煮，網(wǎng)上有很多關(guān)于 Console 的具體使用方式，筆者在這里就不贅述了
再來(lái)看看 vue-pretty-logger
let num = 123 // {#}
// result -> 123
如果你不理解做了什么棚唆，接下來(lái)我會(huì)詳解暇赤，但是從表面上來(lái)講，我們不必要去多寫(xiě)一句輸出了宵凌，而且這種方式比較傾向于 Hack鞋囊，所以使用起來(lái)會(huì)很酷
vue-pretty-logger 做了什么
vue-pretty-logger 將你原來(lái)需要多寫(xiě)的一句 console.log() 簡(jiǎn)化成了 // {#} 的寫(xiě)法，在 loader 執(zhí)行期間瞎惫，獲得該注釋溜腐，并轉(zhuǎn)換為相應(yīng)的 console 進(jìn)行輸出
簡(jiǎn)單來(lái)講译株，vue-pretty-logger 做了你自己不想做的
有沒(méi)有覺(jué)得突然世界都好玩了許多，OK挺益，程序界慣例歉糜，我們來(lái)輸出一只 Hello World
安裝方式
你可以使用 npm or yarn 來(lái)安裝 vue-pretty-logger，因?yàn)?logger 本身的性質(zhì)就處于開(kāi)發(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, 也就是說(shuō)，你只需要將它配置在 webpack 對(duì)于 .vue 文件的處理 loader 之中就可以了
...
module: {
rules: [
{
test: /.vue$/,
use: [
{
'vue-loader'
},
{
'vue-pretty-logger',
options: {
...
}
}
]
}
]
}
...
需要注意的是甘耿，vue-pretty-logger 必須在 vue-loader 之前處理 .vue 文件, 所以踊兜，它必須處于 use 數(shù)組的最后一位
開(kāi)始使用
接著，你就可以在你的 .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ì)看到更多的命令
我們來(lái)看看 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>
你可以為你的注釋后面加上更多的命令來(lái)達(dá)成你的目的柱告，當(dāng)然前提是你懂得這些命令該怎么用
使用命令輸出
輸出級(jí)別命令有四個(gè)截驮，-e -d -w -i，分別代表 console 的四個(gè)輸出級(jí)別际度，error debug warn info葵袭，你可以在注釋語(yǔ)句后面加指定的命令來(lái)輸出指定的級(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，前提是該輸出語(yǔ)句擁有級(jí)別命令中的任意一種窒所，結(jié)果如下
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World')
-sign 用來(lái)給輸出的日志信息打上標(biāo)記鹉勒，比如上面的函數(shù)使用 -sign 之后的結(jié)果如下
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -sign
-count 用來(lái)輸出函數(shù)被調(diào)用的次數(shù)，同樣吵取，我們以 testFunc 來(lái)做實(shí)驗(yàn)禽额，結(jié)果如下
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -count
-time 用來(lái)記錄函數(shù)執(zhí)行所需要的時(shí)間，修改我們的函數(shù)調(diào)用皮官，結(jié)果如下
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time
我們發(fā)現(xiàn)脯倒，控制臺(tái)多打印了一行 undefined实辑，來(lái)告訴我們方法的返回值，但是我們不需要這個(gè)信息藻丢，只需要獲得方法的執(zhí)行時(shí)間徙菠，那么就需要下面的命令
-stop 停止默認(rèn)動(dòng)作，結(jié)果如下
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time -stop
-profile 為你的函數(shù)添加一個(gè) profile郁岩，相當(dāng)于 console.profile() console.profileEnd()
// 調(diào)用該函數(shù)
this.testFunc('Hello', 'World') // {#} -time -stop -profile
如果你不愿意用 // {#} 的方式來(lái)表示打印注釋，或者想要設(shè)定一個(gè)全局的 tag缺狠，那么 Option 就派上用場(chǎng)了
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 倉(cāng)庫(kù)找到 example/，倉(cāng)庫(kù)地址為 https://github.com/TaroXin/vue-pretty-logger评凝，如果你覺(jué)得vue-pretty-logger符合你的口味追葡，那不妨點(diǎn)擊一下 star，畢竟支持就是動(dòng)力
提交 Issues
如果你在使用過(guò)程中碰到了任何的疑問(wèn)奕短，歡迎提交 Issues宜肉，你的建議將讓 vue-pretty-logger 越來(lái)越完美，不過(guò)我們的發(fā)展方向只有一個(gè)翎碑，酷谬返，簡(jiǎn)單
