副标题：生产级组件开发
原文作者：medium.com/@shilman
发布时间：2020年8月12日 - 6分钟阅读
Storybook是世界上最受欢迎的组件工场，被行业巨头、创业公司和开源项目广泛采用。它组织组件及其状态来架构UI开发、测试和每个主要视图层的文档。
6.0版本为专业的前端开发者重新调整了Storybook。
我们研究了BBC、IBM、Cisco和Shopify等公司的领先团队。这些团队已经成功地扩展了组件库并开创了自己的最佳实践。
新的Storybook融合了这些最佳实践，使所有团队都能受益。更重要的是，我们删除了模板和配置，以简化您的开发者体验。它包括
- 💎 要点: 零配置设置
- 🧬 Args：下一代动态故事格式
- 🎛 Controls：实时编辑组件示例
- 🎛 编撰：多个故事书的组合
- 📚 文档：完成项目大修
6.0几乎完全向后兼容5.X.迁移指南»
迄今的进展
Storybook是构建UI组件的事实上的标准。它可以为每一个主要的框架提供结构化的UI开发和文档。
📈创纪录的采用率。Storybook的使用量持续增长，最近每月突破了50,000个公共仓库和7M次npm下载。在Vue、Angular和Web组件社区中，我们看到了特别高的增长。
👩💻蓬勃发展的社区。根据GitHub的数据，Storybook是2019年增长最快的十大OSS项目之一。它最近超过了1000个贡献者和5万颗星星。
🧪平台创新。我们在保证用户稳定性的前提下，成功推出了多项核心平台变革。值得一提的是，组件故事格式是一个可移植的组件实例标准。Storybook Docs为无数的产品设计系统提供了动力，包括我们自己的系统。
要点：零配置设置
零配置设置是高级用户最需要的功能之一。从Storybook的可配置性中受益的领导团队也希望我们能够 "简化 "设置，这是因为他们希望公司内部的其他团队也能使用Storybook。这是因为他们希望公司内部的其他团队也能使用Storybook。强大的零配置设置让UI组件的采用变得更容易。
Storybook的全新开发者体验从安装开始
Storybook 6.0预先配置了最佳实践功能。这些功能以前是作为附加组件提供的。现在，这些基本的附加组件已经被调整、文档化，并与Storybook一起发布。此外，TypeScript支持是内置的，所以你也不用担心这个问题。
要了解更多，请阅读文章。👉 Zero-config Storybook »
Args: 新一代的故事格式
关于6.0，你会注意到的第二件事是一个可选的新故事结构，Args，它位于开发者体验的核心。
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };
认真的Storybook用户写了几百个甚至几千个故事。他们希望有更多的方法让投资得到回报，包括可移植性、重用性和增值功能。
Storybook Args是编写故事的一个基础性变化。作为用户，你现在可以声明你的故事的输入 "args "和初始值。Storybook和它的附加组件将动态地修改Args，实现诸如自动生成控件、自动生成事件记录的动作，甚至是自定义工具栏。
Args也有符合人体工程学的好处，允许你。
- 🗜 减少故事的大小和复杂度。
- 🚚 跨故事重用固定数据
- ♻️ 在更多的工具中循环利用故事。
想了解更多，请阅读文章。👉 介绍Storybook Args »
Controls：实时编辑，无需代码
从Storybook Args中最先受益的功能之一是Controls，这是一个新的插件，被无数的开发者要求，它允许你在不接触代码的情况下动态编辑一个组件的输入。Controls是自动生成的UI，用于快速的组件实验。
如果你熟悉Storybook，这可能看起来与Knobs相似，它的前身是附加组件。但这种相似只是表象。因为控件是自动生成的，所以不需要编写额外的代码，当你修改API时也不需要维护。控件代码也更容易移植，因为它不依赖于Storybook特有的API。
Controls插件对于专业开发者来说是一个胜利：不仅自己更容易探索新的组件状态，而且你的Storybook可以立即让非技术团队成员更容易获得反馈。
要了解更多，请阅读文章。👉 Storybook控件 »
编撰：结合故事书
在Storybook 6中，最令人兴奋的功能之一是编撰：能够在本地Storybook中浏览任何Storybook中的组件。
这个功能是由IBM、Cisco和Chromatic的团队要求的，他们管理着大量的UI工作，在这些工作中，聚合分布式项目是很有用的。
组成还释放了新的用例。例如，现在可以在一个组成的Storybook中开发React、Vue和Angular的跨框架设计系统。它还使得在你用storybook开发应用屏幕时，可以在应用屏幕旁浏览设计系统文档。
想了解更多，请阅读文章。👉 Storybook编撰 »
文档：大修
最后一个要求--Betterment和几乎所有与我们交谈过的团队都提出来了--就是改善Storybook本身的文档。即使是拥有深厚Storybook专业知识的重金投入的团队也将此列为他们的主要痛点之一。
我们听取了他们的意见，并从头开始重新设计和编写了Storybook的文档。
在Learn Storybook的编辑Dominic Nguyen和Tom Coleman的带领下，它是你一直想要的文字优美、全面的Storybook参考书。
要了解更多，请访问网站。👉 故事书文档 »
还有数百项改进
除了主要的变化，我们还进化了现有的功能，并修复了数百个错误。几个亮点包括
- 布局参数：内置填充/全屏/中心故事。
- 风格化的故事排序：指定功能或章节顺序以方便排序。
- 动态源码片段：在React中用实时控件值渲染JSX。
- 版本发布说明：查看升级后的新内容。
- Yarn 2：支持下一代包管理。
综合列表请看。👉 CHANGELOG.md »
1分钟安装
要尝试这些功能，请将现有项目升级到Storybook 6.0。
npx sb upgrade
在大多数情况下，这足以让你与新版本的运行。但如果你被卡住了，我们会帮你解决。
完整的演练请看。👉 Storybook 6迁移指南 »
或者，对于一个全新的安装，将Storybook引导到一个现有的应用程序中。
npx sb init
您将获得一个完整的6.0配置，包括本篇文章中描述的所有内容，以及一个美丽的新用户入职体验。
参与进来
故事书6.0是由以下贡献者带来的。
@adamborowski @ajkl2533 @amannn @andre-brdoch @asudoh @atanasster @brandonseydel @cavanwagg @chrisj-skinner @christianwiedemann @cpgruber @daniel-ac-martin @domyen @eric-hc @fernandopasik @fjorgemota @frassinier @fred-el-jolo @gaetanmaisse @ghengeveld @graup @hipstersmoothie @hypnosphi @igor-dv @isaacplmann @john015 @johnalbin @jonspalmer @jorisw @kdnk @kevin940726 @kruthivijay31 @kylesuss @lifeiscontent @luke-j @marcobiedermann @markhuot @marklb @marklyck @matheo @matus12 @mbelsky @mdchristians @mkamranhamid @mrmckeb @nad182 @nanoblit @ndelangen @niedzielski @okovpashko @orpheusp @papistan @pyrolistical @rek @sarioglu @sean-codes @sekiya9311 @shilman @skovy @tmeasday @tomastomaslol @tooppaaa @vvanpo @wormwlrm @yannbf
该项目由1000多名开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果你有兴趣做出贡献，可以在GitHub上查看Storybook，创建一个问题，或者提交一个拉取请求。在Open Collective上捐款。在Discord上与我们聊天--通常会有维护者在线。 通过Twitter和注册我们的官方邮件列表来了解Storybook的最新动态。
通过( www.DeepL.com/Translator )（免费版）翻译
