（04）vite 插件 plugins

怎么使用插件

通过在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: string
      console.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 情况下的 build
  return 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