說(shuō)起console.log調(diào)試，不用多說(shuō)闺阱，那是非常的好用，開(kāi)發(fā)中幫助我們解決了不少Bug舵变。我們經(jīng)常能在開(kāi)發(fā)環(huán)境中看見(jiàn)這一坨一坨的console調(diào)試酣溃。但是生產(chǎn)環(huán)境是絕不對(duì)不允許出現(xiàn)console信息代碼的。你還在手動(dòng)一個(gè)一個(gè)刪除嗎纪隙，那得多累吧尥恪！
下面我們來(lái)看一下這幾種方式清除生產(chǎn)環(huán)境console無(wú)用代碼绵咱。
基本操作
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
}
}
})
]
}
}
配置完上面代碼，重啟即可看到效果钠绍。注意：代碼只會(huì)在production（生產(chǎn)環(huán)境）環(huán)境下有效舆声，看上面我們的配置mode: production，就是生產(chǎn)環(huán)境柳爽。來(lái)講解一下上面這倆個(gè)屬性drop_console和pure_funcs的區(qū)別媳握，前者則是刪除所有帶console的前綴的調(diào)試方法，如：console.log泻拦、console.table毙芜、console.dir只要帶有console前綴則全部刪除。而后者則是配置争拐，就是數(shù)組的值是什么它才會(huì)刪除什么腋粥，比如pure_funcs：[console.log, console.dir]那么只會(huì)刪除這兩項(xiàng)，則不會(huì)刪除代碼中的console.table代碼架曹。
以上代碼放到生產(chǎn)環(huán)境下隘冲，console調(diào)試代碼即可清除，但是還有一個(gè)問(wèn)題需要注意绑雄，就是該插件只支持
ES5語(yǔ)法展辞，如果你的代碼中涉及到ES6語(yǔ)法則會(huì)報(bào)錯(cuò)。
terser-webpack-plugin
該插件跟上面uglifyjs-webpack-plugin一樣万牺，都是用于減少我們代碼js代碼體積罗珍。
看上面描述：如果你的Webpack版本大于5+，則不需要安裝此terser-webpack-plugin插件脚粟，會(huì)自帶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語(yǔ)法。都是在生產(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)境或者開(kāi)發(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
]
}
簡(jiǎn)單粗暴刪除
直接重寫(xiě)console.log的方法。不推薦該寫(xiě)法拷橘，這種寫(xiě)法代碼里面的console.log方法仍然會(huì)執(zhí)行局义，只不過(guò)沒(méi)有輸出
console.log = function () {};
手寫(xiě)Loader刪除console
我們來(lái)寫(xiě)一個(gè)簡(jiǎn)易版的清除console插件齐疙。
新建一個(gè)js文件，我這里名為clearConsole.js旭咽，其實(shí)這里也是用正則去匹配然后替換為空贞奋。
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目錄下查找轿塔。
