在前端开发中，组件库和UI框架已经成为了行业中的常见需求。而著名的开源组织Storybook便是一个强大的组件库管理工具。
而在这个组件库中，@storybook/marko 是一个特别优秀的组件库，它提供了一种完美的方式来展示你的视觉组件，并将其分离成可重用的库。
在本文中，我们将会详细介绍 @storybook/marko 的使用教程，包含安装、配置、以及一些最佳实践技巧。
安装
在开始使用 @storybook/marko 之前，你需要先安装它。你可以在终端中通过以下命令来安装它：
npm install @storybook/marko --save-dev
安装完成后，你可以在项目根目录中创建一个.storybook/目录。这个目录将会是 @storybook/marko 组件库的摆放位置。
在这个目录下，你需要新建一个config.js文件。这个文件就是对你的组件库的配置文件。
下面是一个config.js文件中的示例代码：
import { configure } from '@storybook/marko';
configure(require.context('../src', true, /\.stories\.js$/), module);创建故事
每个故事都包含一个组件，以及一些附加的信息，例如：
- 组件的展示名称
- 组件的其他样式
- 组件的参数
在 @storybook/marko 组件库中，你可以使用.stories.js文件来创建故事。这个文件定义了组件的行为，并将其显示在Storybook的 UI 中。
下面是一个.stories.js文件中的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------ ---- -----------------
------------------- -------
---------- ------ -- -- --
---------- -------
------ - ----- ------ ------- --
---
---------- ---- ------- -- -- --
---------- -------
------ - ----- --- -- -- --- --
----在这个代码中，我们导入了一个名为storiesOf的函数，并用它来定义组件 Button 的一组故事。每个故事都以.add()方法的形式被添加到 Button 的故事集合中。
添加一个故事需要定义两个参数：
- 第一个参数是故事的名称。
- 第二个参数是一个函数，它接受一个返回一个对象的参数。这个对象描述了故事的组件。
在这个示例代码中，我们定义了两个故事：一个有文本的 Button，以及一个带有一些表情符号的 Button。
运行 Storybook
在你的 configure() 方法中，你需要传递一个Webpack的 require.context 方法来告诉Storybook你想要在哪里读取你的组件。
在你的package.json文件中，你可以在scripts字段下创建一个名为 storybook 的命令：
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}命令start-storybook包含一个端口9001，以及一个指向我们.storybook/目录的配置路径。
你可以在终端中运行如下命令来启动 Storybook：
npm run 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