在不弹出的情况下删除 Create React App 中的日志语句

Question

我在开发应用程序时使用了很多 console.log() 语句（我的意思是 LOTS）。在没有 "ejecting" 的情况下，我究竟该如何删除它们 创建 React 应用程序 我考虑过但不确定具体如何实施：

在我的 package.json:

 "build": "react-scripts build && uglifyjs --compress drop_console build/static/js/main.xxxxx.js  -o build/static/js/main.xxxxx.js

但是我怎么才能知道 main.js 文件的 hash 后缀，所以我可以调用这个命令并用相同的文件名保存输出 js 文件

Answer 1

如果您只是想抑制日志输出，您可以包装 console.log 并使用它来代替

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

您可以导入/导出它，但这听起来很痛苦。添加到 global

似乎是一件好事

global.log = log

global.log('will only log in dev')

Answer 2

将此添加到 index.js

if (process.env.NODE_ENV !== 'development') {
  console.log = () => {}
}

请注意，这只会抑制消息，不会将它们从您部署的代码中删除。

注 2020 年 11 月

不要对库模块执行此操作，它会禁用父项目的 console.log。

2020 年 9 月更新

CRA 存储库中关于此问题的一些进展...去这里 support/thumbs https://github.com/facebook/create-react-app/pull/9222

参考资料： How to quickly and conveniently disable all console.log statements in my code?

Answer 3

在 package.json 脚本中执行此操作：

 "build": "./scripts/build.sh"

然后在您的项目中：

scripts/build.sh 看起来像：

#!/usr/bin/env bash

set -e;
cd "$(dirname $(dirname "$BASH_SOURCE"))"  # cd to project root

react-scripts build 

for f in build/static/js/*.js; do

  uglifyjs --compress drop_console "$PWD/$f" -o "$PWD/$f"

done

Answer 4

您可以试试这个包组合来覆盖配置：

注意：根据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 5

我使用这个设置。我在开发时仍然需要控制台日志。

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

module.exports = override(
  process.env.NODE_ENV !== 'development' && addBabelPlugins(
    "transform-remove-console"
  )
)

在不弹出的情况下删除 Create React App 中的日志语句

Removing log statements in Create React App without ejecting

uglifyjs

create-react-app

注 2020 年 11 月

2020 年 9 月更新