场景描述
在vue-cli创建的项目中,开发阶段会经常使用console
来打印内容,方便我们调试,但是生产阶段我们不希望在控制台输出信息,可以使用babel-plugin-transfrom-remove-console
插件
环境
"dependencies": {
"vue": "^2.6.11",
},
"devDependencies": {
"babel-plugin-transform-remove-console": "^6.9.4",
}
步骤
安装
npm i -D babel-plugin-transfrom-remove-console
配置
注意:此不是最终配置
在babel.config.js
中配置下面的内容:
module.exports = {
'plugins': [
'transform-remove-console'
]
}
上面的配置会导致开发和生产中关于"console"都会被移除,那针对开发阶段就不友好了,如何让上面的配置只在生产时有效??
最终配置
思路:通过获取vue ui
执行编译 、打包执行命令时传递的mode
值来执行不同的脚本
babel.config.js
// 项目开发阶段用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
'plugins': [
// 发布产品时候的插件数组
...prodPlugins
]
}
验证
编译时console的内容有输出,打包时无console的内容输出。
开发阶段console的内容可以输出,生产阶段console的内容不会输出