Vite 的插件机制是基于 Rollup 的插件机制实现的，但是又进行了一些扩展。Vite 的插件机制是通过钩子函数实现的，当 Vite 运行时，会通过钩子函数调用插件中的方法，插件可以在这些方法中干预 Vite 的构建过程。,我们主要讨论插件的机制，Api详情请看官网介绍,通用的钩子：https://cn.vitejs.dev/guide/api-plugin.html#universal-hooks,Vite 独有的钩子：https://cn.vitejs.dev/guide/api-plugin.html#vite-specific-hooks,下面我们看看插件的原理。,Rollup 的插件机制实现主要基于两点:,插件可以通过 Rollup 提供的 addHook 方法相对应的 Hook 列表中添加回调函数:,Vite 主要将用户插件排序，然后和内置的插件配置合并，传递给了 Rollup 打包。,关键的部分源码如下：,Vite 使用插件时，需要将插件放入 plugins 的数组中如下：,
,插件配置,接下来我们自定义几个插件，感受下 Vite 的插件机制。,写这几个插件是为了理解插件机制，官方已经提供了相关的配置或者现成的插件,Vite 默认的端口不是 8080了，有点不太习惯，所以自己写个插件自动切换端口。,,修改端口,由于这个操作是转换 index.html文件，所以需要使用专用钩子transformIndexHtml,,添加版本号,Vite 插件机制主要在整个构建过程的不同时机暴露出钩子函数供开发者灵活自定义构建过程。所以理解构建流程，才能更好的开发一个优秀的插件。
文章版权声明
1 原创文章作者：cmcc，如若转载，请注明出处： https://www.52hwl.com/26620.html
2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈
3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)
4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别
微信扫一扫 
支付宝扫一扫 