写一个vite插件处理console

已于 2025-06-18 17:25:08 修改
阅读量724 收藏 17
点赞数 20
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
于 2025-06-18 17:05:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42027681/article/details/148740455

写一个vite插件去除代码中的console

使用babel做处理。简单处理，复杂情况未考虑。
学习babel写的demo。

项目根目录新建文件
babel-plugin-remove-console.js
rollup-plugin-remove-console.js

在这里插入图片描述

babel-plugin-remove-console.js

import { declare } from '@babel/helper-plugin-utils';

const removeConsolePlugin = declare((api, options, dirname) => {
  api.assertVersion(7);

  return {
    visitor: {
      CallExpression(path) {
        // 检查是否是console.method()调用
        const { callee } = path.node;
        if (
          callee.type === 'MemberExpression' &&
          callee.object.type === 'Identifier' &&
          callee.object.name === 'console' &&
          callee.property.type === 'Identifier'
        ) {
          // 如果是独立语句 (ExpressionStatement)，直接移除整个语句
          if (path.parent.type === 'ExpressionStatement') {
            path.parentPath.remove();
          }
          // 否则，替换为undefined (避免语法错误)
          else {
            path.replaceWith(api.types.identifier('undefined'));
          }
          return;
        }
      },
    },
  };
});

export default removeConsolePlugin;

为什么要处理这些呢

 callee.type === 'MemberExpression' &&
          callee.object.type === 'Identifier' &&
          callee.object.name === 'console' &&
          callee.property.type === 'Identifier'

在https://astexplorer.net/ 可以尝试下
在这里插入图片描述

当然也可以写成这样

 visitor: {
      MemberExpression(path){
      if(path.node.object.name=='console'){
        console.log(path.parentPath.node)
      		path.parentPath.remove();
      	}
      }
    },

rollup-plugin-remove-console.js

import { createFilter } from '@rollup/pluginutils';
import { transformFromAstSync } from '@babel/core';
import parser from '@babel/parser';
import removeConsolePlugin from './babel-plugin-remove-console';
export default function myPlugin(pluginOptions = {}) {
  const defaultExclude = /node_modules/;

  // 如果用户提供了exclude选项，合并默认排除
  const excludePattern = pluginOptions.exclude
    ? [defaultExclude, pluginOptions.exclude]
    : defaultExclude;
  const filter = createFilter(
    pluginOptions.include || /\.(js|ts|jsx|tsx|vue)$/,
    excludePattern
  );

  return {
    name: 'rollup-plugin-remove-console',

    transform(src, id) {
      if (!filter(id)) {
        return null;
      }
      const ast = parser.parse(src, {
        sourceType: 'unambiguous',
      });

      const { code, map } = transformFromAstSync(ast, src, {
        plugins: [[removeConsolePlugin]],
      });
      return {
        code,
        map, // 或者提供一个 sourcemap 对象
      };
    },
  };
}

vite.config.js引入使用

在这里插入图片描述
如果你使用了多个插件，需要把自己定义的这个去除插件放到最后面，等其他代码都转换完毕后，只需要处理js语法即可。
比如我们这里引入了vuejsx,支持vuejsx语法。
在这里插入图片描述

他是怎么处理的呢。
一般vue编译的时候，会把vue文件中的，样式，模版，脚本拆分。
在这里插入图片描述

我这里的jsx写法，所以是lang.jsx
在这里插入图片描述
经过vue,vuejsx插件的加工后，成了这样
在这里插入图片描述
所以我们只需要考虑console本身即可。

扩展

忽略某些

增加配置来处理，如，我们可以配置console的哪些方法不移除或者哪些方法移除。
在这里插入图片描述
在vite插件中，将pluginOptions传递给babel插件，这里文件名起的是rollup-plugin-remove-console.js因为没用到vite的特性hooks所以也支持rollup(按理来说，不过没有测试)。

在这里插入图片描述
在这里插入图片描述
可以看到传递过来的参数。
在这里插入图片描述

怎么获取是log还是warn还是error呢。
在这里插入图片描述

在这里插入图片描述
所以要获取下 const name = path.node.property.name;

import { declare } from '@babel/helper-plugin-utils';
const removeConsolePlugin = declare((api, options, dirname) => {
  api.assertVersion(7);
  const ignores = options.ignore || [];
  return {
    visitor: {
      MemberExpression(path) {
        if (path.node.object.name == 'console') {
          const name = path.node.property.name;
          const isIgnore = ignores.includes(name);
          if (!isIgnore) {
            path.parentPath.remove();
          }
        }
      },
    },
  };
});

export default removeConsolePlugin;

或者

