plugins:

vite 提供了强大的插件扩展功能，可以利用插件做到很多的事情。

查找插件：

需要用到的插件数组。

官方插件

社区插件

Vite Rollup 插件, 兼容的 Rollup 插件

awsome-rollup 插件列表

unplugin, 用于构建工具的统一插件系统。

添加一个插件

1. 安装插件到 devDependencies;
2. vite.config.js 中进行配置；

DEMO:

// 安装
$ npm install -D @vitejs/plugin-legacy

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

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

强制插件排序

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

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

可在 Vite Rollup 插件 兼容性列表中注意 enforce 标签和流行插件的使用说明。查看哪些插件需要做 enforce修饰符处理；使用方式，如：

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

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

插件的按需使用

插件的按需使用，可使用 apply 属性来做处理；默认插件在 开发（serve）和生产（build）两种模式下都会调用。如果想让插件在其中一种情况下调用，这时 apply 属性就派上了用场了；如：

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

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

插件扁平化使用：

install 插件到 devDependencies中，plugins 数组中配置他们；

如下：

// vite.config.js
import vitePlugin from 'vite-plugin-feature'
import rollupPlugin from 'rollup-plugin-feature'

export default defineConfig({
  plugins: [vitePlugin(), rollupPlugin()],
})

也可将多个插件作为单个插件的预设；如，可将多个插件打包为一个插件来使用，降低插件集成的复杂度；

如下：

// 框架插件
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'

export default function framework(config) {
  return [frameworkRefresh(config), frameworkDevTools(config)]
}

// vite.config.js
import { defineConfig } from 'vite'
import framework from 'vite-plugin-framework'

export default defineConfig({
  plugins: [framework()],
})