自定义console，更优雅的控制日志输出

Javascript

作为一个前端的程序员，我们调试的时候经常会用到console来输出日志，对数据进行分析，定位问题，解决问题，然后删掉console日志的代码。以后我们遇到问题出现在同一地方，还是得在同样的地方输出同样的数据进行分析。对于前端有些必要的地方可以保留日志输出的代码，但是这样有个不好的地方就是代码上线了，在控制台还是会有我们调试的日志的输出。

期望：开发的时候控制台能够看到日志，上线的时候看不到日志。

为了能更好的控制，我们会采取一些办法：

  • 第一种，我们可以通过打包工具配置来控制日志的输出

    比如使用webpack，我们可以通过UglifyJS来处理，用webpack 4举个例子:
    首先安装插件：npm i uglifyjs-webpack-plugin --save-dev
    配置选项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      	// webpack.config.js
      	const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    module.exports = {
    			plugins: [
      			new UglifyJsPlugin({
       				uglifyOptions: {
                          compress: {
                              drop_console: true
                      	}
        				}
      			})
    		]
    }

    【注】：webpack 内置了 webpack.optimize.UglifyJsPlugin，基于的是 UglifyjsWebpackPlugin v0.4.6 版本

  • 第二种，我们通过改写替换原先的console方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const environment = 'production';
    // 自定义输出日志
       console.log = (function (logFunc) {
           return function () {
               try {
                   if (environment == 'production') {
    	// 发布环境，根据实际情况进行定义
                       // webapp 可以输出到文件
                   } else {
                       logFunc.call(console, ...arguments);
                   }
               } catch (e) {
                   console.error(e);
               }
           }
       })(console.log);