Clear the useless console.log code in the project every minute

Preface

Speaking of console.log debugging , Needless to say , That's very easy to use , Development has helped us solve a lot Bug. We can often be in development environment I saw this lump by lump console debugging . But the production environment is absolutely not allowed console Information code . Are you still manually deleting one by one , How tired that is ！

Let's take a look at these ways to clear Production environment console Useless code .

Basic operation

Webpack To configure

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin

We can take a look at the plug-in Introduction , The plug-in is used to reduce our code js Code volume . And if you install and run the plug-in ,node Version is in v6.9.0+ and Webpack edition v4.0.0+.

See the official website address here ：uglifyjs-webpack-plugin

install

npm i uglifyjs-webpack-plugin

Use

stay webpack.config.js The following configuration is performed under file .

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 //  Omit ...
    mode: "production",
    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              //  Delete Note 
              output:{
                comments: false
              },
              compress: {
                drop_console: true, //  Delete all modes with console Of 
                drop_debugger: true,
                pure_funcs: ['console.log'] //  Delete console.log
              }
            }
          })
        ]
      } 
}

After configuring the above code , Restart to see the effect . Be careful ： The code will only production（ Production environment ） Effective in the environment , Look at our configuration above mode: production, It's the production environment . Let's explain the above two properties drop_console and pure_funcs The difference between , The former is to delete all bands console Debugging method of prefix , Such as ：console.log、console.table、console.dir Just have console All prefixes are deleted . The latter is configuration , Is what the value of the array is, it will delete what , such as pure_funcs：[console.log, console.dir] Then only these two items will be deleted , The in the code is not deleted console.table Code .

Put the above codes into the production environment ,console Debug code can be cleared , But there is another problem to pay attention to , That is, the plug-in only supports ES5 grammar , If your code involves ES6 Syntax will report errors .

terser-webpack-plugin

terser-webpack-plugin

The plug-in follows the above uglifyjs-webpack-plugin equally , Are used to reduce our code js Code volume .

Look at the description above ： If your Webpack The version is greater than 5+, You do not need to install this terser-webpack-plugin plug-in unit , Will bring it terser-webpack-plugin. But yours. Webpack Version or 4, Then you need to install terser-webpack-plugin4 Version of

install

npm i [email protected]

Use

const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
    //  Omit ...
    mode: "production",
    optimization: {
     minimizer: [
           new TerserWebpackPlugin({
                terserOptions: {
                  compress: {
                    warnings: true,
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ['console.log', "console.table"] //  Delete console
                  }
                }
            });
        ]
    }
}

The plug-in function is the same as above , The same is true for attribute usage , Only this plug-in can support ES6 grammar . It's all in Production environment Code works .

Vue-cli To configure

This is Vue-cli Recommended cleanup in project console plug-in unit . See here for more information babel-plugin-transform-remove-console

install

npm i babel-plugin-transform-remove-console --save-dev

Use

In the project root directory babel.config.js File configuration . The plug-in is not differentiated Production environment perhaps development environment , As long as you configure it, it will take effect .

module.exports = {
 plugins: [
  "transform-remove-console"
 ]
}

//  The production environment is configured as follows: 

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
 prodPlugins.push('transform-remove-console')
}
module.exports = {
 plugins: [
  ...prodPlugins
 ]
}

Simple and crude deletion

Next, this is an operation , Keep your eyes open , Ha ha ha . Rewrite directly console.log Methods .

console.log = function () {};

Flexible use of VScode Editor

Wechat screenshot _20210805001715.png

Use

Direct global search in this project console.log Regular matching , Then replace all with blank .

console\.log\(.*?\)

Handwriting Loader Delete console

Let's write a simple version of the purge console plug-in unit .

Create a new one js file , My name here is clearConsole.js, In fact, we also use regular to match and then replace it with empty . If you don't understand loader You can read my article Writing a Sass-loader.

clearConsole.js

const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {
    source = source.replace(reg, "")
    return source;
}

stay Vue.config.js To configure

module.exports = {
    //  Omit ...
    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")
                }
            ],
        }
    },
}

Just configure the above code ~, eliminate js Document and vue In the file console.log.exclude On behalf of not going node_module Directory lookup .