vue項目中全局消除console的幾種途徑

在日常開發中，經常免不了在debug或者聯調時在函數中使用console打印變量，但是過後總會有人忘記刪除，造成在生產環境中依然把這些測試的打印變量輸出到控制檯的尷尬，容易造成內存泄露。所以最近根據項目需要，找到了兩種處理的途徑，分別比較一下。

一、使用webpack的UglifyJsPlugin配置

鑑於目前大多數項目無論是react還是vue，都基本在wepack的配合下開發，那麼就少不了使用到UglifyJsPlugin這個插件作爲js的處理插件，其中，它提供了一些配置項可以消除打包文件的console：

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
        compress: {
          warnings: false,
          drop_console: true,//console
          pure_funcs: ['console.log']//移除console
        }
      },
      }),
    ],
  },
};

這樣配置之後，在執行打包時即可把全局的console移除在外，比較簡單。

二、通過vue原型鏈注入自定義輸出的console方法

同時，我們也可以善用vue的原型鏈，構建自己的console工具，最終的實現效果是：在任意vue組件中的任意地方我們都能通過this.$console.log(xxx)這樣的語法實現打印，並且這種打印不會輸出到生產環境中。具體實現的步驟如下：

（1）首先，我們需要在根目錄或任意自定義目錄，新建一個名爲AutoConsole.js的文件，內容如下：

class AutoConsole {
	constructor(){
		this.env = process.env.NODE_ENV;
	}
	output(type,content){
		switch(type){
			case 'log':
				console.log(content);
				break;
			case 'warn':
				console.warn(content);
				break;
			case 'error':
				console.error(content);
				break;
		}
	}

	log(content,mode='normal'){
		if(this.env === 'development'&&mode === 'normal'){
			this.output('log',content)
		}else{
			return
		}
	}
	warn(content,mode='normal'){
		if(this.env === 'development'&&mode === 'normal'){
			this.output('warn',content)
		}else{
			return
		}
	}
	error(content,mode='normal'){
		if(this.env === 'development'&&mode === 'normal'){
			this.output('error',content)
		}else{
			return
		}
	}
}
const autolog = new AutoConsole()
export default autolog

隨後，在main.js中，將該實例掛在到vue的原型鏈上，並定義爲$console：

import autolog from './utils/AutoConsole.js'
import Vue from 'vue'

Vue.prototype.$console = auto;

new Vue({
	...
})

至此，就可以在任意組件中使用this.$console.log\warn\error()的語法來打印變量了，並且不用擔心會出現在生產環境中，但是如果有些地方實在需要在生產中打印，那麼可以傳入一個參數’force’實現強制打印：this.$console.log('{name:aaa},'force')

最後，這種用法還需要配合cross-env插件，將打包的環境變量設置到命令行中，首先

npm install cross-env --save-dev

隨後，在package.json中修改原先的打包命令爲：

'script':{
	"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}

所有步驟結束！但是爲什麼要這麼大費周章地去自己編寫一個console實例而不直接在webpack中禁止掉呢？下面的比較或許會有答案。

三、兩種途徑的對比

用法	webpack配置	自定義實例
優點	配置簡單，容易上手	可定製化程度高，在一些確實有需要用到console在生產環境中的地方，可以增加force參數配置
劣勢	全局作用，在一些需要用到console的地方無法自由使用	配置步驟繁瑣，需要對vue原型鏈有一定了解