了解 Vite 插件

众所周知 Vite 是基于 Rollup 的构建工具,Vite 插件为了优化、扩展项目构建系统功能的工具。

比如 vite-plugin-eslint 为我们提供了代码分析的功能,帮助我们在开发过程中的风格一致性。

简单示例

本文中的示例是基于 Vite + Vue3.x + TypeScript 来实现。

插件命名应该遵守社区的规则,如果你的插件不使用 Vite 特有的钩子,应该使用 rollup-plugin- 作为前缀;反之应该使用 vite-plugin- 作文前缀,如果插件只适用于特定的框架,应该使用 vite-plugin-vue- 作为前缀。

// plugins/vite-plugin-xxx/index.ts
import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',}
}

apply 默认在开发 serve 和构建 build 模式下都会调用。

钩子函数

Vite 插件的钩子函数可以帮助我们在构建流程中插入自定义的事件逻辑;

由于 Vite 是基于 Rollup 实现的,所有 Vite 在遵循 Rollup 构建时的钩子同时为我们提供了 Vite 独有的钩子。

config

config 钩子在运行前执行,用于解析与修改 Vite 的默认配置。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',config(config, { command }) {if (command === 'serve') {config.server.port = 3000}},}
}

以上的示例中,我们对原有配置的默认端口号5173修改为3000,当然这样的修改毫无意义,因为我们可以在 vite.config.ts 中直接去修改端口号,而本篇文章的目的是为了理解 config 钩子的作用。

configResolved

configResolved 钩子在解析 Vite 配置之后调用,用于获取最终的配置。

在以下的示例中对参数的进行校验以及插件初始化任务的执行。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',config(config) {console.log('config', config)},configResolved(resolvedConfig) {console.log('configResolved', resolvedConfig)// 判断参数是否正确if (!resolvedConfig.base) {console.error('配置错误')return}// 初始化任务// initCoustomPlugin(resolvedConfig)},}
}

configureServer

configureServer 钩子用于配置开发服务器的钩子,我们通常在这里添加自定义的中间件。

在以下的示例中自定义了一个 /_dev 的接口,由此可见通过 configureServer 钩子可以在开发阶段与项目进行结合,可以扩展前端操作 os 等能力。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',configureServer(server) {server.middlewares.use('/_dev', async (req, res) => {res.writeHead(200, { 'Content-Type': 'application/json' })res.end('Hello VitePlugin')})},}
}

configurePreviewServer

configurePreviewServer 钩子与 configureServer 钩子一样,但 configurePreviewServer 用于预览服务器,通过 vite preview 命令启动。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',configurePreviewServer(server) {server.middlewares.use('/_dev', async (req, res) => {res.writeHead(200, { 'Content-Type': 'application/json' })res.end('Hello PreviewServer')})},}
}

transformIndexHtml

transformIndexHtml 钩子可以动态的修改或者注入 HTML 的内容,以及实现自定义的处理逻辑。

比如一下的示例中,我们在 #app 的节点下插入了 loading... 的文案,由此我们可以扩展更多的玩法,比如注入一些 loading 加载的动画。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',transformIndexHtml(html) {return html.replace('<div id="app">', `<div id="app">loading...`)},}
}

handleHotUpdate

handleHotUpdate 钩子用于自定义执行 HMR 热更新的处理。

