案例
- 当我们需要打包项目放到生产环境的时候,需要运行
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
]
}
举一反三
- 那么如果要添加只在开发环境或生产环境中生效的插件,就可以使用该方法