简单写一个vite插件

zoew
469 阅读3分钟

vite插件钩子

Vite打包的底层构建其实是基于Rollup的，在Rollup设计的接口基础上进行扩展，在此之上加入了自己特有的一些钩子函数。 看一下官方的描述

参数说明归属触发时机
options这是构建阶段的第一个挂钩。因为是在Rollup完全配置之前运行的，所以这个阶段访问不到任何上下文实例，起到合并配置等作用vite 和 rollup 共享服务器启动时
buildStart这个钩子可以用于访问Rollup的配置参数vite 和 rollup 共享服务器启动时
resolveId在解析模块时调用，用于可以返回一个特殊的Id来表示指定的模块vite 和 rollup 共享解析模块时
load解析加载模块时触发vite 和 rollup 共享解析模块时
transform解析代码模块时，对代码进行转换，并输出转换后的结果vite 和 rollup 共享解析模块时
buildEnd输出生成阶段的outputOptions，因为这是构建阶段的最后一个钩子vite 和 rollup 共享服务器关闭时
closeBundle调用bundle.close（）时，是服务关闭时被触发的一个钩子函数vite 和 rollup 共享服务器关闭时
config解析 Vite 配置前调用,返回用户原始配置，并能修改这个配置Vite独享服务器启动时
configResolved解析 Vite 配置后调用。使用这个钩子读取和存储最终解析的配置,并在合适钩子中使用Vite独享服务器启动时
configureServer用于配置开发服务器的钩子。钩子将在内部中间件被安装前调用Vite独享服务器启动时
configurePreviewServer与configureServer 相同，但用于预览服务器，也是在其他中间件安装前被调用Vite独享服务器启动时
transformIndexHtml转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文Vite独享编译时

在知道了这些个常用的钩子函数及其使用的时机，我们就可以根据自身需要编写插件。

插件编写

Vite插件本质上就是一个返回特定对象的函数，和Webpack的loader很像。来看下具体格式及部分参数

function plugin() {
    return {
        name: '', //插件名称
        apply: '',//指定调用模式，'build' 或 'serve'
        enforce: '', //插件的执行顺序 'pre' 或 'post',或 ''
        //钩子函数
        transform() {
        }
    }
}

enforce这个参数会控制插件的执行顺序。pre -> ' ' -> post，pre执行时机先于为空时，先于post

假设需求是，我们需要在编译输出的代码最后插入一段HTML代码，比如官网底部的Copyright等标注。

export default function insertHtml (){
     const style: string = `<style scoped>.style {
        position: fixed;
        left: 60px;
        bottom: 10px;
        z-index: 99999;
        color: #fff;
      } </style>`
    const fragment = `<div>插入HTML末尾的片段</div>`
    return {
        name: 'insert-html'
        apply: 'build'
        transformIndexHtml(html) {
           return `${html}${fragment}${style}`
        }
    }
}

因为是需要在构建的时候执行代码片段插入，所以要设置执行apply为 build，只会在打包的时候执行。开发的时候不执行。如果涉及css编写，也都是要按字符串的形式插入，可以直接拼接在代码段的前面或者后面。

插件应用

需要在 vite.congfig.ts 里面的 plugins 参数里面执行这个插件

import InsertHtml from '../../plugins/insertHtml'
export default defineConfig({ 
    plugins: [ InsertHtml() ]
})

这样，在打包的时候，这个插件就会执行。并且能在最终输出的html里面看到我们插入的代码片段。

image.png

写在最后

相比webpack插件的编写，个人感觉vite的插件编写和应用更易上手了一些。

文章介绍了一些常用的钩子函数，并简单编写了一个在html文件末尾插入注解的插件，算是对vite插件有初步的了解，其他详细的介绍和使用可以查看 官方文档

希望能为大家在需求开发过程中拓展实现思路。

avatar
文章
阅读
粉丝