分分鐘清除項目中無用的console.log代碼
前言
說起console.log調試，不用多說，那是非常的好用，開發(fā)中幫助我們解決了不少Bug。我們經常能在開發(fā)環(huán)境中看見這一坨一坨的console調試。但是生產環(huán)境是絕不對不允許出現console信息代碼的。你還在手動一個一個刪除嗎，那得多累?。?/p>
下面我們來看一下這幾種方式清除生產環(huán)境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（生產環(huán)境）環(huán)境下有效，看上面我們的配置mode: production，就是生產環(huán)境。來講解一下上面這倆個屬性drop_console和pure_funcs的區(qū)別，前者則是刪除所有帶console的前綴的調試方法，如：console.log、console.table、console.dir只要帶有console前綴則全部刪除。而后者則是配置，就是數組的值是什么它才會刪除什么，比如pure_funcs：[console.log, console.dir]那么只會刪除這兩項，則不會刪除代碼中的console.table代碼。
以上代碼放到生產環(huán)境下，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語法。都是在生產環(huán)境代碼生效。
Vue-cli配置
這是在Vue-cli項目中推薦使用的清除console插件。更多介紹看這里 babel-plugin-transform-remove-console
安裝
npm i babel-plugin-transform-remove-console --save-dev
使用
在項目根目錄babel.config.js文件下配置。該插件不區(qū)分生產環(huán)境或者開發(fā)環(huán)境，只要你配置都能生效。
module.exports = {
plugins: [
"transform-remove-console"
]
}
// 生產環(huán)境如下配置
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
plugins: [
...prodPlugins
]
}
簡單粗暴刪除
接下來這個可是一個騷操作，瞪大眼睛看好了，哈哈哈。直接重寫console.log的方法。
console.log = function () {};
靈活運用VScode編輯器
使用
直接全局搜索本項目里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目錄下查找。
謝謝觀看，有幫助可以關注一下公眾號：前端Sharing
感謝
謝謝你讀完本篇文章，希望對你能有所幫助，如有問題歡迎各位指正。
我是?? (????)，如果覺得寫得可以的話，請點個贊吧
。
想進階 React 的小伙伴可以加入 [ React進階群 ] 歡迎大家一起來交流討論
寫作不易，「點贊」+「在看」+「轉發(fā)」 謝謝支持