你们一般在源码中是如何处理 console.log 代码的?

Question

接手过十多个别人的项目,发现不同项目对 console.log 的处理都不同,有的项目源码不保留 console.log(不是指通过构建工具移除)。有的对 console.log 进行注释,有的会对部分 console.log 保留不进行注释。

Answer 1

项目中的 console 太多了，想着去除所有的 console
这个插件可以做到。

npm install babel-plugin-transform-remove-console --save-dev

但是线上希望排查时能查看日志又不行了。
我们可以尝试重写 console函数。

private debug(): void {
   const { location, console } = window;
   const isDev = process.env.NODE_ENV === 'development';
   const isDug = location.href.includes('debug');
   if (!isDev && !isDug) {
     for (const consoleItems in console) {
       if (Reflect.has(console, consoleItems)) {
         const propName = consoleItems as keyof typeof console;
         window.console[propName] = (() => { }) as Function as any;
       }
     }
   }
 }

这样就可以在线上环境 url添加 debug参数实现日志查看了

Answer 2

开源项目，会在 git commit 的时候把所有辅助开发和调试的 console 删除，减少无意义的代码出现（除非一些必要的输出，比如说一些版本输出和异常抛出）。避免一些不必要的diff出现。

如果是自己工作上的内部项目，那么就会比较粗糙了。单纯借助 TerserPlugin 之类的插件来移除 debugger 和 console 下的一些方法。这样即使自己或者同事在提交代码时忘记了删除，在项目构建 production 时脚手架也会删除对应的代码。

最好的肯定是在提交代码之前就删除，比如说借助 pre-commit 在代码提交前做代码检查，把 debugger 和 console.log 自动移除。
如果是团队协作，也要看成员是否都能够接受这样的流程。很多人很厌烦项目上的lint和Git提交时的代码检查。虽然没有什么不好的，只是觉得开发体验会变得非常不愉快。