前端:一鍵清除項(xiàng)目中無用的console.log代碼
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每天定時(shí)分享技術(shù)干貨/優(yōu)秀開源/技術(shù)思維
前言
說起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
我們可以看一下該插件介紹，該插件是用于減少我們代碼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
該插件跟上面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編輯器
使用
直接全局搜索本項(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目錄下查找。
?? 看完三件事
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個(gè)小忙：
點(diǎn)個(gè)【在看】，或者分享轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容 關(guān)注公眾號【趣談前端】，定期分享 工程化 / 可視化 / 低代碼 / 優(yōu)秀開源。
點(diǎn)個(gè)在看你最好看