angular 和 React 的通用故事书

Question

我的团队中有 React 和 angular 项目，我想将 Storybook 集成到它们中。 我想知道是否有一种方法可以构建可以在 React 和 angular 项目中导入的通用故事书？ 我唯一想到的就是使用 WebComponents，但这会使 React 失去兴趣。

有人有经验吗？

（这是一个一般性问题，我只是问一般性的方向）

Answer 1

Storybook 或任何 UI 组件文档库的想法是让您的组件能够独立于 UI 源代码的其余部分进行开发和存在。话虽这么说，这里可以遵循几种方法 -

1. 使用 Stencil 之类的方法将所有组件移植到与语言无关的组件设置中。您也可以使用 Web Components 来实现，但是使用 Stencil 会缩短开发时间并加快开发速度。是的，这需要努力学习 "yet another JS framework"（或者不学习！您是否知道 Stencil 只是一个编译器，您可以使用您已经熟悉的技术堆栈来编写它！）。如果您将这些应用程序部署到生产环境中，那么一旦您移植了您的组件，就会进行大量的测试工作。但是你在很长一段时间内获得的好处可以证明它在多技术堆栈环境中是合理的。

2. 将您的组件从两个项目中分离出来并（仅）放置到一个仅包含组件的项目中。它们有多种共存方式，如 wrapper directives or with third party libraries like ngReact。对于只了解这些技术堆栈中的一个的开发人员来说，它可能会增加一定程度的复杂性，但肯定是一种做到这一点的方法。然后你可以在这些半原创、半包装的组件上使用故事书，它可以作为一个单一的组件。

无论如何，您的组件都应遵循这些良好的设计原则 -

• 从多个地方提取组件到一个真实的来源。

• 让开发与组件的使用位置无关。

• 如果可能，尽量不要使用多堆栈架构，至少对于您的组件而言。组件更喜欢与语言无关的库/框架。