【前端工程化】经验总结01- vite项目打包buid之后会自动把所有的console.log过滤掉，生产环境打印日志log的方法，封装WebLogger打印日志

这个问题是我昨天刚刚遇到的，有一个线上的问题想调试一下，所以增加了很多console.log之类的打印日志，但是我重新build之后发现我的所有打印的log都没有了，一度开始怀疑人生。

原来

vite打包之后会自动把console.log等诸如此类的方法调用过滤掉

所以你想要在build之后的生产环境打印日志并且调试，那么需要重写打印日志的方法，比如这样

使用解构的方法解构出来单独的函数，再使用

（1）代码1

// 封装一个打印日志的函数

// 解构，再使用不会被vite打包给屏蔽
const { log, error, warn } = console

export const WebLogger = {
    log: log.bind(console)
    error: error.bind(console)
    warn: warn.bind(console)
}


// 使用的时候
WebLogger.log('info')

注意，其实任何项目封装一个log的函数很有必要，不光是因为vite打包有上述问题，也可以我们手动操控，使生产环境没有log打印出来，以免影响性能（注意，console打印过多是会影响性能的），我们只需稍微改造

（2）代码2

// 封装一个打印日志的函数

// 解构，再使用不会被vite打包给屏蔽
const { log, error, warn } = console
// 指定只有在开发环境才展示log
const showLog = process.env.NODE_ENV === 'development'
// 生产环境随便给他一个函数意思一下，一定要给他函数，要不然调用不了
const hideLogFunc = (...args) => args
export const WebLogger = {
    log: showLog ? log.bind(console) : hideLogFunc
    error: showLog ? error.bind(console) : hideLogFunc
    warn: showLog ? warn.bind(console) : hideLogFunc
}


// 使用的时候
WebLogger.log('info')

但是还有一种情况就是你确实需要在正式环境看日志，只需要修改一下showLog的判断条件，看一下下面的代码，

（3）代码3

// 封装一个打印日志的函数

// 解构，再使用不会被vite打包给屏蔽
const { log, error, warn } = console
// 指在开发环境或者localStorage设置showLog===1的时候展示log
const showLog = process.env.NODE_ENV === 'development' || localStorage.getItem('showLog') ==='1'
// 生产环境随便给他一个函数意思一下
const hideLogFunc = (...args) => args
export const WebLogger = {
    log: showLog ? log.bind(console) : hideLogFunc
    error: showLog ? error.bind(console) : hideLogFunc
    warn: showLog ? warn.bind(console) : hideLogFunc
}


// 使用的时候
WebLogger.log('info')

这样在我们生产环境，上线了之后，只需手动修改一下本地localStorage里面showLog的值就可以看见我们打印的log了。