如何基于html-vite的Storybook项目构建可分发纯HTML模板？

架构老林

2026-6-19

Storybook HTML项目分发纯HTML模板指南

1. 核心可用命令

日常开发与构建的关键命令：

启动Storybook开发服务器：npm run storybook
构建生产版Storybook（含组件文档与示例）：npm run build-storybook
打包纯静态组件资源（需配置Vite）：vite build

2. html-vite的作用

html-vite是Storybook专为HTML项目设计的构建器，基于Vite工具链实现：

编译打包HTML、CSS、JS文件，支持现代CSS特性与ES模块化
开发时提供热模块替换（HMR），修改组件后实时刷新预览
优化生产打包资源体积，自动压缩代码、合并静态资源
兼容Storybook插件生态，支持文档生成、视觉测试等功能

3. 构建纯HTML模板的额外步骤

默认生成的JS文件是Storybook的组件渲染逻辑，要分发纯HTML模板到无框架项目，需按以下步骤操作：

提取纯HTML结构：从Storybook的组件示例中，复制每个组件的原始HTML代码（如按钮的<button class="btn btn-primary">确认</button>），保存为独立的.html片段文件
分离CSS样式：将Storybook中全局或组件专属的样式（通常在src/styles/目录下）提取出来，合并为单独的.css文件，确保样式可直接作用于纯HTML

配置Vite打包规则：修改vite.config.js，指定要打包的HTML组件和输出目录：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        button: './src/components/button.html',
        card: './src/components/card.html',
        // 按需添加更多组件
      },
      output: {
        dir: 'dist/components',
        entryFileNames: '[name].html',
      },
    },
  },
});