大家好，很高兴又见面了，我是" 高级前端‬进阶 ‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

storybook怎么开回放,storybook详细教程

2023年7月18日，Storybook 发布了 v7.1.0 版本，带来了以下核心变更：

‍♀️ 应用内入门导航帮助开发者快速设置新项目
对主要库的零配置样式支持
️ API 参考文档和 TypeScript-first 片段
文档目录
Figma Design 插件官方支持
Vue3 源代码片段和反应性改进
数百个修复和改进

还不知道Storybook是什么的朋友可以阅读下面我已经发表的文章：

《 StoryBook：为何大多数前端开发都说相见恨晚?》

目前 Storybook 在 Github 上通过MIT协议开源，有超过79.5k的star、8.6k的fork、182k的项目依赖量、代码贡献者1.7k，妥妥的前端顶级优质开源项目。话不多说，下面直接对每一个新特性进行详细分析。

适合新用户的应用内导览

当开始学习一项新技能时，没有什么比一位优秀的老师更好的了， Storybook 也是如此。虽然大量前端团队使用 Storybook 来构建 UI，但如果是自学，理解 Storybook 的诸多基础知识可能会很困难。

Storybook 7.1 支持在应用内游览开发者体验（in-app tour developer experience），这对所有开发人员都有帮助，无论是前端新手还是 Storybook 新手。

storybook怎么开回放,storybook详细教程

新用户经常会提及，从第一次安装 Storybook 到在应用程序中实际使用它是非常困难的。 Storybook 7.1 向开发者展示如何编写 Storybook，同时开发者不必在站点之间切换来了解 Storybook 的工作原理。

应用内游览体验的目的是让新人了解实际使用 Storybook 的感觉。当 Storybook 在新的 React 项目中初始化时，它会自动启动，向开发者展示 Storybook UI 的不同部分如何协同工作。比如，下面侧边栏显示 Storybook 项目的内容。

storybook怎么开回放,storybook详细教程

同时，预览 Canvas 是组件渲染的独立 iframe。通过控件，开发者可以交互地更改提供给组件的 props 和数据，以查看其响应方式，而无需触及底层组件代码。

storybook怎么开回放,storybook详细教程

对 Tailwind、MUI、样式组件和 Emotion 的零配置支持

使用最喜欢的样式工具（styling tools）设置 Storybook 就像组装家具一样。说明书上说东西应该组合在一起，但有时可能需要天才的智商才能弄清楚如何组合在一起。

storybook怎么开回放,storybook详细教程

Storybook 7.1 的官方样式插件现在为 JavaScript 最流行的样式库提供零配置支持，包括：

Tailwind
MaterialUI
Styled Components
‍ Emotion

在过去的一年，Storybook 团队编写了将 Storybook 与 Tailwind、MUI、Styled Components 和 Vuetify 等工具结合的相关教程，同时还发布了官方的样式插件，同时能够快速启动配置模板和主题支持。

storybook怎么开回放,storybook详细教程

尽管如此，这些解决方案仍然需要开发者进行一些额外设置。Storybook 7.1 引入了自动配置代码模块，新代码模块通过为项目的样式库自动配置 Storybook 来加速这一过程。通过自动识别样式工具（identify styling tools），设置配置，从而使开发者能够更快地开始编写 Storybook。

按照下面的过程在项目中使用 codemod：

确保使用的是 Storybook 7 和 @storybook/addon-styling（比 1.1.0 更新的版本）
在项目的根目录中，运行命令，即：nodenode_modules/@storybook/addon-styling/bin/postinstall.js。
Storybook 将自行配置以与当前工具配合使用
✅ 开发者确认结果

注意：codemod 是一个工具/库，可帮助开发者进行大规模代码库重构，可以部分自动化，但仍然需要人工监督和偶尔的干预。

但是目前，样式代码模块依然需要手动运行。未来，Storybook 的未来目标是能够自动识别样式工具（styling tools）并配置所有内容，而无需动手干预。

