npm包 @storybook/marko的使用教程

阅读时长 7 分钟读完

在前端开发中,组件库和UI框架已经成为了行业中的常见需求。而著名的开源组织Storybook便是一个强大的组件库管理工具。

而在这个组件库中,@storybook/marko 是一个特别优秀的组件库,它提供了一种完美的方式来展示你的视觉组件,并将其分离成可重用的库。

在本文中,我们将会详细介绍 @storybook/marko 的使用教程,包含安装、配置、以及一些最佳实践技巧。

安装

在开始使用 @storybook/marko 之前,你需要先安装它。你可以在终端中通过以下命令来安装它:

安装完成后,你可以在项目根目录中创建一个.storybook/目录。这个目录将会是 @storybook/marko 组件库的摆放位置。

在这个目录下,你需要新建一个config.js文件。这个文件就是对你的组件库的配置文件。

下面是一个config.js文件中的示例代码:

创建故事

每个故事都包含一个组件,以及一些附加的信息,例如:

  • 组件的展示名称
  • 组件的其他样式
  • 组件的参数

在 @storybook/marko 组件库中,你可以使用.stories.js文件来创建故事。这个文件定义了组件的行为,并将其显示在Storybook的 UI 中。

下面是一个.stories.js文件中的示例代码:

-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------ ---- -----------------

------------------- -------
  ---------- ------ -- -- --
    ---------- -------
    ------ - ----- ------ ------- --
  ---
  ---------- ---- ------- -- -- --
    ---------- -------
    ------ - ----- --- -- -- --- --
  ----

在这个代码中,我们导入了一个名为storiesOf的函数,并用它来定义组件 Button 的一组故事。每个故事都以.add()方法的形式被添加到 Button 的故事集合中。

添加一个故事需要定义两个参数:

  • 第一个参数是故事的名称。
  • 第二个参数是一个函数,它接受一个返回一个对象的参数。这个对象描述了故事的组件。

在这个示例代码中,我们定义了两个故事:一个有文本的 Button,以及一个带有一些表情符号的 Button。

运行 Storybook

在你的 configure() 方法中,你需要传递一个Webpack的 require.context 方法来告诉Storybook你想要在哪里读取你的组件。

在你的package.json文件中,你可以在scripts字段下创建一个名为 storybook 的命令:

命令start-storybook包含一个端口9001,以及一个指向我们.storybook/目录的配置路径。

你可以在终端中运行如下命令来启动 Storybook:

启动成功后,你可以在浏览器中通过http://localhost:9001来访问Storybook。

最佳实践

为了使您的组件在开发中表现良好,我们还提供了一些最佳实践方法:

选择实际的数据

故事应该使用实际数据来进行展示,以方便你调试你的组件。你可以在组件级别引入已知的值来展示你的组件,例如:

-- -------------------- ---- -------
------ ------ ---- -----------

------ ----- ---- - ------ --------

------ ------- -
  ------ ---------
--

------ ----- -------- - -- -- --------------- ---- ---

在这个代码中,我们使用了一个名为text的变量来引用按钮的文本内容。这个变量可以随时更新,以展示不同的 Button。

避免 CSS 的混乱

为了避免 CSS 的混乱,我们可以使用另一个storiesOf函数的特殊方法.addWithJSX(),它允许你以JSX的形式添加CSS样式。

-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------ ---- -----------------

------------------- -------
  ----------------- ------ -- -- -
    -------
      --------
        ------ --------
        ---------------- -------------
        ------------- ------
        -------- ---- ------
      --
      ----------- -------
    --
  --
  ----------------- ---- ------- -- -- -
    -------
      --------
        ------ --------
        ---------------- ----------
        ------------- ------
        -------- ---- ------
      --
      -------- -- -- ---
    --
  ---

重用组件

在 @storybook/marko 组件库中,你可以使用.addWithJSX()方法来重用已有的故事,以减少重复 time-to-market 的成本。

下面是一个示例代码:

-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------ ---- -----------------

------------------- -------
  ----------------- ------ -- -- -
    -------
      --------
        ------ --------
        ---------------- -------------
        ------------- ------
        -------- ---- ------
      --
      ----------- -------
    --
  --
  ---------- ------- -- -- ------------------------------------ ---- ------- -- -- -
      -------
        -------- ------ -------- ---------------- ---------- ------------- ------ -------- ---- ----- --
        -------- -- -- ---
      --
    ------

结论

@storybook/marko 组件库是一个非常实用的工具,可以帮助您管理和重用组件。在本文中,我们深入学习了如何在您的项目中添加 @storybook/marko 组件库,以及如何使用的最佳实践方法。

现在,你可以开始使用这个组件库来重用你的组件,并以更快的速度开发新的组件。祝你好运!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb592b5cbfe1ea0611452

纠错
反馈