Vite插件系统基于Rollup API并扩展开发专属钩子，通过vite.config.js注册插件以增强开发服务器和构建流程能力，支持语法转换、资源优化、环境注入等，纯JS项目亦可使用。
JavaScript 项目中使用 Vite 插件系统，本质是通过 vite.config.js 注册插件，让开发服务器和构建流程支持额外能力——比如自动注入环境变量、转换语法、优化资源、集成测试工具等。它不依赖框架，纯 JS 项目也能用。
插件怎么装和注册
Vite 插件分官方和社区两类，安装方式统一：
- 用 npm 或 pnpm 安装插件包，例如：
npm install -D @vitejs/plugin-legacy（兼容旧浏览器） - 在
vite.config.js的plugins数组里引入并调用，如：import legacy from '@vitejs/plugin-legacy'export default { plugins: [legacy()] } - 多数插件接受配置对象，比如
legacy({ targets: ['ie >= 11'] })
常用插件场景举例
即使纯 JavaScript 项目，也能靠插件解决实际问题：
-
处理 JSON 或 CSS：Vite 默认支持
.json和.css，但若需 PostCSS 或 Sass，加@rollup/plugin-sass或postcss相关插件即可 -
注入全局变量：用
vite-plugin-environment或原生define配置，把process.env.NODE_ENV映射为字面量，避免运行时报错 -
预加载或懒加载优化：
vite-plugin-preload自动为关键资源生成<link rel="preload"> -
代码检查与提示：配合
vite-plugin-eslint，在保存时校验 JS 语法，错误直接显示在终端和浏览器控制台
自己写一个简单插件
插件本质是一个返回对象的函数，含 name 和钩子（如 configureServer、transform）。例如，给所有 JS 文件末尾自动加一行注释：
立即学习“Java免费学习笔记（深入）”；
export function addBanner() {
return {
name: 'add-banner',
transform(code, id) {
if (id.endsWith('.js')) {
return code + '\n// Built with Vite';
}
}
}
}
然后在配置中 plugins: [addBanner()] 即可生效。开发阶段和构建阶段都会触发该逻辑。
插件共享开发与构建逻辑
Vite 插件基于 Rollup 的 API 设计，但扩展了开发专属钩子（如 configureServer、handleHotUpdate）。这意味着：
- 一个插件既能改开发服务器行为（比如代理请求），也能参与生产打包（比如压缩 HTML）
- 无需写两套逻辑，
transform钩子在 dev 和 build 中都执行，buildEnd只在构建完成时触发 - 调试时可打印日志：
console.log('Plugin running in', process.env.NODE_ENV)
