console react 去除_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。
如果手动删除未免也太累了,再说以后想再开发还得重新写console。
事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的:
首先安装terser-webpack-plugin
npm install terser-webpack-plugin -D
然后在vue.config.js文件里写插件的配置:
module.exports = {
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
}
}
2020.1.14补充:
上面的写法是直接修改webpack的配置,vue官方文档里说也可以返回一个将会被合并的对象,写法如下:
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
// 返回一个将会被合并的对象
return {
optimization:{
minimizer: [
new TerserPlugin({
sourceMap:false,
terserOptions:{
compress:{
drop_console : true
}
}
})
]
}
}
}
}
}
2020.4.22补充:
最近在做react项目的时候发现它的webpack的配置,也可以使用terser去掉console.log。
webpack.config.prod.js:
module.exports = {
optimization:{
minimizer: [
new TerserPlugin({
sourceMap:false,
terserOptions:{
compress:{
drop_console : true
}
}
})
]
}
}
补充知识:vue中遇到数据更新但是页面没有更新的情况
今天在项目中遇到了一个需求,点击改变数据,之后在页面上立即看到更改后的数据。
首先,如上图的黄色按钮是通过v-for 循环产生的,data()里只有数据cards:[ … ],cards的值是通过调用后台接口拿到的。
data(){
return {
cards:[]
}
}
这个头像下方的黄色按钮,是根据card.isShow的truthy 决定显示或不显示。
当我点击按钮的时候,把card.isShow 的值变为 false。
可是页面上的黄色按钮还在,并没有如我期望的那样消失。
通过查询资料得知,使用this.$forceUpdate()可以重新渲染组件,这样就可以得到想要的效果。
cacelHandler(card){
card.isShow = false;
this.$forceUpdate();
}
vue官方对$forceUpdate的解释是:
$forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
以上这篇vue或react项目生产环境去掉console.log的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
console react 去除_vue或react项目生产环境去掉console.log的操作相关推荐
- vue 关闭log_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了 ...
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- npm更新包(全局单个,项目单个,全局所有,项目生产环境,项目开发环境)
npm-check检查npm依赖包是否有更新,错误以及不在使用的. 安装npm-check npm install -g npm-check npm全局更新包 npm-check -u -g npm更 ...
- 多个vue项目生产环境下NGINX配置文件
多个vue项目生产环境下NGINX配置文件 使用场景 1.多个前端项目 2.多个后端项目 3.修改nginx配置后端接口转发路径 4.反向代理 某个目录下 带特定后缀名的文件 5.vue3项目 使用前 ...
- 生产环境取消console.log
在vue.config.js文件中设置 configureWebpack: config => {//生产环境取消 console.logif (process.env.NODE_ENV === ...
- Ansible:Ansibl项目生产环境快速布局
Tips:与前文 <进击的 Ansible(一):Ansible 快速入门> 一样,本文使用的 Ansible 版本 2.5.4,项目演示环境 MacOS.由于 Ansible 项目开发活 ...
- Vue项目生产环境解决跨域问题
一.前言 第一次写vue项目,开发完成.打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了.查阅资料,得知我解决的跨域仅适用于开发环境. ememem. ...
- 前端:一键清除项目中无用的console.log代码
关注并将「趣谈前端」设为星标 每天定时分享技术干货/优秀开源/技术思维 前言 说起console.log调试,不用多说,那是非常的好用,开发中帮助我们解决了不少Bug.我们经常能在开发环境中看见这一坨 ...
- 如何移除项目中无用的 console.log 代码
大家好,我是若川.早些天时,我看到一个后端公众号发<辞退了一个前端>,当时还想着现在后端公众号都开始吊打前端了嘛.其中有个理由就是线上还一堆console.log...我猜很多人都会移除项 ...
最新文章
- python3 字符串 列表 字典 转换
- Spring-Bean的依赖注入分析-01
- python在线翻译脚本_用Python抓取百度翻译内容并打造自己的翻译脚本!
- mac使用Java命令运行Java程序
- TensorFlow手册链接
- 固态硬盘SSD的接口如何选择
- 在线数据迁移,数字化时代的必修课——京东云数据迁移实践
- 鼠标点击网页出现爱心特效
- 有限元与深度学习结合求解泊松方程-Petrov
- ArcGIS卸载--删除写入注册表相关
- Ball in Berland
- 蛋蛋弹车3-具有功能安全EPS系统设计(电机控制算法-PID)
- static_cast,dynamic_cast,const_cast详解
- 张艾迪(创始人):艾迪的学校与成长故事
- 人工智能可以像人类一样学习吗?
- 飞机qar数据可视化_航空公司的QAR是什么?如何用?
- 微信小程序把view居中_初识微信小程序
- 将各种格式flv,avi,mp4等的文件,转码成MP4(无音频)
- 利用开源工具搭一套汉英翻译系统(一):预处理工具
- 数字化转型背景下的测试转型
热门文章
- java开发用怎么软件开发_Java 9中的5个功能将改变您开发软件的方式(还有2个不会)...
- java jsp学习指南_JSP教程–最终指南
- jboss默认进程名称_快速指南:剖析JBoss BPM跨进程通信
- Spring@主要注释
- spring发邮件_跟踪异常–第4部分– Spring的邮件发件人
- 为使节构建控制平面的指南第3部分-特定于域的配置API
- jboss url路径_在JBoss的服务器端正确解码URL参数
- javaone_JavaOne 2012:观察与印象
- FizzBu​​zz Kata与Java流
- JavaFX将会留下来!