大家好,我是若川。早些天时,我看到一个后端公众号发《辞退了一个前端》,当时还想着现在后端公众号都开始吊打前端了嘛。其中有个理由就是线上还一堆console.log...我猜很多人都会移除项目中无用的console.log。可以复习一下。
前言
说起console.log
调试,不用多说,那是非常的好用,开发中帮助我们解决了不少Bug
。我们经常能在开发环境中看见这一坨一坨的console
调试。但是生产环境是绝不对不允许出现console
信息代码的。你还在手动一个一个删除吗,那得多累啊!
下面我们来看一下这几种方式清除生产环境console
无用代码。
基本操作
Webpack配置
uglifyjs-webpack-plugin
uglifyjs-webpack-plugin
我们可以看一下该插件介绍,该插件是用于减少我们代码js
代码体积。并且如果安装运行该插件的话,node
版本是在v6.9.0+
和Webpack
版本v4.0.0+
。
官网地址看这里:uglifyjs-webpack-plugin
安装
使用
在webpack.config.js
文件下进行如下配置。
配置完上面代码,重启即可看到效果。注意:代码只会在production(生产环境)环境下有效,看上面我们的配置mode: production
,就是生产环境。来讲解一下上面这俩个属性drop_console
和pure_funcs
的区别,前者则是删除所有带console的前缀的调试方法,如:console.log
、console.table
、console.dir
只要带有console
前缀则全部删除。而后者则是配置,就是数组的值是什么它才会删除什么,比如pure_funcs:[console.log, console.dir]
那么只会删除这两项,则不会删除代码中的console.table
代码。
以上代码放到生产环境下,console调试代码即可清除,但是还有一个问题需要注意,就是该插件只支持
ES5
语法,如果你的代码中涉及到ES6
语法则会报错。
terser-webpack-plugin
terser-webpack-plugin
该插件跟上面uglifyjs-webpack-plugin
一样,都是用于减少我们代码js
代码体积。
看上面描述:如果你的Webpack
版本大于5+,则不需要安装此terser-webpack-plugin
插件,会自带terser-webpack-plugin
。但你的Webpack
版本还是4,则你需要安装terser-webpack-plugin
4的版本
安装
使用
该插件功能与上面一样,属性用法也一样,唯一该插件可支持ES6
语法。都是在生产环境代码生效。
Vue-cli配置
这是在Vue-cli
项目中推荐使用的清除console插件。更多介绍看这里 babel-plugin-transform-remove-console
安装
使用
在项目根目录babel.config.js
文件下配置。该插件不区分生产环境或者开发环境,只要你配置都能生效。
简单粗暴删除
接下来这个可是一个骚操作,瞪大眼睛看好了,哈哈哈。直接重写console.log
的方法。
灵活运用VScode编辑器
使用
直接全局搜索本项目里console.log
正则匹配,然后全部替换为空即可。
手写Loader删除console
我们来写一个简易版的清除console插件。
新建一个js
文件,我这里名为clearConsole.js
,其实这里也是用正则去匹配然后替换为空。如果不懂loader
则可看我这篇文章手写一个Sass-loader。
clearConsole.js
在Vue.config.js
配置
配置如上代码就可以啦~,清除js
文件和vue
文件里的console.log
。exclude
代表不去node_module
目录下查找。
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。