Storybook 手动接入 Preact 与 Vite在.storybook/main中启用storybook/preact-vite框架【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybookstorybook/preact-vite是 Storybook 面向使用 Preact 构建、由 Vite 驱动的应用所提供的官方框架包用于在隔离环境中开发、记录与测试 UI 组件。本指南聚焦于一个最常见、也最关键的手动接入动作把 Storybook 的 framework 字段从旧的storybook/preact-webpack5切换为storybook/preact-vite。读完本文你将掌握 JS 与 TS 两种形态的.storybook/main配置改写方法、配套的框架包安装命令、framework.options的扩展用法以及该框架在仓库内的底层实现与依赖边界从而在一分钟内在既有 Preact 项目中完成构建器切换。为什么要切换 framework 配置在 Storybook 中framework框架包同时决定了三件事渲染组件所用的渲染器renderer、组件模块的加载解析方式以及底层使用的构建器builder。因此framework 字段不仅仅是一个元数据标记它直接决定整个 Storybook 工作台是基于 Webpack 还是基于 Vite 来启动与构建。仓库中 Preact 官方接入文档 docs/get-started/frameworks/preact-vite.mdx 的 FAQ 一节专门回答了如何手动安装 Preact framework这一高频问题先安装storybook/preact-vite包再更新.storybook/main.js|ts中的 framework 属性。这也正是本主题的唯一核心操作删除framework: storybook/preact-webpack5若存在替换为framework: storybook/preact-vite。对于使用 Vite 的 Preact 项目切换到storybook/preact-vite可以让 Storybook 复用项目自身的 Vite 配置插件、别名、代理等并显著受益于 Vite 的原生 ESM 开发体验。手动安装框架包在修改配置之前需要先以开发依赖的形式安装框架包。官方文档 docs/_snippets/preact-vite-install.md 给出了三种主流包管理器的命令任选其一npm install --save-dev storybook/preact-vitepnpm add --save-dev storybook/preact-viteyarn add --dev storybook/preact-vite从框架包源码 code/frameworks/preact-vite/package.json 可以看到它的依赖边界这正是理解为什么切一行配置就够的关键直接依赖storybook/builder-vite与storybook/preact即构建器与 Preact 渲染器由该框架包自动衔接peerDependencies 声明preact 10、vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0以及storybook。也就是说storybook/preact-vite本身并不要求你在core.builder里额外注册 Vite 构建器安装它即同时引入了 Vite 构建链路与 Preact 渲染能力。在.storybook/main中启用框架JavaScript 项目.storybook/main.jsdocs/_snippets/preact-vite-add-framework.md给出的核心配置如下注释掉或删除原有的storybook/preact-webpack5写入storybook/preact-vite。export default { // ... // framework: storybook/preact-webpack5, Remove this framework: storybook/preact-vite, // Add this };TypeScript 项目.storybook/main.ts对于 TypeScript 项目配置类型直接取自storybook/preact-vite导出的StorybookConfig从而让framework、stories、addons等字段获得完整的类型检查import type { StorybookConfig } from storybook/preact-vite; const config: StorybookConfig { // ... // framework: storybook/preact-webpack5, Remove this framework: storybook/preact-vite, // Add this }; export default config;注意这里的import type只引入类型而非运行时代码框架的运行时加载仍由framework字段中的包名完成。export default config之后重启storybook dev即可生效。使用 options 对象做扩展配置framework 字段除了可以写成字符串还可以写成{ name, options }对象形式用于传入框架级选项。仓库类型定义 code/frameworks/preact-vite/src/types.ts 揭示了其类型结构export type FrameworkOptions { builder?: BuilderOptions; }; type StorybookConfigFramework { framework: | FrameworkName // storybook/preact-vite | { name: FrameworkName; options: FrameworkOptions; }; // ... };结合官方文档 docs/_snippets/preact-vite-framework-options.md.storybook/main.js的完整写法为export default { framework: { name: storybook/preact-vite, options: { // ... }, }, };对应的.storybook/main.tsimport type { StorybookConfig } from storybook/preact-vite; const config: StorybookConfig { framework: { name: storybook/preact-vite, options: { // ... }, }, }; export default config;FrameworkOptions目前只暴露builder一个键类型为BuilderOptions它透传给storybook/builder-vite。因此凡是 Vite 构建器支持的选项如lazyCompilation、reactDocgen等具体以 code/builders/builder-vite 中定义的BuilderOptions为准都可以放进这里的options.builder。需要为 framework 注入构建级配置时对象形式是唯一入口纯字符串形式则使用全部默认值。版本要求与适用前提从源码 code/frameworks/preact-vite/package.json 与官方文档 docs/get-started/frameworks/preact-vite.mdx 的 Requirements 一节可以归纳出以下硬性前提切换前请先核对你的项目Preact8.x || 10.xpeerDependencies 亦要求 10Vite≥ 5具体范围见上文的^5 || ^6 || ^7 || ^8Storybook 版本与仓库当前发布线一致本仓库框架包版本为10.6.0-beta.1且storybook/preact-vite、storybook核心包应保持同版本避免框架类型与运行时错配。这些版本信息以当前仓库实际声明为准升级或降级时请以你实际安装的包版本为准。验证切换是否成功完成上述三步安装 → 改 framework → 重启后可以从两个角度确认类型层面TS 项目运行tsc --noEmit或依赖编辑器的类型检查。由于framework字段已被收窄为storybook/preact-vite | { name: ...; options: ... }若配置中仍残留storybook/preact-webpack5之类的值会得到类型错误提示。运行层面在项目根目录执行storybook dev启动开发服务构建则用storybook build产物默认输出到storybook-static。启动日志会打印当前使用的构建器与渲染器使用 Vite 后对.storybook下预置文件的解析、HMR 行为都会切换为 Vite 语义。切换框架后请一并检查项目中依赖 Webpack 特有能力如自定义 webpackFinal、某些仅兼容 CJS 的插件的配置是否仍适用。对于纯 Vite 的 Preact 应用这会是一次干净、彻底的构建链路统一。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Storybook 手动接入 Preact 与 Vite：在 `.storybook/main` 中启用 `@storybook/preact-vite` 框架
Storybook 手动接入 Preact 与 Vite在.storybook/main中启用storybook/preact-vite框架【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybookstorybook/preact-vite是 Storybook 面向使用 Preact 构建、由 Vite 驱动的应用所提供的官方框架包用于在隔离环境中开发、记录与测试 UI 组件。本指南聚焦于一个最常见、也最关键的手动接入动作把 Storybook 的 framework 字段从旧的storybook/preact-webpack5切换为storybook/preact-vite。读完本文你将掌握 JS 与 TS 两种形态的.storybook/main配置改写方法、配套的框架包安装命令、framework.options的扩展用法以及该框架在仓库内的底层实现与依赖边界从而在一分钟内在既有 Preact 项目中完成构建器切换。为什么要切换 framework 配置在 Storybook 中framework框架包同时决定了三件事渲染组件所用的渲染器renderer、组件模块的加载解析方式以及底层使用的构建器builder。因此framework 字段不仅仅是一个元数据标记它直接决定整个 Storybook 工作台是基于 Webpack 还是基于 Vite 来启动与构建。仓库中 Preact 官方接入文档 docs/get-started/frameworks/preact-vite.mdx 的 FAQ 一节专门回答了如何手动安装 Preact framework这一高频问题先安装storybook/preact-vite包再更新.storybook/main.js|ts中的 framework 属性。这也正是本主题的唯一核心操作删除framework: storybook/preact-webpack5若存在替换为framework: storybook/preact-vite。对于使用 Vite 的 Preact 项目切换到storybook/preact-vite可以让 Storybook 复用项目自身的 Vite 配置插件、别名、代理等并显著受益于 Vite 的原生 ESM 开发体验。手动安装框架包在修改配置之前需要先以开发依赖的形式安装框架包。官方文档 docs/_snippets/preact-vite-install.md 给出了三种主流包管理器的命令任选其一npm install --save-dev storybook/preact-vitepnpm add --save-dev storybook/preact-viteyarn add --dev storybook/preact-vite从框架包源码 code/frameworks/preact-vite/package.json 可以看到它的依赖边界这正是理解为什么切一行配置就够的关键直接依赖storybook/builder-vite与storybook/preact即构建器与 Preact 渲染器由该框架包自动衔接peerDependencies 声明preact 10、vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0以及storybook。也就是说storybook/preact-vite本身并不要求你在core.builder里额外注册 Vite 构建器安装它即同时引入了 Vite 构建链路与 Preact 渲染能力。在.storybook/main中启用框架JavaScript 项目.storybook/main.jsdocs/_snippets/preact-vite-add-framework.md给出的核心配置如下注释掉或删除原有的storybook/preact-webpack5写入storybook/preact-vite。export default { // ... // framework: storybook/preact-webpack5, Remove this framework: storybook/preact-vite, // Add this };TypeScript 项目.storybook/main.ts对于 TypeScript 项目配置类型直接取自storybook/preact-vite导出的StorybookConfig从而让framework、stories、addons等字段获得完整的类型检查import type { StorybookConfig } from storybook/preact-vite; const config: StorybookConfig { // ... // framework: storybook/preact-webpack5, Remove this framework: storybook/preact-vite, // Add this }; export default config;注意这里的import type只引入类型而非运行时代码框架的运行时加载仍由framework字段中的包名完成。export default config之后重启storybook dev即可生效。使用 options 对象做扩展配置framework 字段除了可以写成字符串还可以写成{ name, options }对象形式用于传入框架级选项。仓库类型定义 code/frameworks/preact-vite/src/types.ts 揭示了其类型结构export type FrameworkOptions { builder?: BuilderOptions; }; type StorybookConfigFramework { framework: | FrameworkName // storybook/preact-vite | { name: FrameworkName; options: FrameworkOptions; }; // ... };结合官方文档 docs/_snippets/preact-vite-framework-options.md.storybook/main.js的完整写法为export default { framework: { name: storybook/preact-vite, options: { // ... }, }, };对应的.storybook/main.tsimport type { StorybookConfig } from storybook/preact-vite; const config: StorybookConfig { framework: { name: storybook/preact-vite, options: { // ... }, }, }; export default config;FrameworkOptions目前只暴露builder一个键类型为BuilderOptions它透传给storybook/builder-vite。因此凡是 Vite 构建器支持的选项如lazyCompilation、reactDocgen等具体以 code/builders/builder-vite 中定义的BuilderOptions为准都可以放进这里的options.builder。需要为 framework 注入构建级配置时对象形式是唯一入口纯字符串形式则使用全部默认值。版本要求与适用前提从源码 code/frameworks/preact-vite/package.json 与官方文档 docs/get-started/frameworks/preact-vite.mdx 的 Requirements 一节可以归纳出以下硬性前提切换前请先核对你的项目Preact8.x || 10.xpeerDependencies 亦要求 10Vite≥ 5具体范围见上文的^5 || ^6 || ^7 || ^8Storybook 版本与仓库当前发布线一致本仓库框架包版本为10.6.0-beta.1且storybook/preact-vite、storybook核心包应保持同版本避免框架类型与运行时错配。这些版本信息以当前仓库实际声明为准升级或降级时请以你实际安装的包版本为准。验证切换是否成功完成上述三步安装 → 改 framework → 重启后可以从两个角度确认类型层面TS 项目运行tsc --noEmit或依赖编辑器的类型检查。由于framework字段已被收窄为storybook/preact-vite | { name: ...; options: ... }若配置中仍残留storybook/preact-webpack5之类的值会得到类型错误提示。运行层面在项目根目录执行storybook dev启动开发服务构建则用storybook build产物默认输出到storybook-static。启动日志会打印当前使用的构建器与渲染器使用 Vite 后对.storybook下预置文件的解析、HMR 行为都会切换为 Vite 语义。切换框架后请一并检查项目中依赖 Webpack 特有能力如自定义 webpackFinal、某些仅兼容 CJS 的插件的配置是否仍适用。对于纯 Vite 的 Preact 应用这会是一次干净、彻底的构建链路统一。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考