移除生产 console.log

业务需求：

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

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

插件使用：

npm

yarn

pnpm

bun

deno

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

npm

yarn

pnpm

bun

deno

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

注：可以通过 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 文件 📁 中配置的。

#移除生产 console.log

#业务需求：

#插件使用：

#方案二

移除生产 console.log

业务需求：

插件使用：

方案二