Vite 插件 API 插件配置

用户会将插件添加到项目的 devDependencies 中并使用数组形式的 plugins 选项配置它们。

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

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

假值的插件将被忽略，可以用来轻松地启用或停用插件。

​plugins也可以接受将多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性（如框架集成）很有用。该数组将在内部被扁平化（flatten）。

// 框架插件
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()]
})

简单示例

通常的惯例是创建一个 Vite/Rollup 插件作为一个返回实际插件对象的工厂函数。该函数可以接受允许用户自定义插件行为的选项。

引入一个虚拟文件

export default function myPlugin() {
  const virtualModuleId = @my-virtual-module
  const resolvedVirtualModuleId =  + virtualModuleId

  return {
    name: my-plugin, // 必须的，将会在 warning 和 error 中显示
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export const msg = "from virtual module"`
      }
    }
  }
}

这使得可以在 JavaScript 中引入这些模块：

import { msg } from @my-virtual-module

console.log(msg)

转换自定义文件类型

const fileRegex = /.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: transform-file,

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // 如果可行将提供 source map
        }
      }
    }
  }
}