在 ReactJs 生产模式下停用 Console.log 和 Logger 或 Redux 存储答案

【问题标题】：Deactivate Console.log and Logger or the Redux store in ReactJs production Mode在 ReactJs 生产模式下停用 Console.log 和 Logger 或 Redux 存储
【发布时间】：2019-05-18 00:27:57
【问题描述】：

我正在部署我的第一个 ReacctJs 应用程序，我想停用我的应用程序中显示在浏览器控制台中的任何数据。这包括 redux 存储 Logger、console.logs 代码等。

我已经尝试了几种可以在谷歌上找到的方法。

我的店铺代码如下

const loggerMiddleware = createLogger({
                        predicate: (getState, action) => process.env.NODE_ENV !== 'production'
            });

export const store = createStore(
    rootReducer,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    )
);

我已经安装了 transform-remove-console 包并在我的根文件夹中创建了一个 .babelrc，内容如下

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

以上代码都不会删除控制台中的内容。请对此提出任何想法，我们将不胜感激。

【问题讨论】：

对于console.logs，我很讨厌删除它们。如果你在基于 mac 或 linux 的系统上，你可以设置一个像这样的别名 findlogs='grep resources/js/* -e '\''console\.log'\'' -rn' - 我总是使用 Laravel/ReactJS 因此resources/js/* 但你可以将它更改为你的路径或只使用 ./* 来在当前目录中搜索
杰米，如果我切换回开发呢？？它不会是有效的。除了它实际上是一个大项目，我不是那里唯一的程序员

标签： reactjs react-redux console.log

【解决方案1】：

如果您使用terser-webpack-plugin 或uglify-webpack-plugin，您可以使用drop_console 选项https://github.com/mishoo/UglifyJS2#compress-options

来自 webpack.config.js

的一些代码示例

module.exports = {
  // ... other options
  optimization: {
    minimize: !DEV,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          // ... other terser options
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },  
}

这里有一些讨论Can uglify-js remove the console.log statements?

【讨论】：