Question

我有一个基本的React应用（使用 create react app 创建）
我浏览了一些相关的链接，例如babel插件安装 npm i babel-plugin-transform-remove-console-保存 Guide to remove console log using babel plugin

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

我已经将上述配置包含到babel.rc文件中，但是仍然不能解决我的问题。我可以在生产版本中看到日志。请让我知道我要去哪里了。

Answer 1

您可以在src/App.js中尝试应用的根组件：

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

就在return之前。

Answer 2

您可以尝试使用这些包来覆盖配置：

注意：从 react-app-rewired 的文档来看，这会破坏 CRA 提供的“保证”。所以使用前要小心。

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

修改您的 package.json，将 react-scripts 替换为 react-app-rewired，除了 reject。完成后，您的脚本应如下所示：

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

然后创建一个文件：

touch config-overrides.js

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

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

最后，运行 npm run build 后，所有 console.log 将被删除。

另外，关于这个类似的question，我还有另一个答案，你也可以查看其他答案。

Answer 3

通常在代码中保留console.log并不是一个好主意，但是如果您想将它们保留在代码中，则必须采用以下可能的方法：

添加您在退出CRA（https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject）之后提到的插件但这绝不是一个好主意！
创建类似这样的函数来处理您的控制台日志（或类似内容）

const myConsoleLog = dataToLog => {
    if(process.env.NODE_ENV === 'development') {
        console.log(text)
    }
}

我们如何在React生产构建中删除控制台日志语句？

3 个答案: