React生产环境Webpack/Babel未移除console.log的问题排查

我来帮你分析下问题所在，以及对应的解决办法：

核心原因：Babel没识别到production环境变量 #

你的.babelrc配置逻辑是对的——只在production环境下启用transform-remove-console，但问题在于**webpack -p不一定能让Babel正确读取到NODE_ENV=production的环境变量**，尤其是在Windows系统下，或者你的webpack配置没有明确把这个变量传递给Babel。

Babel的env预设默认会优先读取BABEL_ENV环境变量，若这个变量不存在，才会读取NODE_ENV。当你执行webpack -p时，webpack本身会把内部的process.env.NODE_ENV设为production，但这个变量不一定能被Babel的配置捕获到，导致它仍然默认使用development环境，自然不会加载移除console的插件。

解决步骤 #

1. 明确设置NODE_ENV环境变量（跨平台方案） #

推荐使用cross-env包来跨平台统一设置环境变量，避免Windows和Linux/macOS的命令差异：

• 先安装cross-env作为开发依赖：

  npm install cross-env --save-dev
  

• 修改package.json里的scripts配置：

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack -d --watch",
    "build": "cross-env NODE_ENV=production webpack -p"
  }
  

这样无论什么系统，Babel都能准确读取到NODE_ENV的值，从而在生产构建时自动启用transform-remove-console插件。

2. 规范插件安装位置（可选但推荐） #

你把babel-plugin-transform-remove-console放在了dependencies里，其实这个插件只在构建阶段需要，生产环境运行代码时完全不需要它，建议移到devDependencies：

npm uninstall babel-plugin-transform-remove-console --save
npm install babel-plugin-transform-remove-console --save-dev

3. 检查webpack配置是否覆盖Babel设置 #

如果你的webpack.config.js里的babel-loader配置了自定义options，可能会覆盖.babelrc的设置。比如存在类似这样的代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: ['env', 'stage-0', 'react']
          // 这里没有设置env配置，会覆盖掉.babelrc的env规则
        }
      }
    ]
  }
}

这种情况下，你需要把env配置移到options内，或者移除options让Babel自动读取.babelrc的配置。

验证是否生效 #

执行npm run build后，打开构建后的js文件搜索console.log，如果已经被移除，就说明配置生效了。

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