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