前端项目构建生产环境下的package时,咱们肯定要去掉development环境下的console.log,如果挨个注释可就太费劲了,本文介绍怎么使用 'babel-plugin-transform-remove-console' 移除前端项目中所有的console.log.
1. 安装依赖
npm install babel-plugin-transform-remove-console --save-dev
2. 配置 babel.config.js
module.exports = {presets: [ // 原有的默认配置'@vue/cli-plugin-babel/preset'],plugins: [ // 加入以下内容,引入插件'transform-remove-console']
}
注意:添加完后,因为是配置文件所以要重新启动项目,npm run serve。这个时候打包再部署上线控制台就没有log了,但是在本地跑项目log也没了,所以接着往下看:
3. 修改 babel.config.js
const pluginsValue = []switch (process.env.NODE_ENV) {case 'localdev':break;case 'development':break;case 'devonline':break;case 'uat':break;case 'production': // 只在生产环境下移除 logpluginsValue.push('transform-remove-console')break;default:break;
}module.exports = {presets: [ // 原有的默认配置'@vue/cli-plugin-babel/preset'],plugins: pluginsValue
}
此后,使用 npm run build 生成的dist/中的文件将自动移除console.log的输出语句。一般使用在发布项目时。(此时本地log正常输出,部署上线的控制台没有log)