reactjs - 在nextjs中我想控制日志的输出

Question

我想在开发环境和生产环境控制日志的输出

无法控制react组件中的日志输出，想控制不同开发环境下的输出。

next.js 中有代码压缩。压缩的时候想删除console.log，不知道怎么弄。在 webpack 中，我尝试删除 console.log，但出现错误。

  config.plugins.push(
            new UglifyJsPlugin({
                uglifyOptions:{
                    compress: {
                        // warnings: false,
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        )
        return config

error :
static/development/pages/_app.js from UglifyJs
Unexpected token: keyword «const» [static/development/pages/_app.js:11375,0]

function Hook_test(props) {
    const[open, setOpen] = useState(false);
    const {
        dispatch,
        num
    } = props

    console.log("log test"); // I don't want to appear in a production environment，Development environment can appear
    function setReducer() {
        console.log(111111, change_add(num + 1)) dispatch(change_add(num + 1))
    }

    return ( < ><button onClick = { () = >{
            setOpen(!open);
            setReducer()
        }
    } > HOOK < /button>
            <span>{open?"打开":"关闭"}  {num}</span > </>
    )
}

class Index extends Component {
    render() {
      return   <Hook_test a={1222121}  / >
}
}

Answer 1

您是否考虑过使用日志记录包而不是 console.log？例如，debug设置简单。

使用日志包可能需要使用 webpack ，这可以是一个开始使用的过程，但如果你已经在使用 React.... 如果你从 Create React App 开始，你可以“免费”获得 webpack，只需要导入或需要一个调试库。

这是使用 debug 和 create-react-app 的示例

// in src/App.js 
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const debug = require('debug')('App');

class App extends Component {
  render() {
    const myVar = { a: 1, b: 2 };
    debug('rendering...', myVar);
    return (....

然后查看调试输出，只需设置 localStorage.debug='*'或到 App从您的浏览器 Javascript 控制台。要查看在服务器端运行的代码的输出，请使用环境变量 DEBUG 运行您的服务器。设置为 *对于所有调试输出，或 App .