這些操作刪除console.log程式碼，你都知道嗎

蛙人發表於2021-09-26

前言

說起console.log除錯，不用多說，那是非常的好用，開發中幫助我們解決了不少Bug。我們經常能在開發環境中看見這一坨一坨的console除錯。但是生產環境是絕不對不允許出現console資訊程式碼的。你還在手動一個一個刪除嗎，那得多累啊！

下面我們來看一下這幾種方式清除生產環境console無用程式碼。

基本操作

Webpack配置

uglifyjs-webpack-plugin

guanyu.png

我們可以看一下該外掛介紹，該外掛是用於減少我們程式碼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

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 = function () {};

靈活運用VScode編輯器

微信截圖_20210805001715.png

使用

直接全域性搜尋本專案裡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目錄下查詢。

謝謝觀看，有幫助可以關注一下公眾號：前端娛樂圈

感謝

謝謝閱讀，如有幫助請點個關注、收藏吧

覺得有幫助可以關注 前端娛樂圈 公眾號，每天為你推送一篇小知識

大家也可以加我 微信 交個朋友，可以找我聊天或拉你進技術交流群

相關文章