1. 前言
如果你是前端开发者，那么你一定知道 Storybook 工具是什么。它是一个 UI 组件开发环境，可以让你在不依赖于应用程序的情况下开发和测试组件。Storybook-host 则是一个基于 Storybook 的 npm 包，它允许你在本地环境中轻松搭建 Storybook 服务器，并在其中部署您的组件。
本文将为大家介绍如何使用 Storybook-host 包，包括安装、配置、使用和示例代码。如果你对 Storybook-host 包的使用感兴趣，请继续往下阅读。
2. 安装
首先，你需要安装 Node.js。使用 npm 安装 Storybook-host 包非常简单，只需要在终端上运行以下命令：
npm install --save-dev storybook-host
安装完成后，在你的项目目录中会出现一个名为 .storybook-host 的文件夹。
3. 配置
在运行 Storybook-host 之前，你需要进行一些基本的配置。首先，你需要在你的项目中创建一个名为 stories.js 的文件，这将是所有组件的入口文件。在其中，你将定义你的组件的 Storybook UI。
假设你正在编写一个 Button 组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ----------------------- ------ ------- - ------ --------- ---------- ------- -- ------ ----- ----- - -- -- ------------- ------------
最上面的 import 语句导入我们的 Button 组件，接下来的代码定义了我们的 Button 组件的 Storybook UI。我们为它设置了标题为 Button，组件为 Button 组件，然后定义了 Basic 的 Storybook UI。
4. 使用
现在，我们已经准备好使用 Storybook-host 来运行我们的组件了。在你的终端上运行以下命令：
npx sbhost start
该命令将启动 Storybook-host 服务器，并将你的项目打包成 Storybook UI。这可能需要一些时间，取决于您的系统的速度和您的项目的大小。
一旦成功启动，当你在浏览器中访问 http://localhost:9001，你将看到像下面这样的 Storybook UI：
现在，你可以浏览你的组件库并测试你的组件了。如果你修改了你的组件代码，Storybook-host 将自动重新加载你的组件，并以新的形式展示出来。
5. 示例代码
为了帮助你更好地理解 Storybook-host 的用法，我们提供了一个示例代码库，其中包括一个具有一些基本组件的 React 应用程序。您可以在 GitHub 上找到它：https://github.com/mlibrary/storybook-host/tree/master/example。
在这个示例代码库中，我们已经准备好了配置文件，并编写了一些基本的组件，供你参考和使用。
6. 总结
本文介绍了如何使用 Storybook-host 包，包括安装、配置、使用和示例代码。Storybook-host 是一个非常实用的工具，尤其是在多人协作开发时。我们鼓励你在你的项目中使用它，并尝试扩展它以满足你的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab20b5cbfe1ea0610676