周二发布了后台，周三下午就有bug接踵而至。

经过排查，很快找到了问题的原因：是因为我在写的过程中写了一句console语句，但是我们的系统放到了不同的后台，有的后台不存在这个字段，所以就导致console语句报错，然后不继续执行。

简单的错误，严重的后果，然后我就想到，在开发过程中，我们肯定会需要通过console来看一些字段的值，从而进行更好的判断，从而console语句越写越多，在最后发布的时候，就懒得一个一个去进行删除或者注释，这就需要一个方法来对console的打印进行控制

以Vue框架为例

方案一：利用babel-plugin-transform-remove-console

// 先安装
npm install --save babel-plugin-transform-remove-console

// 在.babel.js中引入
if (process.env.NODE_ENV === 'production') {
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}

方案二：利用webpack插件

webpack4之前

module.exports = {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: { // 删除注释
              comments: false
            },
            //生产环境自动删除console
            compress: {
              //warnings: false, // 若打包错误，则注释这行
              drop_debugger: true,  //清除 debugger 语句
              drop_console: true,   //清除console语句
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
        })
      ]
    }
}

webpack4之后，通过插件（terser-webpack-plugin）来实现该功能

// 安装
npm install terser-webpack-plugin

// 使用
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },

无框架项目

原生html和js项目中，可以通过提出公共的打方法

// 抽离出一个js文件
// 引入该方法，需要打印时执行该方法
function judgeConsole (msg) {
  // 通过控制该变量，来判断是否需要打印；上线前置为false
  let isConsole = true
  if (isConsole) {
    console.log(msg)
  }
}