最常用且可靠的方式是使用 babel-plugin-transform-remove-console 插件,仅在 production 环境下启用,通过 NODE_ENV 判断,并可配合 Terser 的 drop_console 实现双重清理。

在生产环境中自动移除 console.log 等调试语句,最常用且可靠的方式是使用 Babel 插件 @babel/plugin-transform-console(推荐)或更通用的 babel-plugin-transform-remove-console。关键在于**只在生产构建时启用该插件**,避免影响开发体验。
安装并配置插件
推荐使用社区维护良好、支持最新语法的 babel-plugin-transform-remove-console:
- 安装插件:
npm install --save-dev babel-plugin-transform-remove-console - 在
babel.config.js中按环境条件启用:
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
// 只在 production 环境下启用
process.env.NODE_ENV === 'production' && 'babel-plugin-transform-remove-console'
].filter(Boolean) // 过滤掉 false 值,避免配置错误
};
确保构建时 NODE_ENV 正确设置
Babel 配置依赖 NODE_ENV 环境变量判断是否为生产环境。常见构建工具中需显式设置:
- Webpack:在
mode: 'production'下会自动设NODE_ENV=production;如手动调用 Babel CLI,需加cross-env NODE_ENV=production babel ... - Vue CLI / Create React App:内置处理,无需额外配置
- 自定义脚本(如 package.json 中):
"build": "cross-env NODE_ENV=production babel src -d lib"
插件行为说明与注意事项
该插件默认移除所有 console.xxx() 调用(包括 log、error、warn、info 等),但不会删除 console 的属性访问或赋值语句(如 console.log = () => {} 不会被处理)。
立即学习“Java免费学习笔记(深入)”;
- 支持白名单:可通过插件选项保留特定方法,例如只删
log而保留error:['babel-plugin-transform-remove-console', { exclude: ['error'] }] - 不处理模板字符串或变量拼接中的
console,仅匹配直接调用表达式 - 若代码已通过 TypeScript 编译或其它工具提前处理,需确保 Babel 在其后执行
替代方案:使用 terser(推荐配合使用)
Babel 移除是语法层清理,而最终压缩阶段可用 Terser 进一步擦除残留(如内联函数中未被 Babel 捕获的 console):
- Webpack 中 terser-webpack-plugin 默认在 production mode 下启用,并可配置
drop_console: true - Vite 或 Rollup 也支持类似选项
- 双重保障更稳妥,尤其适合复杂 AST 场景


















