JavaScript 中怎么使用 Vite 插件系统扩展前端构建能力-js教程-PHP中文网

vite插件系统基于rollup api并扩展开发专属钩子，通过vite.config.js注册插件以增强开发服务器和构建流程能力，支持语法转换、资源优化、环境注入等，纯js项目亦可使用。

javascript 中怎么使用 vite 插件系统扩展前端构建能力

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 项目，也能靠插件解决实际问题：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

处理 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 文件末尾自动加一行注释：

export function addBanner() {
  return {
    name: 'add-banner',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code + '\n// Built with Vite';
      }
    }
  }
}

然后在配置中 plugins: [addBanner()] 即可生效。开发阶段和构建阶段都会触发该逻辑。