如何移除項目中無用的 console.log 代碼

大家好，我是若川。早些天時，我看到一個后端公眾號發《辭退了一個前端》，當時還想著現在后端公眾號都開始吊打前端了嘛。其中有個理由就是線上還一堆console.log...我猜很多人都會移除項目中無用的console.log。可以復習一下。

前言

說起console.log調試，不用多說，那是非常的好用，開發中幫助我們解決了不少Bug。我們經常能在開發環境中看見這一坨一坨的console調試。但是生產環境是絕不對不允許出現console信息代碼的。你還在手動一個一個刪除嗎，那得多累啊！

下面我們來看一下這幾種方式清除生產環境console無用代碼。

基本操作

Webpack配置

uglifyjs-webpack-plugin

我們可以看一下該插件介紹，該插件是用于減少我們代碼js代碼體積。并且如果安裝運行該插件的話，node版本是在v6.9.0+和Webpack版本v4.0.0+。

官網地址看這里：uglifyjs-webpack-plugin

安裝

npm?i?uglifyjs-webpack-plugin

使用

在webpack.config.js文件下進行如下配置。

const?UglifyJsPlugin?=?require('uglifyjs-webpack-plugin')
module.exports?=?{//?省略...mode:?"production",optimization:?{minimizer:?[new?UglifyJsPlugin({uglifyOptions:?{//?刪除注釋output:{comments:?false},compress:?{drop_console:?true,?//?刪除所有調式帶有console的drop_debugger:?true,pure_funcs:?['console.log']?//?刪除console.log}}})]}?
}

配置完上面代碼，重啟即可看到效果。注意：代碼只會在production（生產環境）環境下有效，看上面我們的配置mode: production，就是生產環境。來講解一下上面這倆個屬性drop_console和pure_funcs的區別，前者則是刪除所有帶console的前綴的調試方法，如：console.log、console.table、console.dir只要帶有console前綴則全部刪除。而后者則是配置，就是數組的值是什么它才會刪除什么，比如pure_funcs：[console.log, console.dir]那么只會刪除這兩項，則不會刪除代碼中的console.table代碼。

以上代碼放到生產環境下，console調試代碼即可清除，但是還有一個問題需要注意，就是該插件只支持ES5語法，如果你的代碼中涉及到ES6語法則會報錯。

terser-webpack-plugin

該插件跟上面uglifyjs-webpack-plugin一樣，都是用于減少我們代碼js代碼體積。

看上面描述：如果你的Webpack版本大于5+，則不需要安裝此terser-webpack-plugin插件，會自帶terser-webpack-plugin。但你的Webpack版本還是4，則你需要安裝terser-webpack-plugin4的版本

安裝

npm?i?terser-webpack-plugin@4

使用

const?TerserWebpackPlugin?=?require("terser-webpack-plugin");module.exports?=?{//?省略...mode:?"production",optimization:?{minimizer:?[new?TerserWebpackPlugin({terserOptions:?{compress:?{warnings:?true,drop_console:?true,drop_debugger:?true,pure_funcs:?['console.log',?"console.table"]?//?刪除console}}});]}
}

該插件功能與上面一樣，屬性用法也一樣，唯一該插件可支持ES6語法。都是在生產環境代碼生效。

Vue-cli配置

這是在Vue-cli項目中推薦使用的清除console插件。更多介紹看這里 babel-plugin-transform-remove-console

安裝

npm?i?babel-plugin-transform-remove-console?--save-dev

使用

在項目根目錄babel.config.js文件下配置。該插件不區分生產環境或者開發環境，只要你配置都能生效。

module.exports?=?{plugins:?["transform-remove-console"]
}//?生產環境如下配置const?prodPlugins?=?[]
if?(process.env.NODE_ENV?===?'production')?{prodPlugins.push('transform-remove-console')
}
module.exports?=?{plugins:?[...prodPlugins]
}

簡單粗暴刪除

接下來這個可是一個騷操作，瞪大眼睛看好了，哈哈哈。直接重寫console.log的方法。

console.log?=?function?()?{};

靈活運用VScode編輯器

微信截圖_20210805001715.png

使用

直接全局搜索本項目里console.log正則匹配，然后全部替換為空即可。

console\.log\(.*?\)

手寫Loader刪除console

我們來寫一個簡易版的清除console插件。

新建一個js文件，我這里名為clearConsole.js，其實這里也是用正則去匹配然后替換為空。如果不懂loader則可看我這篇文章手寫一個Sass-loader。

clearConsole.js

const?reg?=?/(console.log\()(.*)(\))/g;
module.exports?=?function(source)?{source?=?source.replace(reg,?"")return?source;
}

在Vue.config.js配置

module.exports?=?{//?省略...configureWebpack:?{module:?{rules:?[{test:?/\.vue$/,exclude:?/node_modules/,loader:?path.resolve(__dirname,?"./clearConsole.js")},{test:?/\.js$/,exclude:?/node_modules/,loader:?path.resolve(__dirname,?"./clearConsole.js")}],}},
}

配置如上代碼就可以啦~，清除js文件和vue文件里的console.log。exclude代表不去node_module目錄下查找。

最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信湖南?拉你進群。