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

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

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

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

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

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

  	// 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方法

  	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);