这些操做删除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 = 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命令及特殊问题场景怎么解决》