Vite 学习（四） - vite 插件预学习

上一小节我们对 rollup 和 esbuild 的使用有了基本的了解，了解了二者主要的 hook 使用。vite 插件需要兼容 rollup 和 esbuild 的插件机制，虽然 vite 兼容大部分 rollup 插件，但不是所有钩子都支持，本小节介绍下 vite 中的钩子及插件开发流程。

插件命名

对于 rollup 插件的命名有两种，一种是 rollup-plugin-xxx，这种是社区通用的，不是官方团队开发的，一种是 @rollup/xxx，这种是官方的插件，@rollup 代表组织，个人还不能申请。我们自己开发的 vite 插件命名规则也保持 vite-plugin-xxx 格式。

兼容 rollup 的钩子

以下钩子在服务器启动时被调用：（devServer 启动时，就第一次触发）

• options
• buildStart

以下钩子会在每个传入模块请求时被调用：

• resolveId 找到对应的文件
• load 文件加载源码
• transform 源码转化

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

• buildEnd
• closeBundle

如果我们想执行 rollup 特有的钩子，可以配置打包阶段

vite.config.js
build: {
  rollupOptions:{
    plugins: [] // 可以执行所有 rollup 的钩子，因为打包用的 rollup
  }
}

注意：modulePased 不会被调用，防止 vite 对代码执行 ast 解析，因为 rollup 处理代码慢，插件执行完传给 esbuild 解析执行，速度效率高，rollup