Slidev 项目如何添加并配置 Vite 插件以及用 setup/vite-plugins.ts 按幻灯片数据注入插件【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 底层由 Vite 驱动因此可以用 Vite 的插件系统进一步定制幻灯片项目。当你需要在幻灯片项目里接入自己的 Vite 插件时有两条路径如果只是静态配置直接写在项目的vite.config.ts中如果插件的创建依赖解析后的幻灯片数据例如根据slides.md里解析出的内容动态决定挂载哪些插件就需要在项目根目录创建setup/vite-plugins.ts。这篇文章给出这两条路径的完整配置方式、约束条件和验证方法。前提Slidev 的 Vite 配置是怎么合并的在配置之前需要理解一点合并规则只要项目根目录存在vite.config.ts它就会被保留并与 Slidev、主题theme、插件包addons各自提供的 Vite 配置合并而不是被覆盖。Slidev 内部已经向 Vite 注册了以下插件vitejs/plugin-vueunplugin-vue-componentsunplugin-iconsvite-plugin-vue-markdownvite-plugin-remote-assetsunocss/vite如果要调整这些内置插件的参数不要重复import这些插件而是在vite.config.ts的slidev字段下传对应的选项例如import { defineConfig } from vite export default defineConfig({ slidev: { vue: { /* vue options */ }, markdown: { /* markdown-exit options */ markdownSetup(md) { /* custom markdown-exit plugins */ }, }, /* options for other plugins */ }, })文档把这种对内置插件的覆盖标注为高级特性Slidev 为这些插件预设了默认配置上面的写法会覆盖其中一部分可能导致应用无法正常工作修改前必须确认自己知道这些配置的作用。有一个硬性约束不允许在plugins数组里重新添加 Slidev 内部已使用的插件。文档给出的反例是下面这种写法import Vue from vitejs/plugin-vue import { defineConfig } from vite export default defineConfig({ plugins: [ Vue({ /* vue options */ }) ], })正确做法是把Vue选项传到slidev.vue字段如上一节所示。在 setup/vite-plugins.ts 中按幻灯片数据注入插件当插件需要依赖幻灯片数据时文档中的表述是 if you want to add plugins based on the slide datavite.config.ts不够用因为静态配置文件拿不到解析后的数据。此时在项目根目录创建setup/vite-plugins.ts文档给出的完整内容是import { defineVitePluginsSetup } from slidev/types export default defineVitePluginsSetup((options) { return [ // Your plugins here // Slide data is available as options.data.slides ] })要点回调参数options的类型是ResolvedSlidevOptions其中options.data为SlidevData文档明确说明幻灯片数据位于options.data.slides你可以在这个作用域内读取解析结果来条件性地返回插件数组。返回值就是 Vite 的插件选项类型上为VitePluginOptiondefineVitePluginsSetup只是类型包装原样返回函数。该文件按目录约定被加载Slidev 对每个 root用户项目、主题、addons都会检查setup/vite-plugins.ts是否存在存在就加载并执行其默认导出可参考 setups 类型定义 和 setup 文件加载逻辑。也就是说你的项目、使用的主题和 addons 都可以各自提供setup/vite-plugins.ts它们返回的插件会共同生效。这些插件在构建流程中的位置从 ViteSlidevPlugin 的实现可以看到Slidev 先创建自身的一整套内部插件markdown 解析、layout、monaco、unocss 等最后通过setupVitePlugins(options)加载setup/vite-plugins.ts返回的插件。内部包装逻辑在 packages/slidev/node/setups/vite-plugins.ts加载每个 root 下的setup/vite-plugins.ts把解析后的ResolvedSlidevOptions作为参数传入收集各文件返回的插件。这意味着setup/vite-plugins.ts中的插件拿到的options是完整解析后的配置包含data、roots、mode等字段类型见 options.ts而vite.config.ts拿不到这些。这就是两种路径的选择依据静态选项走vite.config.ts依赖幻灯片数据的动态插件走setup/vite-plugins.ts。验证插件已生效在项目根目录运行开发服务器确认配置没有语法或加载错误slidev slides.mdslides.md是默认入口slidev [entry]命令的默认值端口默认3030。如果vite.config.ts或setup/vite-plugins.ts写错服务器启动时会直接报错这是第一层验证。确认你注入的插件真正被调用。以vite:buildStart钩子打印日志为例把setup/vite-plugins.ts中的插件占位替换为import { defineVitePluginsSetup } from slidev/types export default defineVitePluginsSetup((options) { return [ { name: my-example-plugin, buildStart() { console.log(my-example-plugin loaded, slides:, options.data.slides.length) }, }, ] })这里options.data.slides是文档明确给出的数据访问路径具体读取哪些字段取决于你的插件用途上面的日志写法是示例。重启slidev slides.md后终端中出现对应console.log输出即说明插件已挂载且拿到了幻灯片数据。反向验证约束尝试在vite.config.ts的plugins中重新添加内置插件例如vitejs/plugin-vue按文档说明这是不允许的应改回slidev.vue字段传选项的方式。限制与边界通过slidev字段覆盖内置插件配置属于高级用法文档明确警告可能使应用无法正常工作修改前需要确认对 Slidev 默认配置的了解。setup/vite-plugins.ts的回调是同步返回插件数组类型上为VitePluginOption文档示例未展示异步创建插件的用法。主题和 addons 也可以提供自己的setup/vite-plugins.ts多个 root 的文件都会加载插件顺序跟随 root 的解析顺序用户项目、主题、addons。更多slidev字段下的可用选项参见 Vite 配置类型声明。下一步如果你只是调整内置插件参数vue、markdown、icons 等停留在vite.config.ts的slidev字段即可不必创建 setup 文件。需要按options.data.slides做动态决策时再引入setup/vite-plugins.ts。相关文档入口Configure Vite and Plugins、Directory Structure、CLI 命令。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Slidev 项目如何添加并配置 Vite 插件，以及用 setup/vite-plugins.ts 按幻灯片数据注入插件
Slidev 项目如何添加并配置 Vite 插件以及用 setup/vite-plugins.ts 按幻灯片数据注入插件【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevSlidev 底层由 Vite 驱动因此可以用 Vite 的插件系统进一步定制幻灯片项目。当你需要在幻灯片项目里接入自己的 Vite 插件时有两条路径如果只是静态配置直接写在项目的vite.config.ts中如果插件的创建依赖解析后的幻灯片数据例如根据slides.md里解析出的内容动态决定挂载哪些插件就需要在项目根目录创建setup/vite-plugins.ts。这篇文章给出这两条路径的完整配置方式、约束条件和验证方法。前提Slidev 的 Vite 配置是怎么合并的在配置之前需要理解一点合并规则只要项目根目录存在vite.config.ts它就会被保留并与 Slidev、主题theme、插件包addons各自提供的 Vite 配置合并而不是被覆盖。Slidev 内部已经向 Vite 注册了以下插件vitejs/plugin-vueunplugin-vue-componentsunplugin-iconsvite-plugin-vue-markdownvite-plugin-remote-assetsunocss/vite如果要调整这些内置插件的参数不要重复import这些插件而是在vite.config.ts的slidev字段下传对应的选项例如import { defineConfig } from vite export default defineConfig({ slidev: { vue: { /* vue options */ }, markdown: { /* markdown-exit options */ markdownSetup(md) { /* custom markdown-exit plugins */ }, }, /* options for other plugins */ }, })文档把这种对内置插件的覆盖标注为高级特性Slidev 为这些插件预设了默认配置上面的写法会覆盖其中一部分可能导致应用无法正常工作修改前必须确认自己知道这些配置的作用。有一个硬性约束不允许在plugins数组里重新添加 Slidev 内部已使用的插件。文档给出的反例是下面这种写法import Vue from vitejs/plugin-vue import { defineConfig } from vite export default defineConfig({ plugins: [ Vue({ /* vue options */ }) ], })正确做法是把Vue选项传到slidev.vue字段如上一节所示。在 setup/vite-plugins.ts 中按幻灯片数据注入插件当插件需要依赖幻灯片数据时文档中的表述是 if you want to add plugins based on the slide datavite.config.ts不够用因为静态配置文件拿不到解析后的数据。此时在项目根目录创建setup/vite-plugins.ts文档给出的完整内容是import { defineVitePluginsSetup } from slidev/types export default defineVitePluginsSetup((options) { return [ // Your plugins here // Slide data is available as options.data.slides ] })要点回调参数options的类型是ResolvedSlidevOptions其中options.data为SlidevData文档明确说明幻灯片数据位于options.data.slides你可以在这个作用域内读取解析结果来条件性地返回插件数组。返回值就是 Vite 的插件选项类型上为VitePluginOptiondefineVitePluginsSetup只是类型包装原样返回函数。该文件按目录约定被加载Slidev 对每个 root用户项目、主题、addons都会检查setup/vite-plugins.ts是否存在存在就加载并执行其默认导出可参考 setups 类型定义 和 setup 文件加载逻辑。也就是说你的项目、使用的主题和 addons 都可以各自提供setup/vite-plugins.ts它们返回的插件会共同生效。这些插件在构建流程中的位置从 ViteSlidevPlugin 的实现可以看到Slidev 先创建自身的一整套内部插件markdown 解析、layout、monaco、unocss 等最后通过setupVitePlugins(options)加载setup/vite-plugins.ts返回的插件。内部包装逻辑在 packages/slidev/node/setups/vite-plugins.ts加载每个 root 下的setup/vite-plugins.ts把解析后的ResolvedSlidevOptions作为参数传入收集各文件返回的插件。这意味着setup/vite-plugins.ts中的插件拿到的options是完整解析后的配置包含data、roots、mode等字段类型见 options.ts而vite.config.ts拿不到这些。这就是两种路径的选择依据静态选项走vite.config.ts依赖幻灯片数据的动态插件走setup/vite-plugins.ts。验证插件已生效在项目根目录运行开发服务器确认配置没有语法或加载错误slidev slides.mdslides.md是默认入口slidev [entry]命令的默认值端口默认3030。如果vite.config.ts或setup/vite-plugins.ts写错服务器启动时会直接报错这是第一层验证。确认你注入的插件真正被调用。以vite:buildStart钩子打印日志为例把setup/vite-plugins.ts中的插件占位替换为import { defineVitePluginsSetup } from slidev/types export default defineVitePluginsSetup((options) { return [ { name: my-example-plugin, buildStart() { console.log(my-example-plugin loaded, slides:, options.data.slides.length) }, }, ] })这里options.data.slides是文档明确给出的数据访问路径具体读取哪些字段取决于你的插件用途上面的日志写法是示例。重启slidev slides.md后终端中出现对应console.log输出即说明插件已挂载且拿到了幻灯片数据。反向验证约束尝试在vite.config.ts的plugins中重新添加内置插件例如vitejs/plugin-vue按文档说明这是不允许的应改回slidev.vue字段传选项的方式。限制与边界通过slidev字段覆盖内置插件配置属于高级用法文档明确警告可能使应用无法正常工作修改前需要确认对 Slidev 默认配置的了解。setup/vite-plugins.ts的回调是同步返回插件数组类型上为VitePluginOption文档示例未展示异步创建插件的用法。主题和 addons 也可以提供自己的setup/vite-plugins.ts多个 root 的文件都会加载插件顺序跟随 root 的解析顺序用户项目、主题、addons。更多slidev字段下的可用选项参见 Vite 配置类型声明。下一步如果你只是调整内置插件参数vue、markdown、icons 等停留在vite.config.ts的slidev字段即可不必创建 setup 文件。需要按options.data.slides做动态决策时再引入setup/vite-plugins.ts。相关文档入口Configure Vite and Plugins、Directory Structure、CLI 命令。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
