我们正在为多个框架(React、Angular、Vue)在一个mono-repo中构建UI组件库。每个变体都有自己的storybook,作为静态站点发布,然后它们在单个Web服务器上提供服务。
我们遇到的问题是,Storybook在构建时检查引用
storybook/lib/api/src/modules/refs.ts
第137行
| | // ref's type starts as either 'unknown' or 'server-checked' |
,但在这种情况下,引用是相对URL,无法在构建时解析。这导致引用被分配为“未知”类型(Chromatic中隐含的“私有”storybook?),并且需要运行时的故事。json文件。
目前我们正在使用一个管理webpack配置自定义来解决这个问题。
描述你希望的解决方案
我认为Composition更加宽容会是一个不错的解决方案
- 尝试stories.json
- 尝试index.html(静态站点)
- 指示引用不可访问
文档关于假设的部分可能需要更清晰一些;例如,引用是一个可访问的站点(CHP 0),或者提供故事。json(CHP 1)。
描述你考虑过的替代方案
我的理解是,Composition是创建具有多个框架的storybook的推荐方法,我认为这是一个合理的选择。在这个特定的场景中,我们不需要不同的站点,而且一个可以打包多个storybook到单个静态站点的构建将更直接地满足需求。
5条答案
按热度按时间zqry0prt1#
我遇到了同样的问题。我们将多个带有相对URL的故事书打包到一个Docker容器中,并通过相对URL引用它们,当然在构建时这些相对URL是不可用的。
这在6.0.19版本中运行良好,但现在在6.1.14版本中失败了。当比较这两个版本创建的构建输出时,我在6.0.19版本中得到的是
type: "server-checked"
,而在6.1.14版本中得到的是type: "unknown"
。我相信之前错误地返回了"server-checked"
,这个问题在9ed3786版本中已经修复了。这是由这个bug修复引入的回归,应该像@tingzuge-dio建议的那样修复。
对于遇到同样问题的人,我们在我们的storybook
main.js
中使用string-replace-loader来解决这个问题:55ooxyrt2#
我们正在使用另一个解决方法,这可能会在运行时为您提供更多的灵活性(以牺牲稍微hacky的方式为代价)。
在
.storybook/manager.js
中使用以下内容:在这里需要
originalSetConfig
的解决方法,因为故事书默认的setConfig
将refs
设置为main.js
中使用的任何内容(否则为空哈希),这发生在manager.js
运行之后,并对此进行了清理。可能有一种比故事书内部 setConfig 更早设置配置的方法,但这对我们有效,并且从那时起正确地使用了 stories.json。
从经验上看,似乎您还需要至少一个静态故事,否则故事书将根本不尝试启动引用。
yftpprvb3#
谢谢你@tstehr,你的解决方案对我也有用。
r1zk6ea14#
出于某种原因,一开始使用addons.setConfig的hack对我有效,但后来停止工作。我的团队中没有人能够使用这种hack使composition与本地storybook一起工作。
如果可以在storybook内部修复这个问题,那就太完美了。
f87krz0w5#
出于某种原因,一开始使用addons.setConfig的hack对我有效,但后来停止工作。我的团队中没有人能够使用这种hack使composition与本地storybook一起工作。
如果可以在storybook内部修复这个问题,那就太好了。
看起来这是由于宿主storybook的启动过程比注入的storybook早一些,在注入的storybook构建并开始提供服务之前就开始了。