共计 2810 个字符,预计需要花费 8 分钟才能阅读完成。
前言
说起 console.log
调试,不必多说,那是十分的好用,开发中帮忙咱们解决了不少 Bug
。咱们常常能在 开发环境 中看见这一坨一坨的 console
调试。然而生产环境是绝不对不容许呈现 console
信息代码的。你还在手动一个一个删除吗,那得多累啊!
上面咱们来看一下这几种形式革除 生产环境 console
无用代码。
基本操作
Webpack 配置
uglifyjs-webpack-plugin
咱们能够看一下该插件介绍,该插件是用于缩小咱们代码 js
代码体积。并且如果装置运行该插件的话,node
版本是在 v6.9.0+
和Webpack
版本v4.0.0+
。
官网地址看这里:uglifyjs-webpack-plugin
装置
npm i uglifyjs-webpack-plugin
应用
在 webpack.config.js
文件下进行如下配置。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除正文
output:{comments: false},
compress: {
drop_console: true, // 删除所有调式带有 console 的
drop_debugger: true,
pure_funcs: ['console.log'] // 删除 console.log
}
}
})
]
}
}
配置完下面代码,重启即可看到成果。留神:代码只会在 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
该插件跟下面 uglifyjs-webpack-plugin
一样,都是用于缩小咱们代码 js
代码体积。
看下面形容:如果你的 Webpack
版本大于 5 +,则不须要装置此 terser-webpack-plugin
插件,会自带 terser-webpack-plugin
。但你的Webpack
版本还是 4,则你须要装置terser-webpack-plugin
4 的版本
装置
npm i terser-webpack-plugin@4
应用
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new TerserWebpackPlugin({
terserOptions: {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log', "console.table"] // 删除 console
}
}
});
]
}
}
该插件性能与下面一样,属性用法也一样,惟一该插件可反对 ES6
语法。都是在 生产环境 代码失效。
Vue-cli 配置
这是在 Vue-cli
我的项目中举荐应用的革除 console 插件。更多介绍看这里 babel-plugin-transform-remove-console
装置
npm i babel-plugin-transform-remove-console --save-dev
应用
在我的项目根目录 babel.config.js
文件下配置。该插件不辨别 生产环境 或者 开发环境,只有你配置都能失效。
module.exports = {
plugins: ["transform-remove-console"]
}
// 生产环境如下配置
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console')
}
module.exports = {
plugins: [...prodPlugins]
}
简略粗犷删除
接下来这个可是一个骚操作,瞪大眼睛看好了,哈哈哈。间接重写 console.log
的办法。
console.log = function () {};
灵活运用 VScode 编辑器
应用
间接全局搜寻本我的项目里 console.log
正则匹配,而后全副替换为空即可。
console\.log\(.*?\)
手写 Loader 删除 console
咱们来写一个简易版的革除 console 插件。
新建一个 js
文件,我这里名为 clearConsole.js
,其实这里也是用正则去匹配而后替换为空。如果不懂loader
则可看我这篇文章手写一个 Sass-loader。
clearConsole.js
const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {source = source.replace(reg, "")
return source;
}
在 Vue.config.js
配置
module.exports = {
// 省略...
configureWebpack: {
module: {
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: path.resolve(__dirname, "./clearConsole.js")
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: path.resolve(__dirname, "./clearConsole.js")
}
],
}
},
}
配置如上代码就能够啦~,革除 js
文件和 vue
文件里的 console.log
。exclude
代表不去 node_module
目录下查找。
谢谢观看,有帮忙能够关注一下公众号:前端娱乐圈
感激
谢谢浏览,如有帮忙请点个关注、珍藏吧
感觉有帮忙能够关注 前端娱乐圈 公众号,每天为你推送一篇小常识
大家也能够加我 微信 交个敌人,能够找我聊天或拉你进技术交换群