关于vite: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}
    }
}