关于前端:这些操作删除consolelog代码你都知道吗

前言

说起 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-plugin 4 的版本

装置

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

谢谢观看，有帮忙能够关注一下公众号：前端娱乐圈

感激

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