npm包 @storybook/marko的使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm包 @storybook/marko的使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在前端开发中，组件库和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