同事写的console.log太多令人烦恼？来手撕一个vite插件去掉它

前言

不知道各位同学在开发的过程中有没有遇到这样的一种情况：就是跟你一起合作做项目的同学调试的时候打了不少 console ，然后提交代码的时候没删。

打印得多了，可能就长成下面的样子。特别是有一些在公共的数据变化时打印，就更加惨不忍睹。

这就给我们自己调试的时候，想在控制台找到自己打印的东西比较麻烦，虽然说花点心思找一下或者搜一下也能找到，但是我为啥要花时间花心思在这上面呢？而且这么多打印的东西看着就烦。

今天，我们就写一个 vite 插件，来去掉同事写的 console.log，当然，要保留我们自己写的。

vite插件初体验

首先新建一个 remove-console-plugin 目录，在这个目录下新建一个 index.js 文件夹。在 vite 插件体系中，修改输出的代码用的是 transform 这个钩子：

export default function myPlugin() {
   
  return {
   
    name: "remove-console-plugin",
    transform(code, id) {
   
      console.log("code", code);
      return code
    },
  };
}

然后我们可以先随便改点什么东西，比如说我在 js 文件的最后加一行注释：

transform(code, id) {
   
  const url = id;
  if (url.includes("/src/") && /\.([tj]sx?|js)$/.test(url)) {
   
    return code + `\n` + "// 一行注释";
  }
  return code;
},

那么可以看到，请求回来的文件已经带上了我们加的内容。

但这里有一个问题， transform 钩子调用时，代码已经被预处理（例如通过 ESBuild 或者 TypeScript 编译器）过了。

后面我们需要分析这行代码是谁写的，因为我们做的是一个去除别人代码 console 的一个插件，所以我们需要拿到源文件的内容。

拿到源文件内容的话就要使用到 load 这个钩子函数：

load(id) {
   
  const url = id;
  if (url.includes("/src/") && /