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

但是我怎样才能知道hash文件上的main.js后缀，以便我可以调用此命令并使用相同的文件名保存输出js文件

Answer 1

在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 2

如果您只想抑制日志输出，可以换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 3

将此添加到index.js

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

请注意，这只会禁止显示消息，不会从部署的代码中删除消息。

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

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中的日志语句

5 个答案: