babel-plugin-preprocessor在React 18+TypeScript环境中无法正常工作

核心问题：CRA默认不读取自定义Babel配置 #

Create React App（CRA）内置了一套固定的Babel配置，项目根目录的babel.config.json不会被自动加载，这是插件未生效的主要原因。另外你之前将directives设为false，会直接关闭插件的条件编译指令解析，这也是日志没被移除的关键错误。

推荐方案：用react-app-rewired+customize-cra覆盖CRA配置 #

1. 安装依赖

npm install react-app-rewired customize-cra babel-plugin-preprocessor --save-dev

2. 创建配置文件
   在项目根目录新建config-overrides.js，写入以下内容：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'babel-plugin-preprocessor',
    {
      // 定义编译时常量，根据环境动态控制日志是否保留
      symbols: {
        DEBUG: process.env.NODE_ENV === 'development'
      },
      directives: true // 必须启用指令解析，才能识别#if注释
    }
  ])
);

3. 修改package.json的启动脚本
   替换原有scripts，让项目通过react-app-rewired启动：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 在TSX中正确使用条件编译
   用注释指令包裹需要移除的console.log：

// #if DEBUG
console.log('仅开发环境显示的日志');
// #endif

// 未被指令包裹的日志不会被插件处理，若要移除所有console.log，可搭配babel-plugin-transform-remove-console
console.log('始终显示的日志');

备选方案：弹出CRA配置（不推荐） #

执行npm run eject可解锁CRA的全部配置，但弹出后无法再接收官方更新。弹出后在config/webpack.config.js的Babel配置段手动添加babel-plugin-preprocessor，配置逻辑和上述一致即可。

额外检查点 #

• 确认插件版本与当前CRA、Babel版本兼容
• 保证TSX中的条件编译注释格式正确（无多余空格，如// #if DEBUG而非// #if DEBUG）
• 重启开发服务器，确保配置生效

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