Github: github.com/TaroXin/vue…
Table of content
- 老生常談 Console
- 不如換種姿勢？
vue-pretty-logger做了什麼- 安裝方式
- 開始使用
- 使用命令輸出
- Loader Option 配置項
- Example
- 提交 Issues
- Change Log
最新特性請關注
Change Log，新增了諸多支援，如需更多支援，請提交 Issues
老生常談 Console
提起瀏覽器的 Console API，相比大家都覺得是老生常談了，在我們剛開始學習前端到使用各種框架馳騁在前端界之間，Console 的使用頻率從來不會很低，不管是通過 Console.log() 列印一條資訊，還是 Console.error() 去輸出錯誤資訊，都不免接觸到 Console
但是，有時候我會覺得 Console 很無趣，不管是原生的 API，還是網上封裝的各種各樣的庫，都沒有什麼新意，永遠在幾個 API 之間徘徊，而vue-pretty-logger的出現就是打破 Console 的限制，誰指定 Console 就必須這樣用？
vue-pretty-logger只讓你有兩點感受，酷，簡單
不如換種姿勢？
來看看 Console 是怎麼使用的
let num = 123
console.log(num) // result -> 123
複製程式碼其實不難理解，畢竟 Console 的 API 如此簡單，網上有很多關於 Console 的具體使用方式，筆者在這裡就不贅述了
再來看看 vue-pretty-logger
let num = 123 // {#}
// result -> 123
複製程式碼如果你不理解做了什麼，接下來我會詳解，但是從表面上來講，我們不必要去多寫一句輸出了，而且這種方式比較傾向於 Hack，所以使用起來會很酷
vue-pretty-logger 做了什麼
vue-pretty-logger 將你原來需要多寫的一句 console.log() 簡化成了 // {#} 的寫法，在 loader 執行期間，獲得該註釋，並轉換為相應的 console 進行輸出
簡單來講，vue-pretty-logger 做了你自己不想做的
有沒有覺得突然世界都好玩了許多，OK，程式界慣例，我們來輸出一隻 Hello World
安裝方式
你可以使用 npm or yarn 來安裝 vue-pretty-logger，因為 logger 本身的性質就處於開發環境，所以你最好加上 -D or --dev 選項，這樣在生產環境就不會打包此程式碼
npm install -D vue-pretty-logger
// or
yarn add --dev vue-pretty-logger
複製程式碼請確認你下載的是最新版本，因為新功能的使用只在最新版本中存在
首先，你得知道一點，vue-pretty-logger 其實是一個 webpack loader, 也就是說，你只需要將它配置在 webpack 對於 .vue 檔案的處理 loader 之中就可以了
...
module: {
rules: [
{
test: /.vue$/,
use: [
{
'vue-loader'
},
{
'vue-pretty-logger',
options: {
...
}
}
]
}
]
}
...
複製程式碼需要注意的是，vue-pretty-logger 必須在 vue-loader 之前處理 .vue 檔案, 所以，它必須處於 use 陣列的最後一位
開始使用
接著，你就可以在你的 .vue 檔案之中使用 vue-pretty-logger 了，如下
<template>
<div></div>
</template>
<script>
export default {
mounted () {
const str = 'Hello World' // {#} -e
}
}
</script>
複製程式碼Perfect，成功輸出 Hello World，但是， -e，又代表什麼意思呢，該命令指定了當前的輸出級別是 error 級別，一會我們會看到更多的命令
我們來看看 vue-pretty-logger 具體可以應用到什麼地方
變數賦值
let str = 'Hello World' // {#}
// equals: console.log(str)
str = 'Goodbye World' // {#}
// equals: console.log(str)
複製程式碼函式宣告
<script>
export default {
mounted () {
}，
methods: {
testFunc (p1, p2) { // {#} -sign
// equals: console.log(p1, p2)
}
}
}
</script>
複製程式碼函式呼叫
<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>
複製程式碼你可以為你的註釋後面加上更多的命令來達成你的目的，當然前提是你懂得這些命令該怎麼用
使用命令輸出
輸出級別命令有四個，-e -d -w -i，分別代表 console 的四個輸出級別，error debug warn info，你可以在註釋語句後面加指定的命令來輸出指定的級別，如果你新增了多個級別命令，那麼優先順序為 -e > -d > -w > -i
其他命令如下
-t 你可以指定當前列印的使用應用什麼 Tag 方便你去區分繁多的 Console 內容，-t TestFunc 將會為列印結果加上一個 TestFunc 的 tag，前提是該輸出語句擁有級別命令中的任意一種，結果如下
// 呼叫該函式
this.testFunc('Hello', 'World')
複製程式碼
-sign 用來給輸出的日誌資訊打上標記，比如上面的函式使用 -sign 之後的結果如下
// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -sign
複製程式碼
-count 用來輸出函式被呼叫的次數，同樣，我們以 testFunc 來做實驗，結果如下
// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -count
複製程式碼
-time 用來記錄函式執行所需要的時間，修改我們的函式呼叫，結果如下
// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time
複製程式碼
我們發現，控制檯多列印了一行 undefined，來告訴我們方法的返回值，但是我們不需要這個資訊，只需要獲得方法的執行時間，那麼就需要下面的命令
-stop 停止預設動作，結果如下
// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time -stop
複製程式碼
-profile 為你的函式新增一個 profile，相當於 console.profile() console.profileEnd()
// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time -stop -profile
複製程式碼如果你不願意用 // {#} 的方式來表示列印註釋，或者想要設定一個全域性的 tag，那麼 Option 就派上用場了
Loader Option 配置項
hook 配置項，預設為 #, 修改 hook 就可以達到修改 // {#} 的目的，比如我想修改為 Log，那麼需要指定 hook: 'Log'，結果如下
this.testFunc('Hello', 'World') // {Log} -time -stop
複製程式碼tag 配置項，則是指定一個全域性的 Tag，你可以這樣修改，tag: 'PrettyLogger'
infoTag 配置項，指定 -i 輸出時的字首，預設為 INFO
infoTagStyle 配置項, 指定輸出的樣式，樣式格式為 css 格式
error warn debug 的配置項與 info 一致
Example
你可以在 Github 倉庫找到 example/，倉庫地址為 github.com/TaroXin/vue…，如果你覺得vue-pretty-logger符合你的口味，那不妨點選一下 star，畢竟支援就是動力
提交 Issues
如果你在使用過程中碰到了任何的疑問，歡迎提交 Issues，你的建議將讓 vue-pretty-logger 越來越完美，不過我們的發展方向只有一個，酷，簡單
Change Log
歡迎提交 Issues，你的需求與問題都會逐步得到完成與修復
V0.9.0檢視Issues
// 新增對於 js 檔案的支援，如下配置
{
test: /\.js$/,
use: ['babel-loader', 'vue-pretty-logger/lib/in-js'],
exclude: /node_modules/
}
複製程式碼V0.8.8檢視Issues
// 新增 -from 引數，如下使用
this.testFuncCall(p1, p2) // {#} -sign -from
// equals:
console.log(`p1: ${p1}, p2: ${p2}`)
const result = this.testFuncCall(p1, p2)
console.log(`result: ${result}`)
複製程式碼V0.8.7檢視Issues
// 新增對於 await 語句的支援，處理方式與函式呼叫一致
await test() // {#} -e -sign -time
// equals: const result = await test(); console.error(`result: ${result}`)
複製程式碼V0.8.6檢視Issues
// 支援回撥函式的呼叫，輸出回撥函式引數
this.$bus.$on('gotData', (data) => { // {#} -i -sign
// equals: console.info(`data: ${data}`)
})
this.$bus.$on('gotData', function (data) { // {#} -i -sign
// equals: console.info(`data: ${data}`)
})
複製程式碼V0.8.5檢視Issues
fix bug: Can not read property 'content' of null
複製程式碼