大家好，我是若川。早些天時(shí)，我看到一個(gè)后端公眾號發(fā)《辭退了一個(gè)前端》，當(dāng)時(shí)還想著現(xiàn)在后端公眾號都開始吊打前端了嘛。其中有個(gè)理由就是線上還一堆console.log...我猜很多人都會移除項(xiàng)目中無用的console.log?？梢詮?fù)習(xí)一下。

---

前言

說起console.log調(diào)試，不用多說，那是非常的好用，開發(fā)中幫助我們解決了不少Bug。我們經(jīng)常能在開發(fā)環(huán)境中看見這一坨一坨的console調(diào)試。但是生產(chǎn)環(huán)境是絕不對不允許出現(xiàn)console信息代碼的。你還在手動(dòng)一個(gè)一個(gè)刪除嗎，那得多累啊！

下面我們來看一下這幾種方式清除生產(chǎn)環(huán)境console無用代碼。

基本操作

Webpack配置

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin

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

官網(wǎng)地址看這里：uglifyjs-webpack-plugin

安裝

npm?i?uglifyjs-webpack-plugin

使用

在webpack.config.js文件下進(jìn)行如下配置。

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

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

以上代碼放到生產(chǎn)環(huán)境下，console調(diào)試代碼即可清除，但是還有一個(gè)問題需要注意，就是該插件只支持ES5語法，如果你的代碼中涉及到ES6語法則會報(bào)錯(cuò)。

terser-webpack-plugin

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語法。都是在生產(chǎn)環(huán)境代碼生效。

Vue-cli配置

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

安裝

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

使用

在項(xiàng)目根目錄babel.config.js文件下配置。該插件不區(qū)分生產(chǎn)環(huán)境或者開發(fā)環(huán)境，只要你配置都能生效。

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

簡單粗暴刪除

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

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

靈活運(yùn)用VScode編輯器

微信截圖_20210805001715.png

使用

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

console\.log\(.*?\)

手寫Loader刪除console

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

新建一個(gè)js文件，我這里名為clearConsole.js，其實(shí)這里也是用正則去匹配然后替換為空。如果不懂loader則可看我這篇文章手寫一個(gè)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目錄下查找。

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

---

推薦閱讀

我在阿里招前端，該怎么幫你（可進(jìn)面試群）
我讀源碼的經(jīng)歷

面對 this 指向丟失，尤雨溪在 Vuex 源碼中是怎么處理的
老姚淺談：怎么學(xué)JavaScript？

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高?！，F(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)寫了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，活躍在知乎@若川，掘金@若川。致力于分享前端開發(fā)經(jīng)驗(yàn)，愿景：幫助5年內(nèi)前端人走向前列。

識別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號文章~

總結(jié)

以上是生活随笔為你收集整理的如何移除项目中无用的 console.log 代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。