Styleguide/Pattern 库 - 具有不同依赖关系的组件
Styleguide/Pattern Library - components with different dependencies
我们想用我们在过去的项目中构建的组件构建一个模式库(或一种风格指南)。就像一个组件资源摘要页面,它为您提供每个模式的交互式预览,以及属于它的描述和代码片段。
问题是,有些项目已有多年历史,而另一些则刚刚完成。因此依赖项和版本可能会有所不同。它们的构建方式也可能有所不同,假设一个是在 Jquery 中制作的,另一个使用 Typescript 和 Angular.
有没有办法(或最佳实践)构建所有不同组件的摘要页面,这些组件可以独立处理每个组件的不同框架、框架版本、节点模块、插件、JS/CSS/HTML 等? ...没有冲突 ;)
我很抱歉这个问题在这个月里你没有得到任何评论或答案(P.S。我真的很喜欢你的问题)。
您是否已经找到问题的解决方案?
简介
我认为您正在寻找在您的项目中实施 Living Pattern(组件)库的方法。但在此之前,让我们清除一些由这些术语构成的confusion:
- 风格指南 - 品牌指南,风格基准。影响模式库的外观
- 模式/组件库 - 您可以重用[=61=的文档化组件]
这是我对这些术语的解释。我认为社区仍在寻找完美的定义。
来自不同作者的一些引用:
A living style guide is a system that allows the components within the style guide to remain in sync with the components in the site, without having to update the code in both places! - Nick Berens
现有工具
Existing tools to help you build these component libraries often force
you to use a particular template language, a specific build tool or a
pre-determined way to organize the individual elements within your
library. They generate a web preview to allow you to browse your
rendered components, but generally aren’t able to help much when it
comes to integrating your component library into your build process or
live site. - Fractal docs
解决方案
半年前没有这样的工具可以满足我的需求,所以我创建了自己的组件库生成器。关于week ago,名为Fractal的类似工具发布了v1.0。
Fractal - 新的。提供了选择模板引擎的灵活性。已记录,但尚未广泛使用。
SourceJs - 允许直接在样式指南中编写新组件。多模板引擎支持。
PatternLab - Already long time out there. One of the most popular ones. Comes together with Atomic Design Methodology
AtomicDocs - 新的、漂亮的、用户友好的、易于安装的组件库。但是它缺乏一些模板引擎的灵活性。
结论
挑战在于找到适合您需求的那一款。目前我还没有找到全面的概述,这让选择变得有点困难。 Here 您可以找到一个不错的工具列表!
欢迎提问。
祝你好运;)
我们想用我们在过去的项目中构建的组件构建一个模式库(或一种风格指南)。就像一个组件资源摘要页面,它为您提供每个模式的交互式预览,以及属于它的描述和代码片段。
问题是,有些项目已有多年历史,而另一些则刚刚完成。因此依赖项和版本可能会有所不同。它们的构建方式也可能有所不同,假设一个是在 Jquery 中制作的,另一个使用 Typescript 和 Angular.
有没有办法(或最佳实践)构建所有不同组件的摘要页面,这些组件可以独立处理每个组件的不同框架、框架版本、节点模块、插件、JS/CSS/HTML 等? ...没有冲突 ;)
我很抱歉这个问题在这个月里你没有得到任何评论或答案(P.S。我真的很喜欢你的问题)。
您是否已经找到问题的解决方案?
简介
我认为您正在寻找在您的项目中实施 Living Pattern(组件)库的方法。但在此之前,让我们清除一些由这些术语构成的confusion:
- 风格指南 - 品牌指南,风格基准。影响模式库的外观
- 模式/组件库 - 您可以重用[=61=的文档化组件]
这是我对这些术语的解释。我认为社区仍在寻找完美的定义。
来自不同作者的一些引用:
A living style guide is a system that allows the components within the style guide to remain in sync with the components in the site, without having to update the code in both places! - Nick Berens
现有工具
Existing tools to help you build these component libraries often force you to use a particular template language, a specific build tool or a pre-determined way to organize the individual elements within your library. They generate a web preview to allow you to browse your rendered components, but generally aren’t able to help much when it comes to integrating your component library into your build process or live site. - Fractal docs
解决方案
半年前没有这样的工具可以满足我的需求,所以我创建了自己的组件库生成器。关于week ago,名为Fractal的类似工具发布了v1.0。
Fractal - 新的。提供了选择模板引擎的灵活性。已记录,但尚未广泛使用。
SourceJs - 允许直接在样式指南中编写新组件。多模板引擎支持。
PatternLab - Already long time out there. One of the most popular ones. Comes together with Atomic Design Methodology
AtomicDocs - 新的、漂亮的、用户友好的、易于安装的组件库。但是它缺乏一些模板引擎的灵活性。
结论
挑战在于找到适合您需求的那一款。目前我还没有找到全面的概述,这让选择变得有点困难。 Here 您可以找到一个不错的工具列表!
欢迎提问。
祝你好运;)