Vite 5打包时如何只清除console.log方法并保留console.info方法

在前端开发中，我们经常会使用console.log来输出调试信息。然而，在项目打包上线时，这些调试信息可能会暴露敏感数据或者影响性能，因此我们需要在打包时清除它们。但有时候，我们又希望保留console.info方法来输出一些重要的提示信息。那么，在Vite 5打包时如何实现只清除console.log方法并保留console.info方法呢？

我们需要了解Vite的打包配置。Vite使用Rollup进行打包，而Rollup提供了丰富的插件生态系统。我们可以使用@rollup/plugin-replace插件来实现我们的需求。

安装@rollup/plugin-replace插件：

npm install @rollup/plugin-replace --save-dev

接下来，在Vite的配置文件vite.config.js中进行配置。我们可以使用define选项来替换console.log方法为空函数，同时保留console.info方法。

import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    replace({
      'console.log': 'function() {}',
      preventAssignment: true
    })
  ]
};

在上述配置中，我们将console.log方法替换为空函数，而console.info方法则不会被替换，因此在打包后的代码中，console.log方法将不会输出任何信息，而console.info方法仍然可以正常使用。

需要注意的是，上述配置只会在生产环境中生效。如果我们希望在开发环境中仍然可以使用console.log方法进行调试，可以使用process.env.NODE_ENV来判断当前环境。

import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    replace({
      'console.log': process.env.NODE_ENV === 'production'? 'function() {}' : 'console.log',
      preventAssignment: true
    })
  ]
};

通过以上配置，我们就可以在Vite 5打包时只清除console.log方法并保留console.info方法了。这样既可以保证项目的安全性和性能，又可以在需要时输出重要的提示信息。