"在反应生产构建中删除控制台日志语句？"

Question

I have a basic react app (created using create react app<\/strong> )
I have gone through a few links related such as babel plugin installation npm i babel-plugin-transform-remove-console --save<\/strong> Guide to remove console log using babel plugin<\/a>

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

Answer 1

You could try this, in src/App.js , the root component of your app:

if (process.env.REACT_APP_STAGE === 'PROD')
  console.log = function no_console() {};

Just before the return .

Answer 2

You can try those packages to override the config:

Note : from the document ofreact-app-rewired , this would break the the "guarantees" that CRA provides. So you should be careful before using it.

npm i -D customize-cra react-app-rewired babel-plugin-transform-remove-console

Modify your package.json, replace react-scripts to react-app-rewired except the reject . Once complete, your scripts should look like this:

"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-scripts eject"
}

Then create a file:

touch config-overrides.js

// config-overrides.js
const { override, addBabelPlugins } = require('customize-cra')

module.exports = override(
  addBabelPlugins(
    "transform-remove-console"
  )
)

Finally, after run npm run build , all console.log will be removed.

Also, I have another answer regarding this similar question , you can check out other answers as well.

Answer 3

@pmiranda 's solution should be changed to:

if (process.env.NODE_ENV === "production")
    console.log = function no_console() {};