使用插件

Vite 可以通过插件进行扩展，这些插件基于 Rollup 精心设计的插件接口，并附带了一些 Vite 特有的选项。这意味着 Vite 用户可以利用 Rollup 插件成熟的生态系统，同时还能根据需求扩展开发服务器和 SSR 功能。

在 Scrimba 上观看交互式课程

添加插件

要使用某个插件，需要先将其添加到项目的 devDependencies 中，并在 vite.config.js 配置文件的 plugins 数组中引入。例如，要支持旧版浏览器，可以使用官方的 @vitejs/plugin-legacy 插件：

$ npm add -D @vitejs/plugin-legacy

import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

plugins 数组也支持将包含多个插件的预设作为一个数组元素。这对于使用多个插件实现的复杂功能（如框架集成）非常有用。数组会在内部被扁平化处理。

值为假的插件会被忽略，这可以用来方便地激活或停用插件。

查找插件

:::tip 提示
Vite 旨在为常见的 Web 开发模式提供开箱即用的支持。在搜索 Vite 或兼容的 Rollup 插件之前，请先查阅功能指南。在 Rollup 项目中许多需要插件才能解决的场景，在 Vite 中已经内置支持。
:::

查看插件章节了解官方插件的信息。已在 npm 上发布的社区插件则列在 Vite 插件注册表中。

强制插件顺序

为了与某些 Rollup 插件保持兼容，可能需要强制规定插件的执行顺序，或者只在构建时应用。这应该是 Vite 插件的实现细节。你可以使用 enforce 修饰符来强制指定插件的执行位置：

• pre：在 Vite 核心插件之前调用
• 默认：在 Vite 核心插件之后调用
• post：在 Vite 构建插件之后调用

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

详细信息请查看插件 API 指南。

条件应用

默认情况下，插件在开发服务器和生产构建时都会被调用。如果插件需要仅在开发或构建期间条件性地应用，请使用 apply 属性来限定仅在 'build' 或 'serve' 期间调用它们：

import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

构建插件

有关创建插件的文档，请查看插件 API 指南。