前端 - 你们一般在源码中是如何处理 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

在源码中处理 `console.log` 代码的方式通常依赖于项目的具体需求和开发团队的偏好。以下是一些常见的处理方式：

1. **构建工具移除**：
   在开发阶段保留 `console.log` 用于调试，通过构建工具（如 Webpack、Rollup 等）在生产环境中自动移除这些日志。这通常通过配置相应的插件或 loader 来实现，例如使用 `terser-webpack-plugin` 进行代码压缩时，可以配置其移除 `console` 语句。

2. **手动注释或删除**：
   在代码审查或准备发布之前，手动注释或删除不再需要的 `console.log` 语句。这种方法适用于小型项目或团队，但对于大型项目来说可能不够高效。

3. **保留部分 `console.log`**：
   对于某些关键的调试信息或日志记录，可能会选择保留部分 `console.log` 语句，特别是在复杂的逻辑或性能监控方面。这些日志通常会被放置在特定的文件或模块中，并附有明确的注释说明其用途。

4. **使用更高级的日志系统**：
   采用如 `log4js`、`winston` 等日志库，这些库提供了更丰富的日志级别（如 info、warn、error 等）和配置选项，允许开发者在开发、测试和生产环境中以不同的方式处理日志。

5. **环境变量控制**：
   通过环境变量控制 `console.log` 的输出。例如，可以在代码中添加一个全局开关，根据当前环境（开发、测试、生产）决定是否输出日志。

不同的项目对 `console.log` 的处理方式可能有所不同，这取决于项目的规模、团队的偏好以及项目的具体需求。在接手新项目时，建议查阅项目的文档或与开发团队沟通，以了解他们是如何处理日志记录的。