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

Question

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

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

我已将上述配置包含到 babel.rc 文件中，但它仍然没有解决我的问题。我能够在生产版本中看到日志。请让我知道我哪里出错了。

Answer 1

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

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

就在 return.

之前

编辑：感谢@Youngmu Yang 指正。这很奇怪，但在我的例子中是我之前输入的 .env，完整的答案应该是：

if (process.env['The_env_of_your_project_that_defines_environment'] === "production")
  console.log = function no_console() {};

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都将被删除。

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

Answer 3

@pmiranda 的解决方案应该改为：

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

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

Remove console log statements in react production build?

javascript

console

console.log

reactjs

babeljs