如何在使用 create-react-app 创建的 React 应用程序的生产版本中删除 console.log？

Question

如何在使用 create-react-app CRA 创建的 React 应用程序的生产版本中删除 console.log？

Answer 1

我正在使用这种方法来避免弹出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'))

Answer 2

这是我使用的解决方案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;
    },
  },
};

Answer 3

这是我的解决方案使用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"] }]] : []
  }
}

Answer 4

这就是我所做的。helper使用名为的文件创建一个文件夹ConsoleHelper.js

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

export default ConsoleHelper;

而不是console.log(data)做ConsoleHelper(data);

希望这可以帮助。我控制台日志很多:)