@babel/plugin-transform-react-jsx 不能删调试代码因仅做语法转换、不分析语义；需自定义插件匹配 console、debugger 和 process.env 条件判断，并前置声明以确保 ast 可识别。
为什么 @babel/plugin-transform-react-jsx 不能直接删掉 console.log 和调试代码
因为 Babel 插件默认只做语法转换，不执行语义分析。像 console.log、debugger、if (process.env.NODE_ENV === 'development') 这类逻辑，Babel 不会主动推断其运行时值——它看到的是字面量字符串或未求值的表达式。必须显式告诉 Babel：在生产环境里，这些节点可以安全移除。
如何编写一个精准匹配开发专用逻辑的 visitor
核心是识别三类常见冗余模式，并用 AST 节点类型 + 路径上下文双重判断，避免误删：
-
CallExpression节点中，callee.name === 'console'且callee.object?.name === 'console'（兼容console.log和window.console.warn） -
DebuggerStatement节点直接删除 -
IfStatement中，测试条件为process.env.NODE_ENV === 'development'或process.env.DEBUG等常量表达式，且该表达式在构建时可静态求值（需配合@babel/plugin-transform-undefined-to-void或预定义process.env）
示例片段（关键逻辑）：
export default function({ types: t }) {
return {
visitor: {
CallExpression(path) {
const { callee } = path.node;
if (
t.isMemberExpression(callee) &&
t.isIdentifier(callee.object, { name: 'console' }) &&
t.isIdentifier(callee.property)
) {
path.remove();
}
},
DebuggerStatement(path) {
path.remove();
},
IfStatement(path) {
const test = path.node.test;
if (t.isBinaryExpression(test) && t.isIdentifier(test.left)) {
// 检查是否为 process.env.NODE_ENV === 'development'
if (
t.isMemberExpression(test.left) &&
t.isIdentifier(test.left.object, { name: 'process' }) &&
t.isIdentifier(test.left.property, { name: 'env' }) &&
t.isMemberExpression(test.right) &&
t.isStringLiteral(test.right.property, { value: 'development' })
) {
path.replaceWith(path.node.consequent);
}
}
}
}
};
}
为什么必须在 .babelrc 中靠前声明该插件
Babel 插件执行顺序影响 AST 形态。如果自定义插件放在 @babel/preset-env 后面，某些语法（如可选链、空值合并）可能已被转译成更复杂的结构，导致原始 console 调用被包裹进辅助函数或 IIFE，visitor 就匹配不到。
- 正确顺序：
['./plugins/remove-dev-logic', '@babel/preset-env'] - 同时确保
process.env.NODE_ENV在解析阶段已注入，推荐用@babel/plugin-transform-inline-environment-variables配合{ 'process.env.NODE_ENV': '"production"' } - 若项目用 Webpack，注意不要让
DefinePlugin和 Babel 插件重复处理同一变量，否则可能提前折叠导致 AST 匹配失效
扫描结果不可信？你需要补充 AST 层级的副作用检查
单纯删除 console 是安全的，但有些“看似无害”的开发逻辑其实有副作用：比如调用 validateForm() 仅用于开发报错，但函数内部修改了全局状态；或者 if (DEBUG) { localStorage.clear() }。Babel 插件无法自动识别这类隐式副作用。
真正可靠的剔除，需要结合：
- 手动白名单：只允许删
console.*、debugger、明确标记的__DEV__块 - 禁止自动删任意函数调用，哪怕它出现在
if (process.env.NODE_ENV === 'development')分支里 - 对不确定节点加
// @remove-in-prod注释，用正则预处理辅助识别（比纯 AST 更可控）
最易被忽略的一点：插件本身不校验模块导入。如果某文件 import { logError } from './utils/debug';，而 logError 只在开发环境使用，这个 import 语句和对应导出仍会留在 bundle 里——得配合 webpack 的 sideEffects: false 或 unused 分析才能彻底清理。
