声明式 Storybook 配置

当开发工具相互集成以解锁新工作流程时，每个人都会受益。Storybook 是一个用于 UI 开发的开源平台，拥有数百个插件，并被 Airbnb、Lyft、Slack 和 Twitter 使用。

我很高兴分享 Storybook 5.3 中配置 Storybook 的全新、更简单、更声明式的方式。这使得完成添加插件和装饰器等常见配置任务变得更加容易。它也让设计、可视化回归测试和可视化评审等插件更容易理解您的 Storybook。

全新、更清晰的配置文件

我们重命名了 Storybook 的配置文件，以使其功能更清晰明了。这应该能消除 Storybook 用户对哪些设置应放入哪个文件的困惑。

三个重要的文件是：main.js、preview.js 和 manager.js，但很可能您只需要第一个。让我们看看典型配置的之前和之后

main.js

此文件是 presets.js 文件的演进。作为主要的配置文件，它控制着 Storybook 的生成。因此，它关注您的 story 文件位置、预设管理（配置 Webpack 和 Babel 以支持不同文件类型）以及通用的 Webpack 配置。您还可以在 main.js 中进行基本的插件注册。

关键配置是 stories 属性。现在，这允许您使用 glob 声明式地告诉 Storybook 您的 story 文件在哪里！这是对使用仅限 Webpack 的 require.context() API 的非常受欢迎的改进。

可以在不运行您代码的任何一行的情况下检索 story 文件列表。结合组件 Story 格式（使用静态 ES6 导出），总 story 列表也是可检索的。这对于需要了解您的 story 列表的插件和集成是一个福音。

插件配置也变得简单多了。只需在 addons 字段中添加一个条目，即可注册该插件，或者如果提供了内置配置预设，则使用它。

preview.js

此文件取代了 config.js，并控制您的 story 的渲染。与 config.js 不同，preview.js 不负责加载任何 story。其主要目的是添加全局参数和装饰器（如果您需要的话）。其他用途包括导入全局 CSS、根据需要添加额外的 polyfill 以及类似的浏览器端调整。

实际上，许多简单的 Storybook 不需要此文件。

manager.js

此文件取代了 addons.js，并允许您自定义 Storybook 应用 UI 的渲染方式。也就是说，Canvas（预览 iframe）之外的一切。

在常见情况下，除非您正在为 Storybook 设计主题，否则可能不需要此文件。

更简单的 story 文件位置配置

此更改的一个关键好处是，您可以通过在 main.js 中进行单一导出，来告知 Storybook 您的 story 文件位置

module.exports = {
  stories: ['../src/*.stories.js'],
}

此语法取代了用于一次性导入一组 story 文件的晦涩难懂的 Webpack require.context() 语法。这有几个原因

1. 允许静态分析：一个简单的 glob 结合 CSF 的静态导出，意味着现在可以在不直接执行源文件的情况下，从您的 Storybook 源文件中提取 story 列表。这对于需要链接到 Storybook 中单个 story 或为每个 story 运行测试的工具来说非常有用。
2. 不再依赖 Webpack 特定语法。尽管 Storybook 默认继续使用 Webpack，但目前正在努力将 Storybook 扩展到非 Webpack 环境（其他打包工具如 Parcel、Meteor，甚至非 JavaScript 系统）中运行。为不同环境提供通用配置意味着外部工具可以在仅支持单一语法的同时，与这些环境兼容。

例如，我们的自研 Jest 快照测试工具 Storyshots 将更容易设置。将来，无论您运行 Storybook 时使用哪种打包工具，您都可以使用 Storyshots。

层级分隔符

层级分隔符用于指定 Storybook 侧边栏（即树状视图）中组件和 story 的分组。除了迁移到 main.js 外，我们还将在 Storybook 5.3 中优化层级分隔符，以使静态分析和文档更加直接。

从 5.3 开始，最佳实践是始终使用 / 作为分隔符。例如，Components|Buttons.ButtonGroup 变为 Components/Buttons/ButtonGroup。

迁移

旧的 config.js 语法和可配置的层级分隔符将支持到 Storybook 6.0 版本。您可以在5.3 迁移文档中阅读更多关于迁移的详细信息。

我们非常希望您在 Storybook 5.3 中尝试新的 main.js 配置。您可以通过运行以下命令进行升级

npx npm-check-updates ‘/storybook/’ -u
npm install # or yarn if you prefer

接下来是什么？

目前来看，这些变化基本上是机械性的。但仔细观察，您可能会窥见声明式语法所解锁的可能性

• 📦 自动分包：提升性能。
• 📄 为每个组件创建独立页面：改进隔离性。
• ⤵️ 在 Storybook 中互相引用其他 Storybook：方便快速交叉引用。
• 🎨 丰富的定制主题：实现更高程度的自定义。
• 📊 为所有 story 生成统计数据：增强洞察力与理解。
• ⚙️ 生成预渲染 HTML：检查服务器端渲染能力。

其中一些功能正在开发中，另一些尚未开始。如果您有兴趣协助构建它们，我们非常乐意学习并支持您。请在Discord 聊天室 #maintainers 频道与维护者交流。

Storybook 由 850 多位开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果您有兴趣贡献，请访问GitHub 上的 Storybook，创建 issue 或提交 pull request。也请加入我们的Discord 聊天室。通过Open Collective 捐赠。