刪除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方法仍然會執行，只不過沒有輸出

console.log = function () {};

手寫Loader刪除console

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

新建一個js文件，我這裏名爲clearConsole.js，其實這裏也是用正則去匹配然後替換爲空。

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目錄下查找。