這些操做刪除console.log代碼，你都知道嗎

前言

提及console.log調試，不用多說，那是很是的好用，開發中幫助咱們解決了很多Bug。咱們常常能在開發環境中看見這一坨一坨的console調試。可是生產環境是毫不對不容許出現console信息代碼的。你還在手動一個一個刪除嗎，那得多累啊！javascript

下面咱們來看一下這幾種方式清除生產環境console無用代碼。前端

基本操做

Webpack配置

uglifyjs-webpack-plugin

咱們能夠看一下該插件介紹，該插件是用於減小咱們代碼js代碼體積。而且若是安裝運行該插件的話，node版本是在v6.9.0+和Webpack版本v4.0.0+。vue

官網地址看這裏：uglifyjs-webpack-pluginjava

安裝node

npm i uglifyjs-webpack-plugin
複製代碼

使用webpack

在webpack.config.js文件下進行以下配置。git

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代碼。github

以上代碼放到生產環境下，console調試代碼便可清除，可是還有一個問題須要注意，就是該插件只支持ES5語法，若是你的代碼中涉及到ES6語法則會報錯。web

terser-webpack-plugin

該插件跟上面uglifyjs-webpack-plugin同樣，都是用於減小咱們代碼js代碼體積。npm

看上面描述：若是你的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編輯器

使用

直接全局搜索本項目裏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目錄下查找。

謝謝觀看，有幫助能夠關注一下公衆號：前端娛樂圈

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期推薦

《什麼場景下使用Render函數，如何配置JSX》

《分享15個Webpack實用的插件！！！》

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》