注意：本文专门面向 Hydrogen 开发人员，探讨品牌如何将 Storybook 与 Shopify 的 Hydrogen 框架配合使用。对于急于探索实际示例的用户，请查看我们的演示仓库。
为什么不能直接“工作”？
与 Hydrogen 一样，Storybook 在过去几个月也发生了转变。专注于开发体验和现代工具，Storybook 6.5 的发布带来了交互测试、Figma 插件、更快的 Webpack 和 Vite 构建器。
Vite 是推动越来越多开发项目的开发服务器和打包引擎。它是 Shopify Hydrogen 框架的核心，为 Shopify 边缘网络上的开发体验和 SSR 渲染提供动力。
因此，随着 Storybook 原生支持这个引擎，您可能会认为设置它很容易。让我们用演示商店来测试这个理论——有了它，只需要 yarn dev 就可以看到一个测试商店。
1. 让我们首先创建一个 Hydrogen 演示商店
2. 选择一个模板
3. 选择 TypeScript
4. 命名您的商店
现在我们有了演示商店，让我们继续安装带有 Vite 构建器的 Storybook。Storybook 一直专注于开发体验，因此这个过程可以用一个命令启动。
Storybook 将自动检测 React 的存在，并添加相关的依赖项。
系统还会提示您运行 ESLint 迁移，我们建议您执行此操作。
现在我们应该可以使用 yarn storybook 运行 Storybook 了。
嗯……这个结果不太好，不是吗？
不幸的是，这会抛出一个错误，但很快就能解决。这个错误的根本原因是 Vite 本身。从 builder-vite v0.2.0 开始，Storybook 的构建器依赖于 Vite 3.x，而在撰写本文时，Hydrogen 仍在使用 Vite 2.x。
因此，修复方法很简单，将构建器固定到支持 Vite 2.x 的最后一个版本 v0.1.41。 打开您的 package.json 文件，将 @storybook/builder-vite 修改为使用 v0.1.41。
运行 yarn install，然后再次尝试 yarn storybook。这次一切正常运行，Storybook 将启动。
因此，通过一点依赖项固定，就可以在 Hydrogen Vite 配置中运行 Storybook。不过，随着 Hydrogen 迁移到 Vite 3.0，这一步骤很快将不再必要。
在 Storybook 中使用 Hydrogen？
Storybook 对您的项目很有用。但它真正的效用在于将您的 UI 分解为可以在应用程序外部预览、测试和组合的组件。因此，让我们尝试导入一个现有的 Hydrogen 组件——ProductCard.client.tsx 似乎是一个不错的选择。
我们需要在现有组件旁边创建一个新的故事文件，ProductCard.stories.tsx。让我们看看文件的基本布局……
一旦我们基本的故事导入了 Storybook 的 ComponentStory 和 ComponentMeta，以及现有组件文件中的 ProductCard 组件，我们就简单声明我们的新故事。在这个示例中，我们声明的 title 与组件文件的路径相匹配。现在我们可以继续声明模板来输出我们的组件。
但是，在重新运行 Storybook 之前，我们需要为组件设置一些默认数据。我们通过将模板绑定到组件上来实现这一点。
要创建默认数据集，我们建议使用 React Devtools 从演示商店捕获 props。
您可能会发现 TypeScript 对某些类型有抱怨。这本身不是什么大问题，但我们应该注意，Hydrogen 对图像等对象的类型定义仍然存在一些相当基本的问题。
现在我们有了一个组件和一些默认数据，让我们在 Storybook 中尝试访问我们的组件。
所以在基本层面上，看起来我们的导入不受支持
在基本层面上，我们的导入似乎不被支持。第一个错误实际上与我们的 TypeScript 使用有关。终端输出会显示 ~/ 导入路径未被识别。
Storybook 有一个插件可以帮助解决这个问题，允许它导入项目的 TSconfig。
然后我们可以修改我们的 .storybook/main.js 来使用这个插件并理解我们的导入路径。
有了这个，让我们再试一次。
所以在基本层面上，我们的导入似乎不被支持
我们遇到了下一个障碍。Hydrogen 组件使用诸如 这样的组件，这些组件将在更大的应用范围内运行，比如 。如果我们导入路由器并将其包裹在这个组件周围，路由器本身会失败。因为它也依赖于 HOC 和 Hydrogen 构建期间传递的数据。
但我们不会止步于此。
Hydrogen 的装饰器
在框架中使用全局装饰器来存根框架组件所依赖的 HOC 是非常常见的。如果您使用过 React Router 或 Next.js，您可能对这个过程很熟悉。
在发布后约 3 小时，Hydrogen 1.5.0 使其内部测试提供者 通过 import {ShopifyTestProviders} from '@shopify/hydrogen/testing' 向公众开放。这应该允许我们为配置创建一个简单的装饰器文件。在 .storybook 文件夹中，我们创建了以下 decorators.tsx。
更新我们的 preview.js 文件到 preview.ts 并添加以下内容：
通过这种方式，我们可以导入并使用 TSX 组件作为全局装饰器。为了配合我们的新全局装饰器，我们必须对 Storybook 主配置文件做最后一个更改，并添加一个额外的包。
我们需要在 Storybook 配置（.storybook/main.ts）中添加两个变量，ShopifyTestProviders HOC 会检查这些变量以启用其功能。
最后，我们需要向我们的包中添加一个额外的开发依赖项，供我们的 ShopifyTestProviders 使用。只需运行 yarn add faker@5.5.3 -D
当前的“陷阱”
如果您仍在关注我们，您可能会注意到接下来会有一个问题。
虽然 1.5.0 已经可以导入 ShopifyTestProviders，但提供者导入的其中一个单独测试工具目前依赖于 faker 库，但它没有声明依赖关系。这会导致任何导入 ShopifyTestProviders 的组件失败。
注意：在我们的修复 PR 合并之前，我们已安装了一个补丁来移除此演示中未声明的依赖项。
设置好一切后，只剩下一件事。为了确保我们使用与主应用程序相同的全局样式，只需将索引样式表导入到 preview.ts 中即可。
结果
有了我们的新全局装饰器和配置好的样式，我们准备好再次运行 yarn storybook，终于可以看到我们的 Hydrogen 组件输出了。
请查看我们的 GitHub 仓库以查看上述示例的 代码。
有关我们如何使用 Shopify 进行无头开发的更多示例，请查看我们最近关于 Pavers 如何通过 Shopify Plus 实现无头化 的案例研究，以及 我们关于 Shopify 无头化的深度指南。
