建站
咨詢
售后
建站咨詢
新聞中心
插件已經(jīng)開源了，可以看文章末尾
console狂魔能有多狂
事情是這樣的，前段時(shí)間我加入了公司某個(gè)小項(xiàng)目組
入組第一天，我要來了項(xiàng)目權(quán)限，下載完代碼和依賴
然后npm start，打開瀏覽器控制臺(tái)，
我尼瑪，一個(gè)登陸頁面就這么多l(xiāng)og？
此刻我懷著忐忑的心情打開了自己的即將負(fù)責(zé)的模塊入口頁面：
這讓我怎么調(diào)試啊？
圖片
上圖我已經(jīng)把敏感信息屏蔽掉了(^/ω＼^)，每點(diǎn)擊下頁面就會(huì)蹦出好幾行console
全局一搜索，居然有近800多條console語句。
圖片
起初，我為了方便我調(diào)試，我把影響我調(diào)試的console一一注釋了，真是個(gè)體力活。
就在我開心了幾天后，同事在開發(fā)群里發(fā)問了，“我調(diào)試打印的console怎么不見了？”，
我說我注釋了，那么多console我沒法調(diào)試啊，然后就被好幾個(gè)同事”圍攻“了，
后來想想沒經(jīng)過人家的同意修改人家的代碼確實(shí)不對(duì)！
其實(shí)從他們的代碼來看，完全是躺平的狀態(tài)，完全放棄了公司的代碼規(guī)范，真的很讓人emo。
emo時(shí)間的思考
既然人家喜歡那樣做，我也沒辦法，emo了一會(huì)，我就尋找別的方法解決讓我強(qiáng)迫癥發(fā)作的方法。
第一種方法是如果有console就不讓提交代碼，顯然不現(xiàn)實(shí)，
第二種方法是使用去除conosle的插件，但是有個(gè)缺點(diǎn)，我的console也會(huì)被去掉，
焦慮了好久，我就想到，有沒有一種插件，在開發(fā)環(huán)境只展示開發(fā)者自己的console，但是不影響別人開發(fā)時(shí)調(diào)試。
找了好久都沒找到，那就自己動(dòng)手開發(fā)一個(gè)吧。
我的思路是
- 在每個(gè)文件中匹配console語句
- 用匹配到的行，請(qǐng)求git，查看當(dāng)前行的作者
- 如果不是我就統(tǒng)統(tǒng)刪除console之后再build
這樣既不會(huì)干擾我開發(fā)，也不會(huì)影響別人開發(fā)調(diào)試了。
上次的文章已經(jīng)介紹了vite的插件開發(fā)了，這里就不贅述了。
我們開發(fā)的插件主要是在文件編譯時(shí)，將文件中的console智能的清除，對(duì)應(yīng)的插件hook為transform?；镜慕Y(jié)構(gòu)如下。
const RemoveConsole = (): {
name: string;
enforce: 'pre';
transform: (code: string, id: string) => any;
} => {
return {
name: 'remove-console',
enforce: "pre",
transform: (code, id) => {
// todo something
return code
}
}
}接下來一步步實(shí)現(xiàn)，
匹配console語句
如果文件中存在console則進(jìn)行分析，否則返回原代碼。
分析過程：
- 按行劃分
- 分析出包含console的行
查詢git作者
主要使用child_process子進(jìn)程運(yùn)行g(shù)it命令，根據(jù)命令的返回結(jié)果分別處理，
例如我們或者當(dāng)前作者：
const userName = childProcess.execSync(
`git config user.name`,
{ encoding: 'utf-8' }
)
console.log(userName)
// mmdctjj分析每行作者，使用的git命令是
// 查看指定問價(jià)你的l1到l2行的作者詳細(xì)信息
git blame -L l1,l2 --porcelain filepath圖片
我們還需要在此基礎(chǔ)上改造下，完整的命令如下：（win不知grep命令，可以使用findstr代替）
git blame -L ${line+1},${line+1} --porcelain ${id} | grep "^author "接著從字符串中截取出作者
const author = authorInfo.slice(authorInfo.indexOf(`author `) + 7)根據(jù)當(dāng)前作者和conosle的作者是否相等。我們得出需要?jiǎng)h除的行
// 需要?jiǎng)h除的行
const removeLine = includesLines.filter(line => {
const authorInfo = childProcess.execSync(
`git blame -L ${line+1},${line+1} --porcelain ${id} | grep "^author "`,
{ encoding: 'utf-8'
)
const author = authorInfo
.slice(authorInfo.indexOf(`author `) + 7)
.split('\n')[0]
return author !== userName
})刪除console
接著我們遍歷每一行，進(jìn)行替換
const newRows = rows.map((row, idx) => {
if (removeLine.includes(idx)) {
// 正則表達(dá)式替換完整的console.log語句
return row.replace(/console\.log\((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*\)[;\n]?/g, '')
}
return row
})
const newContent = newRows.join(`\n`)
return newContent測(cè)試
我們驗(yàn)證下效果。這個(gè)文件中有多個(gè)console語句
圖片
image.png
圖片
十分完美！??！
今天的分享就到這了，感謝你的觀看，如有錯(cuò)誤的地方，歡迎指正！
最后附上我的
vite插件: rollup-plugin-remove-others-console
插件地址：https://www.npmjs.com/package/rollup-plugin-remove-others-console
github地址：https://github.com/mmdctjj/rollup-plugin-remove-others-console
webpack loader: remove-others-console-loader
loader地址：https://www.npmjs.com/package/remove-others-console-loader
github地址：https://github.com/mmdctjj/remove-others-console-loader
網(wǎng)站題目：面對(duì)躺平同事，我開發(fā)了一個(gè)插件治好了我的精神內(nèi)耗
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/dhpgpsi.html
