零配置 Storybook

Storybook 最大的优点也是它的缺点。

从 Airbnb 到 BBC，成千上万的顶尖团队选择 Storybook，因为它与各种框架和技术栈兼容。不幸的是，丰富的配置选项可能会让 Storybook 设置起来很麻烦。

作为维护者，我们的目标是让您快速完成设置，同时为高级团队保留强大的配置选项。这就是为什么我很高兴分享新的 6.0 功能，它们是朝着零配置 Storybook 迈出的巨大一步。

• 🧰 内置 TypeScript 支持： 开箱即用的 TS 兼容性。
• 💎 Storybook Essentials： 适用于每个项目的最佳实践插件。
• 🔌 项目集成： 流行应用框架的预设。

🗡 灵活性是一把双刃剑

Storybook 可以配置以匹配任何构建设置。它拥有一个广阔的 API 和丰富的插件生态系统，可满足无数用例。

灵活性使 Storybook 能够适应大型公司和有抱负的初创公司不断变化的需求。但 Storybook 的初始设置对于新用户来说可能令人生畏。

理想情况下，Storybook 设置是零配置的，但对于大型项目来说可以完全调整。在过去的一年里，团队在实现零配置方面取得了巨大进展。

• 5.1 增加了 presets，这是针对 SCSS 或 Create React App 等常见设置的配置包。
• 5.3 引入了 main.js，这是一个单一的声明式配置文件，用于简化自定义。

现在在 6.0 中，集成 Storybook 变得更加容易。

🧰 内置 TypeScript

Storybook 6.0 使用 Babel 转译支持 TypeScript，并可选地使用 fork-ts-checker-webpack-plugin 进行异步类型检查。这类似于 Create React App 使用的方式。

包括 NextJS、React Native CLI、Expo、Yarn、Jest、Apollo 和 Storybook 本身在内的流行工具都在持续采用 TypeScript。创建一个无缝的 TS 体验对于 Storybook 未来的成功至关重要。

现在，当您将 Storybook 添加到您的 TS 项目时，它就能正常工作。有关更多信息和高级选项，请参阅文档。

💎 Storybook Essentials

Storybook 得益于数百个第三方插件而可以完全自定义，这些插件可以完成从可访问性检查到设计交付的所有事情。

Storybook Essentials 是核心团队精心策划的一系列插件，被认为是 Storybook 开箱即用体验的核心。它们紧密集成，并随新的 Storybook 安装默认提供。

Essentials 当前包括以下内容

• 文档：使用您的 stories 生成最佳实践的自动化文档
• Controls：调整组件属性以探索不同状态
• Actions：记录 UI 操作以验证组件的交互行为
• Viewport：查看组件在不同设备视口下的响应行为
• Backgrounds：查看组件在不同背景颜色和样式下的表现
• Toolbars：用于主题化、i18n 等的自定义工具栏 UI

我们将优先维护、支持、编写文档和确保 Essentials 的互操作性。我们还将尽最大努力确保它们与数百个其他 Storybook 插件以及诸如 Chromatic 等托管 Storybook 服务顺畅协作。

在文档中了解更多关于 Essentials 的信息。

🔌 项目集成

Storybook 设置变得更容易的最后一种方式是通过集成，它们可以预配置 Storybook，使其与流行的应用框架无缝协作。

我们很高兴看到一波新的第三方集成（🔥），它们正由应用框架社区自身开发、发布和维护。

以下是按框架分类的集成列表

• React： Create React App, Next 🔥, RedwoodJS 🔥
• Vue： Nuxt 🔥, Vue CLI, Vuetify 🔥
• Angular： Nx 🔥
• Web components： Open-WC 🔥
• Ember： Ember CLI

如果您想就新的集成进行合作，请在 Twitter 上私信我！

⚡ 1 分钟安装

立即在 Storybook 6.0 中试用内置 Typescript 和 Essentials。

您可以将 Storybook 引导到现有应用程序中

npx sb init

如果它是 Typescript 应用程序，则应该无需额外配置即可立即使用。Essentials 也预装好了。

或者，升级现有 Storybook

npx sb upgrade

Typescript 是内置的，因此如果您已为 Storybook 配置了 typescript，则应该移除该配置。

升级后，您可以使用 npm 或 yarn 安装 Essentials 并更新您的 .storybook/main.js

$ yarn add @storybook/addon-essentials --dev

// main.js
module.exports = {
  addons: ['@storybook/addon-essentials'],
};

参与其中

Typescript 支持由 Brody McKee 和 Michael Shilman（我！）添加。Essentials 由 Michael Shilman、Zoltan Olah、Tom Coleman 和 Clément Dungler 开发。

Storybook 由 1000 多名开源贡献者维护，并由顶尖维护者组成的指导委员会指导。如果您有兴趣做出贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常会有维护者在线。