移除生产环境所有console.log
大多数团队都会要求不能在生产环境输出业务侧的内容,但是往往业务开发人员会有疏漏,所以需要在工程化环境中,整体来管理console.log。我最近也是接到这样一个需求,整理了一下实现方案。
不同团队,不同场景,不同风格的前提下,移除生产环境console.log
的方案众多,我以 Nextjs
项目为背景介绍几种主流的,基本都是通用方案。
使用Babel插件
可以使用babel-plugin-transform-remove-console
插件在构建时自动移除所有console
语句。
- 安装插件
npm install babel-plugin-transform-remove-console --save-dev
- 在项目根目录创建或修改
.babelrc
文件:
{"presets": ["next/babel"],"env": {"production": {"plugins": ["transform-remove-console"]}}
}
这样配置后,只有在生产环境构建时才会移除console
语句。
重写console对象
通过重写console
对象来实现移除console.log
是一种可行的方案。这种方法的核心思想是在运行时替换原生console
对象的方法。
if (process.env.NODE_ENV === 'production') {// 重写console.log方法为空函数console.log = () => {};
}
写在项目的入口文件中,如果使用Nextjs
的App Router
,可以写在app/layout.tsx
中
使用ESLint规则
可以使用ESLint
来在开发过程中提示或禁止使用console
语句。
- 确保已安装
ESLint
:
npm install eslint --save-dev
- 在
.eslintrc.js
文件中添加规则:
module.exports = {// 其他配置...rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',},
};
使用TypeScript编译选项
如果项目有用到TypeScript
,可以利用TypeScript
的编译选项来移除console
语句。
在tsconfig.json
中添加以下配置:
{"compilerOptions": {// 其他配置..."removeComments": true,"stripInternal": true}
}
自定义日志工具
创建一个自定义的日志工具,可以根据环境变量决定是否输出日志。
// 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
插件的方案
- 在编译时自动处理,不需要手动修改代码,
console.log
调用完全从bundle
中移除 - 只在生产环境中移除
console
语句,开发环境保持不变 - 实现简单,配置一次即可