移除生产环境 console.log

预计阅读时间: 2 分钟

业务需求：

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

现在可以通过第三方插件来统一处理console.log日志的打印，有了第三方插件的加持，就可以不用担心生产环境打印日志的问题了。

插件使用：

安装插件

npm

yarn

pnpm

bun

1npm install babel-plugin-transform-remove-console -D

npm

yarn

pnpm

bun

1npm install babel-plugin-transform-remove-console -D

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

方式一：

插件配置

1const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
2// 生产环境移除console
3if (process.env.NODE_ENV === "production") {
4	plugins.push("transform-remove-console");
5}
6
7module.exports = {
8	plugins: plugins,
9	presets: ["@vue/cli-plugin-babel/preset"]
10};

方式二：

插件配置

1module.exports = {
2	presets: ["@vue/cli-plugin-babel/preset"],
3	// 生产环境移除console
4	env: {
5		production: {
6			plugins: ["transform-remove-console"]
7		}
8	}
9};

方式三：

插件配置

1const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
2
3const plugins = [];
4
5module.exports = {
6	// 生产环境移除console
7	plugins: plugins,
8	presets: ["@vue/cli-plugin-babel/preset"]
9};

方案二

安装插件

安装插件

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

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

使用方法

使用方法

1const TerserPlugin = require("terser-webpack-plugin");
2
3module.exports = {
4	configureWebpack: {
5		minimizer: [
6			new TerserPlugin({
7				terserOptions: {
8					compress: {
9						pure_funcs: ["console.log"]
10					}
11				}
12			})
13		]
14	}
15};

注意事项：

此次代码配置示例是在 vue.config.js文件 📁 中配置的。

#移除生产环境 console.log

#业务需求：

#插件使用：

#方案二

移除生产环境 console.log

业务需求：

插件使用：

方案二