babel-plugin-transform-remove-console插件的使用

我们在项目编译过程会碰到警告的情况

控制台打印的结果显示是因为有多余的console语句：

为了解决这个问题，我们来看一个插件babel-plugin-transform-remove-console

This plugin removes all console.* calls.

官方文档里解释这个插件可以移除所有console.*的调用

我们先安装：

再找到babel的配置文件：


效果：


没有之前的console警告了

但是这是有问题的，因为babel.config.js文件是可以影响全局的，不仅仅会去掉生产环境的console,还会把开发环境用于调试的console也移除，这是我们不希望的，可以这样实现：

我们知道，在开发阶段vue CLI会用--mode development进行调试
发布阶段用--mode production命令

所以我们可以在babel的配置文件里面加一个判断：

// 这是项目发布阶段需要用到的bebel插件
const prodPlugins = []
// 如果是发布阶段,处于生产环境,就向prodPlugins数组里添加一个插件
if (process.env.NODE_ENV === 'production') {
    
    
  prodPlugins.push('transform-remove-console')
}
module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
    
    
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...prodPlugins // 这里...展开运算符，把上面定义的prodPlugins数组里面的每一项展开添加到这个plugins数组里面
  ]
}