(04)vite 插件 plugins

发布时间:2023年12月21日


在这里插入图片描述

怎么使用插件

通过在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

在这里插入图片描述

文章来源:https://blog.csdn.net/glorydx/article/details/134883140
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。