如何在使用 create-react-app 創建的 React 應用程序的生產版本中刪除 console.log？

Question

如何在使用 create-react-app CRA 創建的 React 應用程序的生產版本中刪除 console.log？

Answer 1

這就是我所做的。 使用名為ConsoleHelper.js的文件創建一個helper文件夾

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

export default ConsoleHelper;

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

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

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

這個問題的簡單解決方案是幫助面臨同樣問題的其他人。

參考： https : //stackoverflow.com/a/41041580/3574669

參考中的建議，它需要在文件“webpack.config.js”中進行更改。 create-react-app 在內部使用 webpack 和配置文件，但無法在我的應用程序根目錄中添加 webpack.config.js 以應用更改。 這將需要離開 create-react-app 設置並為 webpack 和配置構建自己的設置。 經過大量探索和編寫示例代碼后，我覺得這並不容易。

因為我對 create-react-app 非常滿意，所以也不想擱置它的好處。

最后，我通過添加一行drop_console: true,在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，請勿使用此方法

Answer 4

簡單的方法是在 root 中創建一個名為logger.js的新文件

在 logger.js 中

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

現在將此 logger.js 文件導入到您的組件中。 例如我的組件文件是 demo.jsx

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;

Answer 5

這是我使用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 6

我正在使用這種方法來避免彈出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 7

對於那些不想更改他們的 webpack 配置的人，這個表達式也可以完成這項工作，並且不需要導入輔助函數：

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

對於更大或更冗長的日志應用程序，更改 webpack 配置當然是更優雅的解決方案。

對於 VS Code 用戶，我想指出設置 日志點的可能性，如果滿足您的需要，則完全省略該語句。