零配置 Storybook

Storybook 最大的优势也是它的弱点。

从 Airbnb 到 BBC，数千个领先团队选择 Storybook，因为它适用于各种框架和技术栈。 然而，大量的配置选项可能会使 Storybook 难以设置。

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

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

🗡 灵活性是一把双刃剑

Storybook 可以配置为匹配任何构建设置。 它拥有广泛的 API 和丰富的插件生态系统，以适应无数的用例。

灵活性使 Storybook 能够适应大型公司和雄心勃勃的初创公司的不同需求。 但是 Storybook 的初始设置对于新用户来说可能令人生畏。

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

• 5.1 添加了预设，用于常见设置（如 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 使用的方式。

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

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

💎 Storybook Essentials

得益于数百个第三方插件，Storybook 是完全可定制的，这些插件可以完成从可访问性检查到设计移交的各种任务。

Storybook Essentials 是核心团队策划的插件集合，这些插件被认为是开箱即用的 Storybook 体验的核心。 它们是紧密集成的，并在新的 Storybook 安装中默认提供。

Essentials 目前包括以下内容

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

我们将优先考虑 Essentials 的维护、支持、文档和互操作性。 我们还将尽最大努力确保它们与数百个其他 Storybook 插件以及托管的 Storybook 服务（如 Chromatic）顺利配合使用。

在文档中了解有关 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 是内置的，因此如果您已为 typescript 配置了 Storybook，则应删除该配置。

升级后，您可以使用 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 中与我们聊天 — 维护者通常在线。