Storybook for Preact & Vite

Storybook for Preact & Vite 是一个框架，可以轻松地为使用Vite构建的Preact应用程序单独开发和测试 UI 组件。它包括

🏎️ 预打包以提高性能
🪄 无需配置
💫 等等！

要求

Preact 8.x || 10.x
Vite ≥ 5.0

入门

在没有 Storybook 的项目中

在 Preact 项目的根目录中运行此命令后，按照提示进行操作

npm create storybook@latest

更多关于 Storybook 入门的信息。

在已有 Storybook 的项目中

此框架旨在与 Storybook 7+ 配合使用。如果您尚未升级到 v7，请使用此命令进行升级。

npx storybook@latest upgrade

自动迁移

运行上面的 upgrade 命令时，您应该会收到一个提示，要求您迁移到 @storybook/preact-vite，这应该会为您处理所有事情。如果自动迁移对您的项目不起作用，请参阅下面的手动迁移。

手动迁移

首先，安装框架。

npm install --save-dev @storybook/preact-vite

然后，更新您的 .storybook/main.js|ts 以更改框架属性。

.storybook/main.ts

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;

API

选项

如果需要，您可以传递一个选项对象进行其他配置

.storybook/main.ts

import type { StorybookConfig } from '@storybook/preact-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/preact-vite',
    options: {
      // ...
    },
  },
};
 
export default config;

`builder`

类型：Record<string, any>

配置框架构建器的选项。对于此框架，可用选项可以在Vite 构建器文档中找到。