怎么使用插件

通过在vite.config.js中配置不同的插件使用

import { defineConfig } from "vite";
// 自定义插件
import myDemoPlugins  from "./plugins/ViteAliases.js";export default defineConfig({plugins:[myDemoPlugins()]
});

./plugins/ViteAliases.js

// vite 插件是一个函数通常，这个函数必须返回给vite一个配置对象
module.exports = () => {return {// name: "vite-plugin-vue-demo",// enforce: "pre",config: (config, env) => {// config: 目前的一个配置对象// env： mode：string , command: stringconsole.log(config, env);return {resolve: {},};}};
};

vite官网和社区分别提供了许多vite 插件

vite官方插件 https://vitejs.cn/vite3-cn/plugins/#official-plugins
vite社区插件 https://github.com/vitejs/awesome-vite#plugins

跟webpack的生态相比，vite确实还比不过，如果没有你想要的插件和配置，可能需要自己动手写插件。

手写vite插件

在手写vite插件前，需要了解vite官网提供的一些vite相关的生命周期，以及这些生命周期对应的一些钩子函数。

vite 官网 插件 API https://vitejs.cn/vite3-cn/guide/api-plugin.html

插件怎么命名

export default function myPlugin() {return {name: 'xxxx你的插件名称'}
}

如果你的插件只适用于特定的框架，它的名字应该遵循以下前缀格式：

vite-plugin-vue- 前缀作为 Vue 插件
vite-plugin-react- 前缀作为 React 插件
vite-plugin-svelte- 前缀作为 Svelte 插件

对于 Vite 专属的插件：

Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
在 package.json 中包含 vite-plugin 关键字。
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明（如，本插件使用了 Vite 特有的插件钩子）。

插件什么时候执行

一个 Vite 插件可以额外指定一个 enforce 属性（类似于 webpack 加载器）来调整它的应用顺序。enforce 的值可以是pre 或 post。解析后的插件将按照以下顺序排列：

	export default function myPlugin() {return {name: 'xxxx你的插件名称',enforce: "pre"}}

1. Alias
2. 带有 enforce: ‘pre’ 的用户插件
3. Vite 核心插件
4. 没有 enforce 值的用户插件
5. Vite 构建用的插件
6. 带有 enforce: ‘post’ 的用户插件
7. Vite 后置构建插件（最小化，manifest，报告）

插件引用场景控制

默认情况下插件在开发（serve）和构建（build）模式中都会调用。如果插件只需要在预览或构建期间有条件地应用，请使用 apply 属性指明它们仅在 ‘build’ 或 ‘serve’ 模式时调用：

function myPlugin() {return {name: 'build-only',apply: 'build' // 或 'serve'}
}

同时，还可以使用函数来进行更精准的控制：

apply(config, { command }) {// 非 SSR 情况下的 buildreturn command === 'build' && !config.build.ssr
}

可以使用的钩子

通用钩子 https://vitejs.cn/vite3-cn/guide/api-plugin.html#universal-hooks
vite独有的钩子 https://vitejs.cn/vite3-cn/guide/api-plugin.html#vite-specific-hooks