vite-插件认识

xY
1,095 阅读2分钟

这是我参与更文挑战的第8天，活动详情查看： 更文挑战

注：以下是个人理解、如有不对还望指正！

认识Vite插件

作为最近比较热门的打包工具Vite、笔者在上几篇文章中也介绍了Vite为什么这么快的个人理解（地址）、今天是周六作为一个终身学习实践者当然不会放过这么好的一个机会、所以笔者准备去实现一个之前写过的webpack插件copyWebpackPlugin、之前版本是webpack所以这次笔者想用Vite实现他、那么我们开始吧！

Vite的插件是基于Rollup的插件进行扩展的、所以如果你有Rollup插件开发的经验上手会更容易些、不会也没关系、学嘛、对Rollup插件进行扩展、顺便插入了一些Vite自带的一些钩子回调、不过相比webpack的插件Vite的插件开发会相对简单很多下面我们开始学习Vite插件语法和Vite所提供给我们的钩子函数！

Vite插件语法

  • 插件名称写法 Vite 插件应该有一个带 vite-plugin 前缀、语义清晰的名称、比如我们马上写的 vite-plugin-copyVitePlugin

  • 使用一个插件

// vite.config.js
import copyVitePlugin from "./build/plugin/copyVitePlugin.js"

export default {
 plugins:[
   //使用插件
   copyVitePlugin()
  ]
}

//copyVitePlugin.js
export default function copyVitePlugin(){
    return {
        name:"copyVitePlugin",
    }
}

插件是一个函数、函数返回一个配置对象、Vite执行时候会在不同阶段去执行对象所定义的钩子方法、下面我们了解下Vite给我们提供了哪些钩子

认识Vite插件提供的钩子函数

  • 通用钩子

    option(){} 替换或操纵Rollup选项、影响打包的行为 (只会启动执行一次的钩子)

    buildStart(){} 开始创建(只会启动执行一次的钩子)

    以下钩子每次有模块请求都会被触发

    resolveId(){}

    load() {}

    transform() {}

    以下钩子在服务器关闭时被调用：

    buildEnd(){}

    closeBundle(){}

  • Vite特有钩子

    config(){}

    config(){} 在被解析之前修改 Vite 配置。钩子接收原始用户配置（命令行选项指定的会与配置文件合并）和一个描述配置环境的变量，包含正在使用的 mode 和 command。它可以返回一个将被深度合并到现有配置中的部分配置对象，或者直接改变配置（如果默认的合并不能达到预期的结果）。

    configResolved(){}

    configResolved(){} 确认最后的的Vite配置

    configureServer(){}

    是用于配置开发服务器的钩子、可利用

    transformIndexHtml(){}

    handleHotUpdate(){}

总结

笔者也只对API入门了下、准备使用Vite编写一个copyVitePlugin以加深Vite插件得使用

avatar
文章
阅读
粉丝