import { declare } from '@babel/helper-plugin-utils';
const removeConsolePlugin = declare((api, options, dirname) => {
  api.assertVersion(7);
  const ignores = options.ignore || [];
  return {
    visitor: {
      CallExpression(path) {
        // 检查是否是console.method()调用
        const { callee } = path.node;
        if (
          callee.type === 'MemberExpression' &&
          callee.object.type === 'Identifier' &&
          callee.object.name === 'console' &&
          callee.property.type === 'Identifier'
        ) {
          const name = callee.property.name;
          const isIgnore = ignores.includes(name);
          if (!isIgnore) {
            // 如果是独立语句 (ExpressionStatement)，直接移除整个语句
            if (path.parent.type === 'ExpressionStatement') {
              path.parentPath.remove();
            }
            // 否则，替换为undefined (避免语法错误)
            else {
              path.replaceWith(api.types.identifier('undefined'));
            }
          }
        }
      },
    },
  };
});

export default removeConsolePlugin;

在这里插入图片描述

替换

比如我们有这样两个个函数。上报数据，上报异常。
在这里插入图片描述
假设，在开发环境我们不需要上报，也就是开发环境不替换，一般也是开发环境不替换。
我们需要在插件运行前获取环境
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
传递给babel插件
在这里插入图片描述
当然其实这一步不用，你可以在babe插件里面直接获取。
在babel插件里面接收下。在这里插入图片描述

如果不是开发环境就执行插件。
在这里插入图片描述
或者我们简单点。

在vite插件中直接不往下走了，不执行babel插件了。
在这里插入图片描述
然后继续完善替换的逻辑。
假设我们的插件是这样传递参数的。
在这里插入图片描述
babel获取下
在这里插入图片描述

替换的逻辑为
当匹配上的时候，把原先的参数带进去，再额外携带一个文件的信息。

在这里插入图片描述

source为来源。
在这里插入图片描述
source大概这样
在这里插入图片描述
然后我们看下效果。
开发环境
在这里插入图片描述

build后
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

完整代码

rollup-plugin-remove-console.js

rollup-plugin-remove-console.js

import { createFilter } from '@rollup/pluginutils';
import { transformFromAstSync } from '@babel/core';
import parser from '@babel/parser';
import removeConsolePlugin from './babel-plugin-remove-console';
export default function myPlugin(pluginOptions = {}) {
  const defaultExclude = /node_modules/;
  let isDev = false;

  // 如果用户提供了exclude选项，合并默认排除
  const excludePattern = pluginOptions.exclude
    ? [defaultExclude, pluginOptions.exclude]
    : defaultExclude;
  const filter = createFilter(
    pluginOptions.include || /\.(js|ts|jsx|tsx|vue)$/,
    excludePattern
  );
  // console.log(pluginOptions);

  return {
    name: 'rollup-plugin-remove-console',
    options(inputOptions) {
      isDev = process.env.NODE_ENV === 'development';
      console.log('isDev', isDev);
      return inputOptions;
    },

    transform(src, id) {
      if (!filter(id) || isDev) {
        return null;
      }

      const ast = parser.parse(src, {
        sourceType: 'unambiguous',
      });
      const paths = id.split('/');
      const source = paths[paths.length - 1];
      console.log(source);
      const { code, map } = transformFromAstSync(ast, src, {
        plugins: [[removeConsolePlugin, { ...pluginOptions, source, isDev }]],
      });

      return {
        code,
        map, // 或者提供一个 sourcemap 对象
      };
    },
  };
}

babel-plugin-remove-console.js

babel-plugin-remove-console.js

import { declare } from '@babel/helper-plugin-utils';
import { types as t } from '@babel/core';

const removeConsolePlugin = declare((api, options, dirname) => {
  api.assertVersion(7);
  const ignores = options.ignore || [];
  const replaceList = options.replaceList || [];
  const source = options.source;
  let isDev = process.env.NODE_ENV == 'development';
  if (typeof options.isDev != 'undefined') {
    isDev = options.isDev;
  }
  return {
    visitor: {
      MemberExpression(path) {
        if (path.node.object.name == 'console' && !isDev) {
          const name = path.node.property.name;
          const replaceItem = replaceList.find((item) => item[0] === name);
          if (replaceItem) {
            const replaceName = replaceItem[1];
            if (!replaceName) {
              console.warn('请配置替换的函数');
            }
            if (replaceList.length > 0) {
              const args = path.parentPath.node.arguments;
              const loggerCall = t.callExpression(t.identifier(replaceName), [
                ...args,
                t.stringLiteral(source),
              ]);
              loggerCall.isDone = true;
              path.parentPath.replaceWith(loggerCall);
            }
          }

          const isIgnore = ignores.includes(name);
          if (!isIgnore) {
            path.parentPath.remove();
          }
        }
      },
    },
  };
});

