声明式 Storybook 配置

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

我很高兴分享在 5.3 版本中配置 Storybook 的新的、更简单的、更声明式的方法。这使得完成常见的配置任务（如添加插件和装饰器）更加容易。这也使得设计、视觉回归测试和视觉评审插件更容易理解你的 Storybook。

新的，更清晰的配置文件

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

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

main.js

此文件是 presets.js 文件的演变。作为主配置文件，它控制着你的 Storybook 的生成。因此，它关注你的故事文件的位置、预设的管理（配置 Webpack 和 Babel 以允许不同的文件类型）以及通用的 webpack 配置。你也可以在 main.js 中进行基本的插件注册。

关键配置是 stories 属性。现在，这允许你使用 glob 以声明方式告诉 Storybook 你的故事文件位于何处！与使用 webpack 独有的 require.context() API 相比，这是一个非常受欢迎的改进。

故事文件列表是可检索的，无需运行一行代码。当与组件故事格式（Component Story Format）（使用静态 ES6 导出）结合使用时，故事总列表也是可检索的。这对于需要理解你的故事列表的插件和集成来说是一个福音。

插件配置也变得更加简单。只需在 addons 字段中添加一个条目，即可注册插件或使用其内置的配置预设（如果可用）。

preview.js

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

在实践中，许多简单的 Storybook 将不需要此文件。

manager.js

此文件替换了 addons.js，并允许你自定义 Storybook 的应用程序 UI 的渲染方式。也就是说，画布（预览 iframe）之外的所有内容。

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

更简单的故事文件位置

此更改的一个主要好处是能够通过 main.js 中的单个导出告诉 Storybook 你的故事文件的位置。

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

此语法替换了用于一次导入故事文件集合的晦涩的 Webpack require.context() 语法。它在几个方面更好

1. 允许静态分析：像上面这样的简单 glob 与来自 CSF 的静态导出相结合意味着现在可以从你的 Storybook 的源文件中提取你的故事列表，而无需直接执行这些文件。这对于想要链接到你的 Storybook 中的单个故事或为每个故事运行测试的工具非常有用。
2. 摆脱了特定于 Webpack 的语法。虽然 Storybook 默认情况下继续使用 Webpack，但正在努力扩展 Storybook 以在非 Webpack 上下文（其他捆绑器，如 Parcel、Meteor，甚至非 JavaScript 系统）中运行。为不同的环境提供通用配置意味着外部工具可以与这些环境兼容，同时仅支持单一语法。

例如，Storyshots，我们自研的 Jest 快照测试工具，将更容易设置。在未来，无论你在运行 Storybook 时使用什么捆绑器，你都将能够使用 Storyshots。

层级分隔符

层级分隔符用于指定 Storybook 侧边栏（也称为树状视图）中组件和故事的分组。随着向 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

接下来是什么？

到目前为止，这些变化非常机械化。但仔细观察，你可能会瞥见声明式语法解锁的可能性。

• 📦 自动 bundle splitting：以提高性能。
• 📄 为每个组件创建单独的页面：以提高隔离性。
• ⤵️ 在彼此之间包含 Storybook：以实现更快的交叉引用。
• 🎨 丰富的 主题化：以实现更高的自定义程度。
• 📊 为所有故事生成统计信息：以改进洞察力和理解。
• ⚙️ 生成预渲染的 html：用于检查服务器端渲染能力。

其中一些功能正在进行中，而另一些功能尚未开始。如果你有兴趣帮助构建它们，我们很乐意学习和支持你。在 Discord 聊天 #maintainers 频道中与维护者聊天。

Storybook 由 850 多名开源贡献者维护，并由顶级维护者的指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。也在 Discord 聊天中加入我们。在 Open Collective 上捐款。