前端项目中忽略 console.log 语句

最新推荐文章于 2024-10-25 10:56:23 发布

南乡人

最新推荐文章于 2024-10-25 10:56:23 发布

阅读量347

点赞数

分类专栏：前端文章标签：前端 javascript webpack

本文链接：https://blog.youkuaiyun.com/qq_37086982/article/details/120971214

版权

前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了在前端项目中如何方便地处理console.log语句，避免在打包上线时手动清理。提供了两种解决方案：一是利用webpack和uglifyjs-webpack-plugin插件自动移除；二是选择重写console.log函数，在入口文件main.js中实现，以便定制项目特有的打印样式和规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

console.log 是项目开发时常用的调试语句，打包上线时，如果一个个处理非常麻烦。以下有俩种方案处理

一. webpack 方式

通过插件uglifyjs-webpack-plugin 自动去除

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
    devServer: {
        proxy: {
            '/xxx': {
                target: '',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/xxx': 'xxx',
                },
            },
        },
    },
    publicPath: './',
}

if (process.env.NODE_ENV === 'production') {
    config.configureWebpack = {
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    }
}

module.exports = config

二. 重写console.log 函数

在main.js (入口文件)中引入此函数重载

export function rewirteLog() {
    console.log = (function (log) {
        return process.env.NODE_ENV == 'development'? log : function() {}
    }(console.log))
}