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

Question

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

\n\n

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

\n\n

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

\n\n

  config.plugins.push(\n            new UglifyJsPlugin({\n                uglifyOptions:{\n                    compress: {\n                        // warnings: false,\n                        drop_debugger: true,\n                        drop_console: true\n                    }\n                }\n            })\n        )\n        return config\n\nerror :\nstatic/development/pages/_app.js from UglifyJs\nUnexpected token: keyword \xc2\xabconst\xc2\xbb [static/development/pages/_app.js:11375,0]\n

\n\n

function Hook_test(props) {\n    const[open, setOpen] = useState(false);\n    const {\n        dispatch,\n        num\n    } = props\n\n    console.log("log test"); // I don\'t want to appear in a production environment\xef\xbc\x8cDevelopment environment can appear\n    function setReducer() {\n        console.log(111111, change_add(num + 1)) dispatch(change_add(num + 1))\n    }\n\n    return ( < ><button onClick = { () = >{\n            setOpen(!open);\n            setReducer()\n        }\n    } > HOOK < /button>\n            <span>{open?"\xe6\x89\x93\xe5\xbc\x80":"\xe5\x85\xb3\xe9\x97\xad"}  {num}</span > </>\n    )\n}\n\nclass Index extends Component {\n    render() {\n      return   <Hook_test a={1222121}  / >\n}\n}\n

\n

Answer 1

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

使用日志包可能需要使用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.