Categories: Vite教程

Vite 插件 API 约定

Vite 插件扩展了设计出色的 Rollup 接口,带有一些 Vite 独有的配置项。因此,你只需要编写一个 Vite 插件,就可以同时为开发环境和生产环境工作。

如果插件不使用 Vite 特有的钩子,可以作为 兼容 Rollup 的插件 来实现,推荐使用 Rollup 插件名称约定

  • Rollup 插件应该有一个带 ​rollup-plugin-​ 前缀、语义清晰的名称。
  • 在 package.json 中包含 ​rollup-plugin​ 和 ​vite-plugin​ 关键字。

这样,插件也可以用于纯 Rollup 或基于 WMR 的项目。

对于 Vite 专属的插件:

  • Vite 插件应该有一个带 ​vite-plugin-​ 前缀、语义清晰的名称。
  • 在 package.json 中包含 ​vite-plugin​ 关键字。
  • 在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明(如,本插件使用了 Vite 特有的插件钩子)。

如果你的插件只适用于特定的框架,它的名字应该遵循以下前缀格式:

  • vite-plugin-vue-​ 前缀作为 Vue 插件
  • vite-plugin-react-​ 前缀作为 React 插件
  • vite-plugin-svelte-​ 前缀作为 Svelte 插件

Vite 对虚拟模块的规范是在路径前加上 ​virtual:​。如果可能的话,插件名应该作为命名空间使用,以避免与生态系统中的其他插件发生冲突。例如,​vite-plugin-posts​ 可以让用户引入 ​virtual:posts​ 或 ​virtual:posts/helpers​ 虚拟模块,以获得构建时信息。在内部,使用虚拟模块的插件在解析模块 ID 时应以 ​

唐伯虎点蚊香

前端小白,想各位学习!

Share
Published by
唐伯虎点蚊香

Recent Posts

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

3 天 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

1 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

3 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago