大多数团队都会要求不能在生产环境输出业务侧的内容，但是往往业务开发人员会有疏漏，所以需要在工程化环境中，整体来管理console.log。我最近也是接到这样一个需求，整理了一下实现方案。

不同团队，不同场景，不同风格中，移除生产环境console.log的方案众多，我以 Nextjs 项目为背景介绍几种主流的，基本都是通用方案。

使用Babel插件

可以使用babel-plugin-transform-remove-console插件在构建时自动移除所有console语句。

1. 安装插件

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

2. 在项目根目录创建或修改.babelrc文件：

json
{
  "presets": ["next/babel"],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

这样配置后，只有在生产环境构建时才会移除console语句。

重写console对象

通过重写console对象来实现移除console.log是一种可行的方案。这种方法的核心思想是在运行时替换原生console对象的方法。

js
if (process.env.NODE_ENV === 'production') {
  // 重写console.log方法为空函数
  console.log = () => {};
}

写在项目的入口文件中，如果使用Nextjs的App Router，可以写在app/layout.tsx中

使用ESLint规则

可以使用ESLint来在开发过程中提示或禁止使用console语句。

1. 确保已安装ESLint：

bash
npm install eslint --save-dev

2. 在.eslintrc.js文件中添加规则：

js
module.exports = {
  // 其他配置...
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  },
};

使用TypeScript编译选项

如果项目有用到TypeScript，可以利用TypeScript的编译选项来移除console语句。

在tsconfig.json中添加以下配置：

json
{
  "compilerOptions": {
    // 其他配置...
    "removeComments": true,
    "stripInternal": true
  }
}

自定义日志工具

创建一个自定义的日志工具，可以根据环境变量决定是否输出日志。

js
// utils/logger.ts
const logger = {
  log: (...args: any[]) => {
    if (process.env.NODE_ENV !== 'production') {
      console.log(...args);
    }
  },
  error: (...args: any[]) => {
    // 错误日志在生产环境中也可能需要保留
    console.error(...args);
  },
  // 其他日志方法...
};

export default logger;

然后在项目中使用logger.log()替代console.log()。

总结

综合看更推荐Babel插件的方案

1. 在编译时自动处理，不需要手动修改代码，console.log调用完全从bundle中移除
2. 只在生产环境中移除console语句，开发环境保持不变
3. 实现简单，配置一次即可