【Vite】Vite配置文件中的插件学习

vite插件

1、介绍：

vite会在生命周期的不同阶段去调用不同的插件以达到不同的目的

2、常用插件：

①vite-aliases
**作用：**检测你当前目录下包括src在内的所有文件夹，并帮助我们去生成别名

import { defineConfig } from "vite"
import { ViteAliases } from "vite－aliases" 

export default defineConfig({
	plugins:[ // 可以为一个数组或者对象，配置插件
		ViteAliases()
	]
})

手写vite-alias插件：
执行时机：在vite执行配置文件之前去改写配置文件

const fs = require("fs")
const path = require("path")

// 区分目录和文件
funciton diffFileAndDir(diffResult = [],basePath){
	const result = {
		dirs:[],
		files:[]
	}
	
	diffResult.forEach(name=>{
		const currentFileState = fs.statSync(path.resolve(__dirname,basePath + "/" + name))
		const isDirectory = currentFileState.isDirectory()
		if(isDirectory){
			result.dirs.push(name)
		}
		else{
			result.files.push(name)
		}
	})
	
	return result
}

// 获取所有的目录
function getTotalSrcDir(){
	const result = fs.readdirSync(path.resolve(__dirname,"../src")
	const diffResult = diffDirAndFile(result,"../src")
	const resolveAliasesObj = {}
	diffResult.dirs.forEach(dirName => {
		const key = ˋ@${dirName}ˋ
		const absPath = path.resolve(__dirname,"../src" + "/" + dirName)
		resolveAliasesObj[key] = absPath
	})
	return resolveAliasesObj
}

// vite的插件必须返回给vite一个配置对象，这里写成一个函数的形式是可以方便扩展
module.export = ()=>{
	return {
			// config:目前的配置对象；env：配置环境（mode：模式，command：指令）
			config(config,env){
				// 在config函数里面可以返回一个对象，这个对象是部分vite.config.js配置，将会进行与原来合并
				const aliases = getTotalSrcDir()
				return {
					// 将src目录下的所有文件进行别名控制
					resolve:{
						alias:aliases
					}
				}
			}
		}

}

②vite-plugin-html
**作用：**动态的去控制index.html文件的内容
使用：

import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
	plugins:[
		createHtmlPlugin({
			inject:{ // 注入到页面当中的数据
				data:{
					title:'主页'
				}
			}
		})
	]

手写vite－plugin－html：

module.export = (options) => {
	return {
		transformIndexHtml:{
			enforce:'pre',// 将插件的执行周期提前
			transform:(html,ctx)=>{
				return html.replace(/<%= title %>/g,options.inject.data.tiltle)
			}
		}
	}
}

③vite-plugin-mock
**作用：**模拟数据
使用：

import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
	plugins:[
		// 调用这个方法之后，将会自动去读取mock文件
		viteMockServe()
	]
})

// mock.js文件
module.exports = [
	{
		method:'post',
		url:'/api/users/',
		response:({body})=>{
			return {
				code:200,
				msg:'success',
				data:[]
			}
		}
	}
]

手写vite-plugin-mock：

export default (options)=>{
	// 这个插件主要去拦截http请求，在写fetch或者axios去发起请求的时候，请求路径如果baseURL没写的话将会发送到vite的开发服务器上
	return {
		configureServe(server){
			const mockStat = fs.statSync(path.resolve("mock"))
			const isDirectory = mockStat.isDirectory()
			let mockResult = []
			if(isDirectory) {
				mockResult = require(path.resolve(process.cwd(),'mock/index.js'))
			}

			// 服务器相关配置
			server.middlewares.use((req,res,next)=>{
				const matchItem = mockResult.find(mockDescriptor => mockDescriptor === req.url)
				// 匹配到请求路径
				if(matchItem){
					const responseData = matchItem.response(req)
					res.setHeader('Content-Type','application/json')
					res.end(JSON.stringfy(responseData))
				}
				else{
					next()
				}
			})
		}
	}
}

3、vite独有的生命周期函数

export defineConfig({
	plugins:[
		{
			config(options){},
			configureServer(server){},
			transformIndexHtml(html){},
			// 整个配置文件解析流程完全完毕以后会走的狗钩子
			configResolved(options){},
			// 开在开启vite preiview时候会走的钩子
			configurePreviewServer(server){}，
		}
	]
})