新的 API 参考、TypeScript 代码片段和文档 DX

ChatGPT 可以帮助开发者解决很多事情，但对于学习 Storybook 来说，最好的资源就是 Storybook 的官方文档。

storybook怎么开回放,storybook详细教程

Storybook 官方团队正在推出新功能来帮助学习 Storybook 并向学习团队发送反馈。下面是一系列的新特性：

⭐️ 新的 API 参考
文档反馈小部件：社区反馈为 Storybook 的文档改进提供了重要参考信息，目前每个页面上都有一个新的反馈小部件，供分享对特定文档的评论。
⌨️ TypeScript 优先文档
⚡️ 开发者体验改进：TypeScript 已成为大多数开发人员的首选语言。如果 Storybook 文档中的代码片段在 TypeScript 中可用，Storybook 的文档将默认为 TypeScript。否则，它会退回到 JavaScript。
‍ 综合代码片段：随着 Storybook 7 的发布，官方审核了文档和教程中的每一个代码片段，确保每个核心渲染器（React、Vue、Angular 和 Web 组件）都有示例可用的片段。

storybook怎么开回放,storybook详细教程

生成目录

Storybook 自动生成的文档页面可能相当长且难以导航。为了帮助解决此问题，开发者现在可以启用目录功能来提供文档页面的快速概述并允许用户跳转到特定部分。

要启用该特性，请扩展 Storybook UI 配置文件（即 .storybook/preview.js）并提供带有 toc 属性的 docs 参数。

// .storybook/preview.ts
// Replace your-framework with the framework you are using (e.g., react, vue3)
import { Preview } from "@storybook/your-framework";
const preview: Preview = {
  parameters: {
    docs: {
      toc: true, //  Enables the table of contents
    },
  },
};
export default preview;

官方支持 Figma Design 插件

Storybook 7.1 支持了@storybook/addon-designs，即一个 Storybook 插件，将 Figma 或网站嵌入插件面板中，以实现更好的设计开发工作流程。目前，该插件可以很好地与任何框架配合使用。

首先需要安装该插件：

npm install -D @storybook/addon-designs

yarn add -D @storybook/addon-designs

pnpm add -D @storybook/addon-designs

接着在 main.js 中注册插件：

module.exports = {
  addons: ["@storybook/addon-designs"],
};

然后添加到 storyBook 中：

export default {
  title: "My stories",
  component: Button,
};
export const myStory = {
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

Vue3 源代码片段和反应性改进

Storybook 7.1 中添加了 Vue3 源代码片段和反应性改进，同时修复了大量问题。其中包含数百个 fix、features 和调整。

可以浏览与 7.1.0-alpha.、7.1.0-beta. 和 7.1.0-rc.* 匹配的变更日志，以获取完整的变更列表。为了获得更好的升级体验，请使用以下命令之一升级：

npx storybook@latest upgrade

本文总结

本文主要和大家介绍2023年7月18日，Storybook 发布了 v7.1.0 版本，同时带来了7大核心变更。相信通过本文的阅读，大家对 Storybook v7.1.0 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://storybook.js.org/blog/in-app-tour-for-new-users/

https://storybook.js.org/blog/zero-config-support-for-tailwind-mui-styled-components-and-emotion/

https://storybook.js.org/blog/docs-updates/

https://storybook.js.org/docs/react/writing-docs/autodocs#generate-a-table-of-contents

https://github.com/storybookjs/addon-designs

https://github.com/storybookjs/storybook/releases/tag/v7.1.0

https://github.com/facebookarchive/codemod

https://zhuanlan.zhihu.com/p/642570434

https://github.com/storybookjs/storybook

storybook怎么开回放 (storybook还在运营吗)

适合新用户的应用内导览

对 Tailwind、MUI、样式组件和 Emotion 的零配置支持

新的 API 参考、TypeScript 代码片段和文档 DX

生成目录

官方支持 Figma Design 插件

Vue3 源代码片段和反应性改进

本文总结

参考资料