import type { Plugin } from 'vite'export default (): Plugin => {return {name: 'vite-plugin-xxx',apply: 'serve',handleHotUpdate(ctx) {// 热更新的文件信息console.log(ctx)// 热更新自定义事件ctx.server.ws.send({type: 'custom',event: 'custom',data: 'custom',})},}
}

页面上调用监听,并自定义处理更新的逻辑。

if (import.meta.hot) {import.meta.hot.on('custom', data => {// 执行自定义更新console.log(data)})
}

总结

Vite 插件系统为开发者提供了丰富的扩展,极大提高了开发的效率以及项目构建时的扩展性。

在日常开发过程中,使用 Vite 的插件,编写自己的插件,通过 Vite 插件的系统简化工作的流程是非常棒的一件事情。

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信,我们一同探讨学习!

如果觉得这篇文章对你有所帮助,点赞、在看是最大的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645118.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三、安全工程—密码学(CISSP)

目录 一、密码学术语 二、密码学历史 三、密码系统 1.对称密码技术

讲讲当下热门编程语言优势、缺点、应用场景、生态

讲讲当下热门编程语言优势、缺点、应用场景、生态环境 Python&#xff1a; 优势&#xff1a;语法简洁&#xff0c;易于学习&#xff1b;丰富的库和框架支持多种应用。 缺点&#xff1a;运行速度较慢&#xff1b;全局解释器锁&#xff08;GIL&#xff09;限制多线程并发。 应用…

跟着pink老师前端入门教程-day09

二十二、定位 22.1 为什么需要定位 1. 某个元素可以自由的在一个盒子内移动位置&#xff0c;并且压住其他盒子 2. 当我们滚动窗口时&#xff0c;盒子是固定屏幕某个位置的 解决方法&#xff1a; 1. 浮动可以让多个块级盒子一行没有缝隙排列显示&#xff0c;经常用于横向排…

Postgresql中的jsonb数据类型学习使用

pgsql是在9.2版本中引入了对于json的支持 一般情况下使用到json数据格式的时候&#xff0c;99%都是查询&#xff0c;所以接下来看一下项目中对于json类型的数据是如何查询的 定义表 CREATE TABLE tv_sup_sl_dw_query (id varchar(200) NOT NULL,sup_record_id varchar(100) …

数列排序——模拟

给定一个数列 a&#xff0c;这个数列满足ai ! aj(i ! j)&#xff0c;现在要求你把这个数列从小到大排序&#xff0c;每次允许你交换其中任意一对数&#xff0c;请问最少需要几次交换&#xff1f; 输入 第一行是一个整数&#xff0c;代表数字个数n(1 ≤ n ≤ 1e5). 第二行有n个…

reset.css重置样式

reset.css 是重置样式表&#xff0c;统一各浏览器的基础样式&#xff0c;下面列出几个常见的 reset文件&#xff0c;常放在公共样式表中引用 淘宝的reset blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {m…

STL第三讲

第三讲 stl六大部件&#xff1a;算法是函数模板&#xff0c;其他的是类模板 算法形式&#xff1a;传入两个迭代器&#xff08;第三个参数可能有&#xff1a;一个比较的准则 算法需要的所有信息从迭代器获取 迭代器分类 基于红黑树的结构是双向迭代器&#xff1b; 基于hash的取…

【计算机网络】UDP协议与TCP协议

文章目录 一、端口号1.什么是端口号2.端口号范围划分3.认识知名端口号(Well-Know Port Number)4.netstat5.pidof 二、UDP协议1.UDP协议端格式2.UDP的特点3.面向数据报4.UDP的缓冲区5.UDP使用注意事项6.基于UDP的应用层协议 三、TCP协议1.TCP协议段格式1.1理解封装解包和分用1.2…

python蓝桥杯备考——常见切片操作

python蓝桥杯备考——常见切片操作 1、常见切片操作2、练习 1、常见切片操作 当我们使用切片操作时&#xff0c;我们可以从一个序列&#xff08;如字符串、列表或元组&#xff09;中选择一个子序列。 切片操作的一般语法是 sequence[start:stop:step]&#xff0c;其中&#x…

进程通信与socket编程实践之猜数字小游戏

socket是实现进程通信的一种重要方式&#xff0c;本文将通过socket编程实现服务器进程与客户端进程之间的通信&#xff0c;并在通信之外实现猜数字的小游戏。 1. 设计思路 本文设计的C/S结构的猜数字游戏功能如下&#xff1a;服务器端自动生成一个1-100之间的随机数字&#x…

100T数据存进服务器分几步?

大家好&#xff0c;我是豆小匠。 这期来聊聊数据存储相关的问题&#xff0c;包括&#xff1a; 容量评估。技术选型。容灾处理。 另外&#xff0c;文末赠送免费定制红包封面哦&#xff01; 1. 容量评估 通过对容量&性能的评估&#xff0c;可以把业务需求转化成技术语言描…

python3-cookbook-保留最后 N 个元素

第一章&#xff1a;数据结构和算法 Python 提供了大量的内置数据结构&#xff0c;包括列表&#xff0c;集合以及字典。大多数情况下使用这些数据结构是很简单的。但是&#xff0c;我们也会经常碰到到诸如查询&#xff0c;排序和过滤等等这些普遍存在的问题。 因此&#xff0c;这…

鲲鹏微认证——openEuler开源操作系统迁移实践

文章目录 为什么要系统搬迁为什么选择欧拉欧拉系统迁移概述实施路径工具实战 为什么要系统搬迁 2020年12月&#xff0c;CentOs作为由开源社区免费提供的操作系统&#xff0c;宣布将对CentO58于2021年底停止服务&#xff0c;CentO57则于2024年6月底停止服务。 这将直接导致操作…

设计一个停车场

约束和假设 我们应该支持哪种类型的车辆&#xff1f; motorcycle, Car, Bus 每种车型占用的停车位数量是否不同&#xff1f; YesMotorcycle spot -> MotorcycleCompact spot -> Motorcycle, CarLarge spot -> Motorcycle, CarBus can park if we have 5 consecutive …

Linux系统SSH远程管理服务

目录 一、SSH服务介绍 1、SSH协议是什么&#xff1f; 2、SSH的优点 3、SSH的客户端与服务端 4、SSH的原理 4.1 公钥首次连接原理 4.2 ssh加密通讯原理 4.2.1 对称加密 4.2.2 非对称加密 4.2 ssh远程登录 二、服务端配置 1、常见配置项 1.1 修改默认端口 1.2 禁止…

未来已来:AI引领智能时代的多领域巨变

大家好&#xff0c;今天我们将深入探讨人工智能如何彻底改变我们的生活方式&#xff0c;领略未来的无限可能性。 1. 医疗革新&#xff1a;AI担任超级医生 医疗领域是AI最引人注目的战场之一。智能医学影像诊断系统&#xff0c;不仅能够精准识别病变&#xff0c;还能辅助医生提…

VS Code使用Git管理开发项目流程

以VSCode远程连接虚拟机开发为例&#xff0c;已经配置好SSH 在Github上搜索心仪的项目&#xff0c;比如权限管理 点击fork到自己账户仓库 虚拟机下创建一个目录 1)mkdir java_test 2)切换到java_test 初始化并克隆项目 1&#xff09; git init:初始化仓库 2&#xff09; g…

node淘宝新镜像地址

最新的配置淘宝镜像的淘宝官方提供的方法 npm config set registry https://registry.npmmirror.com如果你想将npm的下载源恢复为默认的官方源&#xff0c;可以使用以下命令&#xff1a; npm config set registry https://registry.npmjs.org你可以使用以下命令来查看当前npm…

掼蛋功能之识别性格篇

常说&#xff1a;千人千面。大多数人一到牌局的场面&#xff0c;往往精神便会放松&#xff0c;面貌神情不再收敛&#xff0c;一言一行体现出的性格暴露无疑&#xff0c;具体表现为以下几种&#xff1a; 1、浮躁冲动型&#xff1a;此类人多数不讲究团队配合&#xff0c;自顾自出…

UE5 - Polycam扫描文件导入插件

Polycam是利用Gaussian Splatting进行3D重建的3D扫描相关软件&#xff0c;其对应有UE引擎的插件&#xff08;Plugin_XV3dGS&#xff09;可以把相关格式的文件导入到引擎&#xff1b; 首先Polycam的官网为&#xff1a;My Captures | Polycam 可以下载各种用户扫描文件&#xff…