什么是 @storybook/preact
在说 @storybook/preact 可以先来介绍一下 Storybook. Storybook 是一个开源的 UI 组件开发环境。它使我们可以在本地开发、测试和交互 UI 组件，从而提高了组件的开发速度和质量。
而 @storybook/preact 则是为 Preact 前端框架而打造的 Storybook 预设。Preact 是一个更快速和轻量级的 React 替代品。
当我们需要快速迭代 UI 组件时，@storybook/preact 是非常实用的。
如何使用 @storybook/preact
以下是使用 @storybook/preact 开发 UI 组件的基本步骤。
安装依赖
在开始之前，请先确保您拥有 Node.js 和 npm。
打开终端并执行以下命令：
npx sb init --type preact
这将创建一个基本的 Preact 项目，并在项目中安装@storybook/preact。
创建 Storybook 配置文件
生成的 Storybook 配置文件位于 .storybook/main.js，我们可以在其中配置 Storybook 应该如何构建和加载组件：
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
};我们还可以在 .storybook/preview.js 文件中进行全局配置：
import { addDecorator } from '@storybook/preact';
addDecorator(/* your decorator function */);编写 Storybook 示例
在创建 Storybook 示例之前，请先了解 Storybook 中的三个基本概念：stories, actions 和 controls。
- stories：描述了一个组件在不同状态下的表现和用法；
- actions：提供了组件行为的抽象和可重现性以供测试和动态生成文档；
- controls：提供了一个在UI中动态操作组件的交互式控件。
以一个按钮组件的 Storybook 示例为例：
-- -------------------- ---- -------
------ - - - ---- ---------
------ ------ ---- -----------------------
------ ------- -
------ ---------
---------- -------
--------- -
-------- -
-------- -
----- ---------------
-------- ----------- ---------- -------------
--
--
-------- - ------- ---------------- --
--
--
----- -------- - ------ -- ------- --------- ---
------ ----- ------- - ------------------
------------ - -
--------- ---------
--
------ ----- ------- - ------------------
------------ - -
-------- ----------
--------- -------- --------
--
------ ----- --------- - ------------------
-------------- - -
-------- ------------
--------- ---------- --------
--- title：组件在 Storybook 中的标题；
- component：要演示的组件；
- argTypes：为组件参数提供控件（controls）和行为（actions）。
- Template：用于初始化组件的函数；
- Default、Primary 和 Secondary：Storybook 样本，定义了组件在不同状态下的表现和用法。
注意事项：
- argTypes 配置中可以设置的控件类型包括：'text', 'number', 'color', 'boolean', 'object', 'array' 等；
- 可忽略没有设置的参数；
- 我们还可以为组件添加动画效果以模拟实际使用情况。
运行 Storybook
配置好示例之后，我们可以运行 Storybook 并查看我们的组件在不同状态下的演示。
执行以下命令即可启动本地 Storybook 服务器：
npm run storybook
在浏览器中访问 http://localhost:6006/ 即可查看 Storybook。
构建和发布 Storybook
与其他项目一样，我们可以使用 npm run build 命令构建和编译 Storybook。
npm run build-storybook
该命令将构建为静态HTML，并将其输出到 storybook-static 目录。
为了发布 Storybook，可以使用 Storybook提供的 GitHub Pages，或者将构建好的 storybook-static 目录部署在任意静态空间。
总结
@storybook/preact 是一个非常好用的 UI 组件开发环境，它让开发者可以独立于业务开发、轻松快速地迭代 UI 组件。相信通过本教程的学习，读者已经可以熟练使用 @storybook/preact 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb13eb5cbfe1ea06110fe