Vue添加只在生产环境生效的依赖插件

案例

• 当我们需要打包项目放到生产环境的时候，需要运行 build 命令，其中会有console.log()的报错，因为不提倡生产环境有内容的输出，那么我们可以使用一个插件babel-plugin-transform-remove-console，这样在build的时候，就会自动移除掉输出语句
• 但是有一个问题，这样就会把开发环境中的输出语句也移除掉了，这样可能就不利于我们开发调试

// babel.config.js 文件
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    'transform-remove-console'
  ]
}

解决方案

• 我们应该要根据环境来觉得插件的使用与否，首先要解决判断当前环境是开发环境还是生产环境

• 在我们build项目的时候，会执行一个语句，其中就包含了一个值
  

• 同样，在我们serve启动项目的时候，也会有一个值表示当前环境
  

• 那问题就变得简单了，我们只需要在文件中判断当前的值是 development 还是production，然后在放入插件即可

// 项目发布阶段需要用到的 babel 插件
const 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
  ]
}

举一反三

• 那么如果要添加只在开发环境或生产环境中生效的插件，就可以使用该方法