Vite如何自定义插件？

基本语法

定义

比如我们要开发一个插件 DemoPlugin ，直接新建文件 demp-plugin.ts后写入如下代码：

import type { Plugin } from 'vite'

export default function DemoPlugin(): Plugin {
    return {
        // 插件名称
        name: 'DemoPlugin',

        // 代码转译
        transform(code, id, opt) {
            // todo
        }
    }
};

使用

定义好了以后，就和普通的插件一样使用即可，比如在 vite.config.js 文件中：

import { defineConfig } from 'vite'
import DemoPlugin from './demp-plugin'

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

选项

我们在开发插件的时候，可以配置“插件名称name”和“代码转译transform”等，下面来说明具体可以配置的内容。

温馨提示：具体的细节可以去 ‘./node_modules/vite/dist/node/index.d.ts’ 查看。

enforce

vite 和 rollup 共享

值可以是'pre'或'post'，用于控制插件的执行时机，具体执行顺序如下：

alias resolution → enforce: 'pre' plugins → vite core plugins → normal plugins → vite build plugins → enforce: 'post' plugins → vite build post plugins

transform

vite 和 rollup 共享

这个函数的功能类似于 webpack 的 loader，应该有一个返回值。

apply

vite 和 rollup 共享

值可以是字符串'serve'、'build'或一个函数，用于控制开发时候还是打包时候使用，或者通过函数动态判断。

函数的结构如下：

import type { Plugin, UserConfig, ConfigEnv } from 'vite'

export default function DemoPlugin(): Plugin {
    return {
        ...
        apply: (config: UserConfig, env: ConfigEnv): boolean => {
            // todo
        }
    }
}

config

vite 独享

在解析 Vite 配置前调用，可以自定义配置，会与 vite 基础配置进行合并：

import type { Plugin, UserConfig, ConfigEnv } from 'vite'

export default function DemoPlugin(): Plugin {
    return {
        ...
        config: (config: UserConfig, env: ConfigEnv): UserConfig | null | void | Promise<UserConfig | null | void> => {
            // todo
        }
    }
}