携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
前言
最近使用 Vite + Vue3 + TS 做开发比较多，使用了这套技术栈后爱不释手的。同时呢，在自己的开源项目当中也会去使用一些插件。
这个时候就想起了，之前实习的那段时间有一件这样的事情。当时在前端部门的另一个小组主要做PC大屏大数据页面的业务，由于项目比较急碰巧当时自己的工作任务不紧就让我去帮他们分担一点点。
当中我的内心是天老爷，真的是不想去看ECharts那些配置项，杀了我吧。等我拉去项目代码后，简单的看了几个页面。看到几个了一两千行的代码，还是使用了统一封装过的图表组件，我知道这个项目维护起来不简单呐，不是一般人能维护下去的。
启动页面在浏览器后，我能明显的感受到页面的卡顿，虽然整个页面效果很炫很有那味，但是是领导爱看这种东西呀。
当我F12打开控制台，结果好多console.log()齐刷刷的下来，本来大数据图表渲染就比较卡。当时就受不了了。果然项目上了线上后，产品经理就来反馈页面太卡的问题。我的第一反应就是先把这些打印处理了再说。
插件介绍
经过上面一件小事之后，我就觉得上线的项目最好还是不能留日志打印，毕竟这个是开放出来的谁都能看到。
之后我就想开发这样一款插件了，在打包的时候将所有文件的 console 清除掉。正当我兴奋想准备动手学着写一款Vite插件的时候，我去GitHub搜索了一下。好家伙有人写了，那就不用动手了，直接用吧。
这款插件名称叫 vite-plugin-remove-console
插件目的很简单而且功能单一，所以源码很清楚。推荐刚刚开始想学习Vite插件的小伙伴们看看。接下来就简单看看它的源码。
源码解读
整个 src 就用到三个文件 src/index.ts，src/utils, src/transform.js
module.exports = function removeConsole(options?: Partial<Options>): Plugin {
const { external } = options || {};
return {
name: "vite:remove-console", // 插件名称
apply: "build", // 告诉Vite，该插件只在项目打包时使用
enforce: "post", // 告诉Vite，该插件应该在执行顺序
// 该钩子函数可以去修改项目中的源代码
transform(_source: string, id: string) {
// 排除所有的node_modules包
if (/node_modules/.test(id)) {
return {
code: _source,
map: null
};
}
// 只检测 .vue .svelte .jsx .tsx 文件
let reg = /(\.vue|\.svelte|\.[jt]sx?)$/.test(id);
// 排除开发者配置的 external 选项的文件
if (
external &&
external.length > 0 &&
getAbsolutePath(external).includes(id) &&
reg
) {
return {
code: _source,
map: null
};
} else {
// 其他文件进行清除console.log处理
// 内部使用了 transform.js 处理的，是一个打包后压缩过的文件
return {
code: transforms(_source),
map: null
};
}
}
};
};
module.exports.default = module.exports;
整个插件就只需要使用 transform 一个钩子函数，用于去清除源文件的 console.log 即可。
而清除的功能则是 src/transform.js 去处理的。可惜这个文件是一个打包压缩后的文件，就没法具体的去看里面的内容。
总结
写这一篇文章主要目的就是让想学Vite插件的小伙伴们有个案例可以看看。毕竟这个插件功能目前，源码少易懂。可以作为一个Vite插件入门来看。
