babel-plugin-transform-remove-console在Create React App项目中无法移除console.log求助

Create React App（CRA）默认会忽略项目根目录的自定义.babelrc文件，它使用内置的Babel配置体系，所以直接添加.babelrc不会生效，以下是几种可行的解决方案：

方案一：使用react-app-rewired + customize-cra #

1. 安装依赖

npm install react-app-rewired customize-cra babel-plugin-transform-remove-console --save-dev

2. 根目录创建config-overrides.js文件

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

// 仅在生产环境移除console.log
module.exports = override(
  process.env.NODE_ENV === 'production' && addBabelPlugins('transform-remove-console')
);

3. 修改package.json中的scripts命令
   将原有start、build、test命令中的react-scripts替换为react-app-rewired：

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

方案二：使用craco（CRA官方推荐的配置工具） #

1. 安装依赖

npm install @craco/craco babel-plugin-transform-remove-console --save-dev

2. 根目录创建craco.config.js文件

module.exports = {
  babel: {
    plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
  }
};

3. 修改package.json中的scripts命令
   将原有命令中的react-scripts替换为craco：

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

方案三：直接在package.json中配置Babel #

无需额外工具，直接在package.json中添加Babel配置：

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-remove-console"
  ]
}

⚠️ 注意：这种配置会在所有环境（包括开发）移除console输出，如果只想在生产环境生效，建议结合环境变量工具做条件判断，或使用前两种方案。

额外注意事项 #

• 若使用Babel 7+，建议安装@babel/plugin-transform-remove-console替代旧版插件，安装命令为npm install @babel/plugin-transform-remove-console --save-dev，配置时插件名改为@babel/plugin-transform-remove-console。
• 修改配置后必须重启开发服务器才能生效。
• 生产环境需执行npm run build命令，开发模式下部分配置可能不会触发。

内容的提问来源于stack exchange，提问作者Muhammad Bilal Arshad