使用Webpack/Babel时if语句被错误添加否定符(!)的问题求助

问题重现 #

原始按钮点击事件内代码：

if (condition1 || condition2 || condition3)
   return;

经Webpack+Babel打包后，Chrome/Firefox调试器中显示为：

if (!(condition1 || condition2 || condition3))
   return;

排查步骤 #

1. 确认问题真实性（排除Source Map误差） #

不要依赖调试器的source map展示，直接打开打包生成的bundle.js文件，搜索对应的条件判断语句：

• 若bundle.js内代码无否定符，说明是source map生成不精准导致的显示错误
• 若bundle.js内确实存在!(...)，则问题出在构建流程的代码转换环节

2. 检查代码压缩/混淆配置 #

Webpack生产模式默认启用TerserPlugin做代码压缩，部分压缩规则可能对逻辑表达式做反转优化。检查webpack配置的optimization字段：

// 示例：检查自定义压缩规则
optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        // 排查是否存在逻辑反转相关配置
      }
    })
  ]
}

可临时设置mode: 'development'禁用压缩，重新打包验证是否为压缩插件导致。

3. 排查Babel插件/预设的影响 #

针对你当前的Babel配置，做以下排查：

• 检查是否有未贴出的Babel配置（如.babelrc、babel.config.js中的额外插件）
• 逐步禁用Babel插件：先移除@babel/plugin-transform-runtime，再单独禁用某个预设，确认是否是特定插件/预设触发了逻辑反转

4. 检查其他代码转换工具 #

排查是否有其他loader或插件在构建中修改代码：

• 比如eslint-loader、prettier-loader等格式化工具，是否存在自动修改逻辑的规则
• 检查webpack.ProvidePlugin之外的全局注入代码，是否干扰了条件判断逻辑

5. 检查业务代码上下文 #

确认按钮点击事件是否被包装或拦截：

• 排查是否有高阶组件、装饰器或第三方UI库修改了事件回调的执行逻辑
• 检查condition1/2/3的定义，确认是否在其他地方被重写或注入了否定逻辑

内容的提问来源于stack exchange，提问作者user1790300