VITE 【vite插件开发】

---

前言

vite插件的本质就是一个具有一些属性和钩子函数的对象

// vite-plugin-feature

export default {
    name:"vite-plugin-feature",// 必须的，将会在 warning 和 error 中显示
    
    load(id){
    }
}

---

一、vite插件与rollup插件的兼容性

在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙。
他表示,除了vite特定的钩子外，我们开发插件时看rollup插件开发文档即可

vite插件上的钩子和rollup插件的钩子表现是一致的，所有rollup插件上会调用的钩子，vite插件都会同样的调用，功能也一样

请注意 moduleParsed 钩子在开发中是 不会 被调用的，因为 Vite 为了性能会避免完整的 AST 解析。

---

二、创建一个vite插件

1. 插件的执行场景和顺序

执行顺序
有时候上一个插件的输出结果会作为下一个插件的参数进行传递，我们需要明白插件额执行顺序才能更好的控制插件执行的结果

function vitePluginFeature(){
   return {
	   enforce:"pre"|"post", // 指定插件执行顺序
   }	
}

解析后的插件将按照以下顺序排列：

• Alias：vite配置得别名处理
• 带有 enforce: ‘pre’ 的用户插件
• Vite 核心插件
• 没有 enforce 值的用户插件
• Vite 构建用的插件
• 带有 enforce: ‘post’ 的用户插件
• Vite 后置构建插件（最小化，manifest，报告）

---

执行场景
有的时候，我们需要在特定的时候才执行某些插件，比如开发阶段我们不执行代码压缩，在生产环境则需要执行。这时我们可以通过apply属性去控制

function vitePluginFeature() {
  return {
    name: 'vite-plugin-feature',
    apply: 'build' // 或 'serve',只在serve模式或build模式时调用插件,不定义则都执行
    // 更精细化的判断
    apply(config, { command }) {
  		// 非 SSR 情况下的 build
	  return command === 'build' && !config.build.ssr
	}
  }
}

---

2.开发习惯

一般来说都会用一个函数返回一个插件对象的形式来开发插件，以便在调用插件时能够传递参数

export default function vitePluginFeature(options){
	return {}
}

// 使用时
import vitePluginFeature from "vite-plugin-feature.js"
definedConfig({
	plugins:[vitePluginFeature({mode:"dev"})]
})

---

3.常用的属性

如果想看全部的属性请移步官网

{
	name:"vite-plugin-feature",// 必须的，将会在 warning 和 error 中显示
	apply:"serve"|"build", // 决定是在打包时还是开发时调用
	enforce:"pre"|"post", // 指定插件执行顺序
}

---

4.常用的钩子

{
	name:"vite-plugin-feature",// 必须的，将会在 warning 和 error 中显示
	
	
	// 一般在这个钩子内用来修改vite配置
	consfig(config){
		return config; // 返回的值将会作为新配置
	},

	// vite配置解析后执行，在这个钩子中可以读取配置
	configResolved(config){},
	// index.html 解析后执行
	transformIndexHtml(html,ctx){
		html.replace("txt1",'txt2'); // 可以在此处替换html文本
	},
	// 代码文件处理后执行
	transform(code){},
	
}

5.规范化路径

vite和rollup在处理路径上的标准并不一样，vite提供了normalizePath方法，使得在作为vite插件和rollup插件使用时路径能够保持一致。

import { normalizePath } from 'vite'

normalizePath('foo\\bar') // 'foo/bar'
normalizePath('foo/bar') // 'foo/bar'