关闭整个项目console.log的方法

一、前言

在实际项目开发中，特别是在前后端联调过程中，我们往往会添加很多 console.log 日志来帮助我们开发。大多时候，我们在开发完成之后便将对应的 console.log 删除，但是，有时候我们忘记或者需要在上线后也看一段时间的日志（比如有一些逻辑测试环境无法测试，需要在正式环境进行微调）。

这种时候，我们就可以添加一个全局开启/关闭日志的方法，省去我们挨个添加删除 console.log 的麻烦
 
 

方式一：重写一下 console.log 方法

const isDebug = true;  // 控制是否屏蔽全局console.log 日志；isDebug设为false即可屏蔽
console.log = (function (oldLogFunc) {
  return function () {
    if (isDebug) {
      oldLogFunc.apply(this, arguments);
    }
  }
})(console.log);

 
 

方式二：使用包 babel-plugin-transform-remove-console

1. 安装：cnpm install babel-plugin-transform-remove-console --save-dev
2. 配置 babel.config.js
   如果没有该文件，请新建！

const prodPlugins = [];
// 判断是否为生产环境
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  // { 'exclude': [ 'error', 'warn'] } ：允许打印 error、warn 类型的日志
  // 如果需要允许打印log, 则在exclude配置中添加参数 'log' 即可
  // 若没有exclude参数，则表示禁止打印所以日志
  prodPlugins.push(['transform-remove-console', { 'exclude': [ 'error', 'warn'] }]);
}
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
  	// 使用插件，注意解构
    ...prodPlugins
  ]
}

 
 
目前我只在vue项目中使用过，放在main.js里面 或者 App.vue的created生命周期钩子里面均可；
如果是小程序，放到 app.js 里面应该也是可以的！

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！