插件已經(jīng)開源了，可以看文章末尾

console狂魔能有多狂

事情是這樣的，前段時間我加入了公司某個小項目組

入組第一天，我要來了項目權限，下載完代碼和依賴

然后npm start，打開瀏覽器控制臺，

我尼瑪，一個登陸頁面就這么多l(xiāng)og？

此刻我懷著忐忑的心情打開了自己的即將負責的模塊入口頁面：

這讓我怎么調試?。?/p>

圖片

上圖我已經(jīng)把敏感信息屏蔽掉了(^/ω＼^)，每點擊下頁面就會蹦出好幾行console

全局一搜索，居然有近800多條console語句。

圖片

起初，我為了方便我調試，我把影響我調試的console一一注釋了，真是個體力活。

就在我開心了幾天后，同事在開發(fā)群里發(fā)問了，“我調試打印的console怎么不見了？”，

我說我注釋了，那么多console我沒法調試啊，然后就被好幾個同事”圍攻“了，

后來想想沒經(jīng)過人家的同意修改人家的代碼確實不對！

其實從他們的代碼來看，完全是躺平的狀態(tài)，完全放棄了公司的代碼規(guī)范，真的很讓人emo。

emo時間的思考

既然人家喜歡那樣做，我也沒辦法，emo了一會，我就尋找別的方法解決讓我強迫癥發(fā)作的方法。

第一種方法是如果有console就不讓提交代碼，顯然不現(xiàn)實，

第二種方法是使用去除conosle的插件，但是有個缺點，我的console也會被去掉，

焦慮了好久，我就想到，有沒有一種插件，在開發(fā)環(huán)境只展示開發(fā)者自己的console，但是不影響別人開發(fā)時調試。

找了好久都沒找到，那就自己動手開發(fā)一個吧。

我的思路是

• 在每個文件中匹配console語句
• 用匹配到的行，請求git，查看當前行的作者
• 如果不是我就統(tǒng)統(tǒng)刪除console之后再build

這樣既不會干擾我開發(fā)，也不會影響別人開發(fā)調試了。

上次的文章已經(jīng)介紹了vite的插件開發(fā)了，這里就不贅述了。

我們開發(fā)的插件主要是在文件編譯時，將文件中的console智能的清除，對應的插件hook為transform。基本的結構如下。

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
    }
  }
}

接下來一步步實現(xiàn)，

匹配console語句

如果文件中存在console則進行分析，否則返回原代碼。

分析過程：

1. 按行劃分
2. 分析出包含console的行

查詢git作者

主要使用child_process子進程運行git命令，根據(jù)命令的返回結果分別處理，

例如我們或者當前作者：

const userName = childProcess.execSync(
  `git config user.name`,
  { encoding: 'utf-8' }
)
console.log(userName)
// mmdctjj

分析每行作者，使用的git命令是

// 查看指定問價你的l1到l2行的作者詳細信息
git blame -L l1,l2 --porcelain filepath

圖片

我們還需要在此基礎上改造下，完整的命令如下：（win不知grep命令，可以使用findstr代替）

git blame -L ${line+1},${line+1} --porcelain ${id} | grep "^author "

接著從字符串中截取出作者

const author = authorInfo.slice(authorInfo.indexOf(`author `) + 7)

根據(jù)當前作者和conosle的作者是否相等。我們得出需要刪除的行

// 需要刪除的行
 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

接著我們遍歷每一行，進行替換

const newRows = rows.map((row, idx) => {
  if (removeLine.includes(idx)) {
    // 正則表達式替換完整的console.log語句 
    return row.replace(/console\.log\((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*\)[;\n]?/g, '')
  }
  return row
})
const newContent = newRows.join(`\n`)

return newContent

測試

我們驗證下效果。這個文件中有多個console語句

圖片

image.png

圖片

十分完美?。。?/p>

今天的分享就到這了，感謝你的觀看，如有錯誤的地方，歡迎指正！

最后附上我的

?? 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