export default removeConsolePlugin;

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import rollupPluginRemoveConsole from './rollup-plugin-remove-console.js';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vite.dev/config/
export default defineConfig({
  //
  plugins: [
    vue(),
    vueJsx(),
    rollupPluginRemoveConsole({
      ignore: ['log', 'error'],
      replaceList: [
        ['log', 'uploadLog'],
        ['error', 'uploadError'],
      ],
    }),
  ],
  base: './',
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

main.js

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

const upData = (type, args) => {
  fetch(`/api/${type}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(args),
  });
};

window.uploadLog = (...args) => {
  upData('log', args);
};
window.uploadError = (...args) => {
  upData('error', args);
  // fetch
};

createApp(App).mount('#app');
同事写的console.log太多令人烦恼？来手撕一个vite插件去掉它
weixin_42684490的博客
05-07 588
不知道各位同学在开发的过程中有没有遇到这样的一种情况：就是跟你一起合作做项目的同学调试的时候打了不少console，然后提交代码的时候没删。打印得多了，可能就长成下面的样子。特别是有一些在公共的数据变化时打印，就更加惨不忍睹。这就给我们自己调试的时候，想在控制台找到自己打印的东西比较麻烦，虽然说花点心思找一下或者搜一下也能找到，但是我为啥要花时间花心思在这上面呢？而且这么多打印的东西看着就烦。今天，我们就写一个vite插件，来去掉同事写的，当然，要保留我们自己写的。按理来说，
Vite: 插件开发
Wang的专栏
06-28 1867
说到自定义的能力，肯定很容易想到 插件机制 ，利用一个个插件来扩展构建工具自身的能力虽然 Vite 的插件机制是基于 Rollup 来设计的，但实际上 Vite 的插件机制也包含了自己独有的一部分，与Rollup 的各个插件 Hook 并非完全兼容因此我们重点关注 Vite 独有的部分以及和 Rollup 所区别的部分，而对于 Vite 和 Rollup 中相同的 Hook (如 resolveId 、load 、 transform )只是稍微提及，就不再展开赘述。
vite项目当中如何移除项目中的console和其他生产日志
任磊
02-21 9564
vite移除项目中的console
vue3 vite.config.ts配置去除console
偏执的小男孩儿
03-21 1022
vue3 vite.config.ts配置去除console
为什么在 Vite 的 esbuild 配置中移除 debugger 和 console？
why404
05-07 708
在使用 Vite 构建前端项目时，开发者可能会注意到一个看似矛盾的现象：尽管 Vite 默认使用 Rollup 进行打包，但某些代码优化（如移除 debugger 和 console）却配置在 esbuild 选项中。这背后的原因是什么？
vite-plugin-remove-console：一键移除生产环境中的console语句
gitblog_00735的博客
03-30 489
vite-plugin-remove-console：一键移除生产环境中的console语句 vite-plugin-remove-console Vite plugin that remove all the specified console types in the production environment ...
vite如何build时清除console.log()
biaobiaogege的博客
04-02 6630
vite打包时清除console.log()
Vite 插件配置与开发
最新发布
越陌度阡
06-22 959
Vite插件开发指南：扩展构建功能的最佳实践 Vite插件基于Rollup插件体系扩展，支持开发和生产环境功能集成。开发前需熟悉Rollup插件生命周期，优先检查现有方案避免重复开发。关键开发要点包括： 通过vite.config.js配置插件，支持组合多个插件 提供文件转换、虚拟模块等常用模式示例 区分通用钩子（如buildStart）和Vite特有钩子（如configureServer） 强调插件命名规范、执行顺序控制和路径规范化 推荐使用vite-plugin-inspect调试插件 开发过程中可利用
vite 配置打包之后去掉console 和 debugger
m0_54849806的博客
03-03 974
import { defineConfig } from 'vite' import { resolve } from 'path' import vue from '@vitejs/plugin-vue' import { viteMockServe } from 'vite-plugin-mock' import viteSvgIcons from 'vite-plugin-svg-icons' // https://vitejs.dev/config/ export default defineC.
Vite的虚拟模块插件-JavaScript开发
05-26
vite-plugin-virtual带HMR插件的虚拟模块，用于Vite入门安装Vite插件虚拟：$ npm install -D vite-plugin-virtual添加到vite-plugin-virtual带HMR插件的虚拟模块，用于Vite入门，安装Vite虚拟插件： $ npm install -...
学习前端记录（一）1-20
故里2130
11-29 2192
举例解决的问题是：Element-plus点击按钮后，会显示激活状态，除非再次点击空白的地方，才会取消，刷新的颜色就不一样。1.在main.js中，全局注册// 当被绑定的元素插入到 DOM 中时……el.blur();});})2.使用，增加v-blur即可刷新。
Vue3+Vite打包后清除console和debugger调试代码
Libei123321的博客
01-15 657
有的开发习惯不是特别好，会偶尔将一下调试代码，例如console和debugger等代码粗心的提交到线上分支中，console可能会导致泄露数据或隐私，debugger可能会在用户偶然间打开控制台影响用户体验。在vite和webpack项目中，自带去除调试代码功能，需要在vite.consif.js中配置。这里我们主要针对vite项目提供两种解决方案。1.vite.config.js中配置。2.使用插件Terser。
打包后，轻松删除所有console输出：给你的代码一次“静音“的机会！
(ง •̀_•́)ง
04-12 751
在生产环境中的应用程序中留下了一堆调试时使用的console输出而感到尴尬？我将向你展示如何通过打包Vite来删除所有的console输出。你的代码现在已经被压缩、混淆，并且所有的console输出都不见了！将这段代码放在你的应用程序的入口文件中，它将为你提供一次"静音"的机会，让你的控制台保持寂静无声。的插件来压缩和混淆我们的代码，同时删除所有console输出。现在我们需要在Vite的配置文件中添加一些代码，以便使用。现在，运行你的Vite打包命令，让魔法发生吧！第二步：配置Vite。
vue3+vite打包去除console打印代码
mengameng97的博客
03-11 474
配置打包之后去除调试的输出，提高网站性能
webpack5-手撸RemoveConsolePlugin插件
qq_36579455的博客
09-11 815
webpack5，自定义webpack plugin插件，入门级，如何在前端项目webpack中去除console语句
Vue3 Vite 生产环境如何移除项目中的console + 其他生产日志 + sourcemap
m0_48968874的博客
07-01 1844
Vue3 Vite 生产环境如何移除项目中的console + 其他生产日志 + sourcemap
Vue 项目优化——移除console
足各路
06-08 2597
插件 babel-plugin-transform-remove-console 安装依赖 npm install babel-plugin-transform-remove-console --save-dev 在babel.config.js进行配置 关键代码 // 这是项目发布阶段需要用到的 bable 插件 const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('trans.
vite 打包 保留 console
04-20
### 如何在 Vite 构建时保留 `console` 日志 Vite 默认会在生产构建过程中移除所有的 `console` 语句，这是因为它使用了 Rollup 的 `terser` 插件来进行代码压缩和优化。如果需要在打包后的文件中保留这些 `console` 语句，可以通过调整配置实现。 #### 方法一：禁用 Terser 压缩器的日志删除功能 可以在 `vite.config.js` 中设置 `build.terserOptions.compress.drop_console` 属性为 `false` 来阻止移除 `console` 语句： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ build: { terserOptions: { compress: { drop_console: false, // 不移除 console 语句 }, }, }, }); ``` 此方法适用于使用默认的 Terser 进行代码压缩的情况[^1]。 #### 方法二：自定义 Rollup 插件行为 如果你正在使用其他工具链或者想要更灵活地控制日志的行为，也可以通过引入第三方插件来完成这一需求。例如，`rollup-plugin-terser` 提供了类似的选项。 安装依赖： ```bash npm install rollup-plugin-terser --save-dev ``` 然后在 `vite.config.js` 文件中进行如下配置： ```javascript import { defineConfig } from 'vite'; import terser from 'rollup-plugin-terser'; const { terser: terserPlugin } = terser; export default defineConfig({ build: { rollupOptions: { plugins: [ terserPlugin({ // 自定义 terser 行为 compress: { drop_console: false, }, }), ], }, }, }); ``` 这种方法提供了更大的灵活性，并允许开发者进一步定制构建过程中的具体细节[^2]。 #### 方法三：利用环境变量区分开发与生产模式下的日志记录方式 另一种推荐的方式是基于运行环境动态决定是否打印日志信息。比如，在开发环境中保持完整的日志输出；而在生产环境下则有条件地过滤掉部分敏感或冗余的信息。 示例代码片段展示如何根据 NODE_ENV 判断当前所处状态并相应处理： ```javascript if (process.env.NODE_ENV !== 'production') { console.log('This message will only appear during development.'); } ``` 这样既满足了调试期间对于详尽反馈的需求，又能在正式上线前有效减少无意义的数据暴露风险[^3]。 --- ### 总结 以上介绍了三种不同的策略帮助你在采用 Vite 工具链的情况下维持必要的控制台消息可见度。无论是简单修改官方内置参数还是深入探索外部扩展可能性都各有优劣，请依据实际项目情况做出最佳抉择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码哈士奇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值