前言
在现代的 Web 开发中，组件化已成为一个重要的原则。为了方便开发人员测试组件，Storybook 应运而生。Storybook 是一个独立的 UI 开发环境，它利用库、框架和组件，并呈现它们的状态并随时改变这些状态，以便开发者可以轻松地测试组件。
@storybook/web-components 是 Storybook 针对 Web Components 开发的一个支持库，可以非常方便地使用。在本文中，将介绍如何使用 @storybook/web-components。
安装
如果想使用 @storybook/web-components，首先要安装：
npm install -D @storybook/web-components
配置
在安装完 @storybook/web-components 后，需要配置 Storybook。在项目的 package.json 中，添加如下配置：
-- -------------------- ---- -------
-
---------- -
------------ ---------------- -- ---- -- --------
------------------ ---------------- -- -------
--
------------------ -
---------------------------- --------
--
------------ -
--------- -
---------------------------------
----------------------------------
-------------------------
----------------------------
------------------------------
--
---------- -
-------------------------------
-
-
-在上面的配置中，我们使用了一些 addons：
@storybook/addon-docs: 提供代码示例和文档。@storybook/addon-knobs: 用于添加交互式 UI 控制面板，以更轻松地调试组件。@storybook/addon-links: 可以在 Storybook 的 UI 中添加链接，可以轻松地转到示例页面等。@storybook/addon-viewport: 可以在 Storybook 中模拟各种大小的屏幕视口。@storybook/addon-storysource: 可以看到组件的代码。
还需要创建 .storybook 目录并添加一个 main.js 文件：
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-controls'
],
}现在，Storybook 就可以运行了：
npm run storybook
示例
现在，我们将创建一个 my-button 组件，并使用 @storybook/web-components 创建一个故事：
- 创建一个
my-button组件：
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- -------- ------- ---------- -
------ --- ------------ -
------ -
----- - ----- ------ --
------ - ----- ------ --
--
-
------------- -
--------
--------- - ------ ----
---------- - --------
-
-------- -
------ ------------ ---------------------------------------------------
-
-
---------------------------------- ----------- 创建一个
my-button.stories.js文件，包含了一个default故事：
import '../my-button';
export default {
title: 'My Button',
};
export const Default = () => '<my-button text="Default"></my-button>';在这个例子中，我们通过 import '../my-button' 导入了 my-button 组件，在 Default 故事中使用了 my-button 组件。
- 我们使用
@storybook/web-components创建一个 Storybook：
import { storiesOf } from '@storybook/web-components';
storiesOf('My Button', module)
.addParameters({ component: 'my-button' })
.add('Default', () => '<my-button text="Click me" color="black"></my-button>')
.add('Red', () => '<my-button text="Click me" color="red"></my-button>')
.add('Blue', () => '<my-button text="Click me" color="blue"></my-button>');在上面的示例中，我们使用 storiesOf 创建一个 Storybook，在 Storybook 中创建名为 My Button 的组件，并添加了三个故事：Default，Red 和 Blue。
在每个故事中，我们都使用了 <my-button> 自定义元素，并定义了一些属性。
总结
通过本文，我们了解了如何使用 @storybook/web-components 从零开始创建 Storybook。要注意的是，Storybook 只是一个 UI 开发环境，它的目的是帮助我们测试组件。在实际开发中，Storybook 不应该取代其他测试工具（例如 Jest 或 Mocha）。使用 Storybook 并不会减少测试代码的编写量，而是帮助我们更轻松地测试组件，并且更快地了解组件的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb595b5cbfe1ea0611459