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是“免费的”，只需要导入或需要调试库即可。

下面是使用带有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 (....

然后要查看调试输出，只需从浏览器Javascript控制台设置localStorage.debug='*'或将App设置为DEBUG。要查看在服务器端运行的代码输出，请为所有调试输出或将*的环境变量App设置为<script src="jquery-3.4.1.min.js"></script> <script src="fadein.js"></script> <script> $(document).on("scroll", function () { var pageTop = $(document).scrollTop() var pageBottom = pageTop + $(window).height() var tags = $(".fade") for (var i = 0; i < tags.length; i++) { var tag = tags[i] if ($(tag).position().top < pageBottom) { $(tag).addClass("visible") } else { $(tag).removeClass("visible") } } }) </script>来运行服务器。

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

1 个答案: