我使用这种方法是为了避免弹出react-scripts

if (process.env.NODE_ENV === 'production') {
  console.log = () => {}
  console.error = () => {}
  console.debug = () => {}
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './styles/main.scss'

// replace console.* for disable log on production
if (process.env.NODE_ENV === 'production') {
  console.log = () => {}
  console.error = () => {}
  console.debug = () => {}
}

ReactDOM.render(<App />, document.getElementById('root'))

我创建了helper文件夹，其中包含名为ConsoleHelper.js的文件

const ConsoleHelper = (data) => {
  if (process.env.NODE_ENV === 'production') return;
  console.log(data);
}

export default ConsoleHelper;

所以，用ConsoleHelper(data)代替console.log(data);

这是我使用craco的解决方案
安装https://babeljs.io/docs/en/babel-plugin-transform-remove-console/
并将craco.config.js更新为

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
  babel: {
    // ...
  plugins: process.env.NODE_ENV === "production" ? [["transform-remove-console", { "exclude": ["error"] }]] : []
  }
}

这是我使用craco的解决方案。

"@craco/craco": "^6.0.0",
"react-scripts": "4.0.1",

craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      if (process.env.NODE_ENV === 'production') {
        // remove console in production
        const TerserPlugin = webpackConfig.optimization.minimizer.find((i) => i.constructor.name === 'TerserPlugin');
        if (TerserPlugin) {
          TerserPlugin.options.terserOptions.compress['drop_console'] = true;
        }
      }

      return webpackConfig;
    },
  },
};

简单的方法是在根目录下创建一个名为logger.js的新文件
登录器. js中

var logger = function logger(...messages){
    if(process.env.NODE_ENV === 'development'){
        console.log(messages);
    }
}
exports.logger = logger;

现在将这个logger.js文件导入到您的组件中。

import React from 'react';
var logger = require('../logger.js').logger;

class Demo extends React.Component{
    constructor(props){
    }

    render(){
        return(
            <p>Hello i am demo component</p>
        );
    }

    componentDidMount(){
        logger('I am printing only in developmet')
    }
}
export default Demo;

对于那些不想更改webpack配置的用户，这个表达式也可以完成这项工作，而且不需要导入帮助函数：

process.env.NODE_ENV !== "production" && console.log(data);

对于更大或更冗长的日志记录应用程序，更改webpack配置当然是更优雅的解决方案。

对于VS代码用户我想指出设置日志点的可能性，如果这符合您的需要，则完全省略该语句。

解决这个问题的简单方法是帮助其他面临同样问题的人。
参考：https://stackoverflow.com/a/41041580/3574669
参考文献中的建议，它需要在文件"webpack.config.js"中进行更改。* create-react-app在内部使用webpack和配置文件，但无法在我的应用程序根目录中添加webpack.config.js以应用更改。这需要离开create-react-app设置，并为webpack和配置构建自己的设置。在探索了很多并编写了示例代码之后，我发现这并不容易。*
因为我非常满意create-react-app，所以也不想忽略它的好处。
最后，我对node_modules/react-scripts/config/webpack.config.js做了一个简单的修改，添加了参考文献中提到的drop_console: true,行。参考文献中建议的代码如下所示：

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true, // << this needs only to remove console.log //
          },
        },
      }),
    ],
  },
};

这对我来说很好用，通过简单的更改，我的生产构建应用程序中没有控制台日志。
我使用的是"react-scripts": "3.0.1",

• • 注意：以后重新安装"react-scripts"时，这个新行将被清除。因此，在这种情况下，它需要再次执行相同的更改。**

* 重要提示：如果使用CI/CD，请勿使用此方法 *