移除生产环境console.log

最新推荐文章于 2024-10-08 11:52:24 发布

原创最新推荐文章于 2024-10-08 11:52:24 发布 · 163 阅读

CC 4.0 BY-SA版权

本文介绍了在项目开发中如何通过第三方插件解决console.log日志在生产环境中的问题。在开发环境，console.log用于调试，但上线时需移除。文章提到了两种解决方案：一是使用babel-plugin-transform-remove-console插件，通过配置babel.config.js文件在生产环境移除console.log；二是利用terser-webpack-plugin，配置vue.config.js以达到同样目的。

业务需求：

随着项目开发迭代，代码越来越多，在开发环境时，大多需要console.log打印日志做相应的处理，还有就是通过console.log()日志的状态来定位bug的位置。协同开发过程中，每个开发成员都也有可能打印console.log，有时候可能忙于疏忽，忘记注释掉打印的日志，也有肯能打印的信息是一些涉及用户个人信息安全的日志信息。当上生产环境时，这些日志信息都不应该出现在控制台。若是一个一个去找，去注释代码，这肯定不现实。
现在可以通过第三方插件来统一处理console.log日志的打印，有了第三方插件的加持，就可以不用担心生产环境打印日志的问题了。

插件使用：

安装插件

yarn add babel-plugin-transform-remove-console -D
// or
npm install babel-plugin-transform-remove-console --save-dev

注：可以通过yarn或npm来安装依赖；-D 等价于 --save-dev，意思是将依赖安装在开发环境中。

方式一：

const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
// 生产环境移除console
if (process.env.NODE_ENV === "production") {
	plugins.push("transform-remove-console");
}

module.exports = {
	plugins: plugins,
	presets: ["@vue/cli-plugin-babel/preset"]
};

方式二：

module.exports = {
	presets: ["@vue/cli-plugin-babel/preset"],
  // 生产环境移除console
	env: {
		production: {
			plugins: ["transform-remove-console"]
		}
	}
};

方式三：

const IS_PROD = ["production","prod"].includes(process.env.NODE_ENV);

const plugins = [];

module.exports = {
   // 生产环境移除console
  plugins: plugins,
	presets: ["@vue/cli-plugin-babel/preset"]
};

方案二

安装插件

yarn add terser-webpack-plugin -D
// or
npm install terser-webpack-plugin --save-dev

注：方案一和方案二配置移除console.log()是在babel.config.js中配置的。

使用方法

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  configureWebpack: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            pure_funcs: ["console.log"]
          }
        }
      })
    ]
  }
};

注：此次代码配置是在vue.config.js中配置的。