storybook是什么意思？用法、例句(Storybook 7.0 正式发布)

大家好，感谢邀请，今天来为大家分享一下storybook是什么意思？用法、例句的问题，以及和Storybook 7.0 正式发布的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

好消息，Storybook官方正式发布了v7.0版本。关注Storybook，你会发现Storybook团队迭代速度非常快，使用的用户越来越多，github上的star也在增长。我一开始以为storybook是做组件库用的，随着我后面了解越来越深发现压根不是这么回事。

我在写组件库中发现，很多功能比如umi-library(现在改名umi-father)都有了，storybook和umi-farther用的都是docz，那我直接用docz，干嘛用storybook？后来经过我不断的翻storybook才发现storybook压根不是只为了做组件库存在的。

今天小编给大家详细介绍Storybook，希望对友友们所有帮助。

现在网络的普及正在将更多的复杂性推向前端。它始于响应式网络设计，将每个用户界面从一个变成了1011000个不同的用户界面。随着时间的推移，诸如设备、浏览器、可访问性、性能和异步状态等附加需求不断增加。

React、Vue和Angular等组件驱动工具有助于将复杂的UI分解为简单的组件，但它们不是硬弹。随着前端的增长，组件的数量也会增加。成熟的项目可以包含数百个组件，产生数千个离散的变体。

更为复杂的是，这些UI调试起来很痛苦，因为它们被业务逻辑、交互状态和应用程序上下文所纠缠。

现代前端的广度压倒了现有的工作流程。开发人员必须考虑无数的UI变体，但还没有能力开发或组织所有这些变体。你最终会遇到这样的情况：UI更难构建，工作起来不那么令人满意，而且很脆弱。

现在，每一个UI都是一个组件。组件的超能力在于，你不需要旋转整个应用程序来查看它们是如何渲染的。您可以通过传递道具、模拟数据或伪造事件来孤立地呈现特定的变体。

Storybook被打包为一个小型的、仅用于开发的研讨会，与您的应用程序共存。它提供了一个独立的iframe来呈现组件，而不会受到应用程序业务逻辑和上下文的干扰。这有助于您将开发重点放在组件的每个变体上，甚至是难以触及的边缘案例。

官网：https://storybook.js.org/

Github：https://github.com/storybookjs/storybook

Storybook是一个ui组件开发管理的工具，我们可以通过story独立创建组件，并且每个组件都有一个独立开发调试环境。Storybook是运行在主应用程序之外，不依赖于项目，因此我们不必担心开发环境、依赖等问题导致不能开发组件。Storybook支持多个主流框架（React,Vue,Angular,Mithril,Ember）等。

Storybook在app之外运行，这允许开发者独立地开发UI组件，这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建，而不必担心应用程序特定的依赖关系。

当你为组件编写Storybook时，你可以免费获得一系列额外的好处。

隔离组件和页面，并将它们的用例作为故事进行跟踪。验证用户界面难以触及的边缘情况。使用插件模拟组件所需的上下文、API请求、设备功能等。

Stories是一种实用、可重复的跟踪UI状态的方法。在开发过程中使用它们对UI进行现场测试。Storybook提供了用于自动辅助功能、交互和可视化测试的内置工作流。或者通过将故事导入其他JavaScript测试工具，将它们用作测试用例。

故事书是用户界面真实性的唯一来源。Stories为您的所有组件及其各种状态建立索引，使您的团队能够轻松地查找和重用现有的UI模式。故事书还可以根据这些故事自动生成文档。

故事展示了UI的实际工作方式，而不仅仅是它们应该如何工作的画面。这使每个人都对目前正在生产的产品保持一致。发布故事书以获得队友的批准。或者将它们嵌入到Wiki、Markdown和Figma中，以简化协作。

故事书与您的持续集成工作流兼容。将其添加为CI步骤，以自动化用户界面测试，与队友一起审查实施情况，并获得利益相关者的批准。

Storybook是用于开发和测试组件的出色工具，因为它允许您在与应用程序的其余部分隔离的情况下处理它们。这意味着您可以开发您的组件，而不必担心它们将如何与您应用程序中的其他组件或功能交互。这也意味着您可以在受控环境中测试您的组件，从而更轻松地查找和修复错误。

Storybook官方首页这样说道：storybook为UI组件提供一个独立的沙箱环境，在这里无论是edgecase还是难于遇到的状态都可以造出来。可以把usecase像故事一样展现出来。

平常的组件开发，程序猿需要把组件单独放置在一个页面不断的调试，非常不人性化。而storybook就单独为开发人员提供了一个页面，将组件放置在他们提供的页面中清晰可见。

简单的说，如果我们是开发react组件，就不需要启动react的打包编译启动页面浏览组件，只需要启动storybook为我们内置的页面即可浏览组建

StoryBook的应用场景是你已经有个Vue项目，你想要对项目中的组件做一个交互性的展示。所以如何你一开始就拿个空项目自动安装是无法运行的，会提示你装Vue等等依赖。

npminstall@storybook/vue--save-dev\nnpminstallvue-loadervue-template-compiler@babel/corebabel-loaderbabel-preset-vue--save-de

2.入口配置

在项目根目录新建.storybook/config.js文件##.storybook/config.js#

import{configure}from'@storybook/vue'\n//加载所有的组件故事\nconfigure(require.context('./stories',true,/\\.js$/),module)

3.自定义wepback配置

在项目根目录新建.storybook/webpack.config.js文件

//在这里你可以重写storybook默认的webpack配置\nmodule.exports=async({config,mode})=>{\n//`mode`hasavalueof'DEVELOPMENT'or'PRODUCTION'\n\n//新加less语法加载器\nconfig.module.rules.push({\ntest:/\\.less$/,\nuse:["style-loader","css-loader","less-loader",{\nloader:'style-resources-loader',\noptions:{\npatterns:[\npath.resolve(__dirname,'../src/assets/style/common/mixins.less')\n]\n}\n}]\n})\n\n//新增@别名\nconfig.resolve.alias=Object.assign(config.resolve.alias,{\n'@':path.resolve(__dirname,'../src')\n})\n\n//Returnthealteredconfig\nreturnconfig\n}

4.ajax跨域代理

在项目根目录新建.storybook/middleware.js文件

constproxy=require('http-proxy-middleware')\nmodule.exports=functionexpressMiddleware(router){\nrouter.use(\n'/api',\nproxy({\ntarget:`http://locahost:5000`,//服务器api地址\nchangeOrigin:true\n})\n)

5.相关插件介绍和使用

knobs插件提供一个表单控制台，用户可以通过表单控制台来改变组件相关属性，展示不同属性下的组件

actions插件让用户在对组件的操作，可以反应在底部的日志里面

addon插件可以让你直接在界面上看到当前sotry的源码

addon-docs插件让你可以为你的组件编写文档

（5）插件引入

npminstall@storybook/addon-knobs@storybook/addon-actions@storybook/addon-storysource@storybook/addon-docs--dev

在项目根目录新建.storybook/addons.js文件

import'@storybook/addon-knobs/register';\nimport'@storybook/addon-actions/register';\nimport'@storybook/addon-storysource/register';\nimport'@storybook/addon-docs/register';

6.展示自己的组件

在项目根目录下的stories文件夹中，新建一个任意名称的js文件

importVuefrom'vue';\n//这里导入你自己的组件，\nimportMyButtonfrom'@/components/Button.vue';\n\nexportdefault{title:'Button'};\n\nexportconstwithText=()=>'<my-button>withtext</my-button>';\n\nexportconstwithEmoji=()=>'<my-button></my-button>';\n\nexportconstasAComponent=()=>({\ncomponents:{MyButton},\ntemplate:'<my-button:rounded="true">rounded</my-button>'\n});

最后在根目录命令行启动storybook就搞定了

npmrunstorybookStorybook插件推荐actions插件

Github；https://github.com/storybookjs/storybook/tree/master/addons/actions

Github：https://github.com/storybookjs/storybook/tree/master/addons/links

Github：https://github.com/storybookjs/storybook/tree/master/addons/knobs

Github：https://github.com/storybookjs/storybook-addon-console

Github：https://github.com/storybookjs/storybook/tree/master/addons/storysource

Github：https://github.com/storybookjs/storybook/tree/master/addons/docs

Github：https://github.com/storybookjs/storybook/tree/master/addons/viewport

Github：https://github.com/storybookjs/storybook/tree/master/addons/backgrounds

Github：https://github.com/storybookjs/storybook/tree/master/addons/a11y

Github：https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core

好用的社区插件

Githubh：https://github.com/abhiaiyer91/apollo-storybook-decorator

用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。

storybook-graphql-kit插件

Github：https://github.com/focusreactive/storybook-graphql-kit

也是graphql的一套工具，可以在线修改数据之类。

Github：https://github.com/tuchk4/storybook-readme

storybook-addon-versions插件

story2sketch插件

Github：https://github.com/chrisvxd/story2sketch

Github：https://github.com/storybookjs/addon-jsx

storybook-addon-react-live-edit插件

Github：https://github.com/vertexbz/storybook-addon-react-live-edit

storybook-host插件

这个插件可以设定故事iframe设定些属性。

SpecificationsAddon插件

这个插件可以用来整合一些测试工具到storybook上，有点类似storyshots插件

这个插件名字起的挺好啊，用途就是通过puppeteers来对每个故事截图，然后生成到文件夹里。

storybook-addon-responsive-views插件

响应式布局一次头全预览！不过感觉加了viewport然后使用docs插件也能做到。

StorybookPlayroomAddon插件

可以同时浏览在不同分辨率下的效果。

storybook-addon-theme-playground插件

可以对每个story设置主题，有点像做好参数的knob。

Storybook是黄金标准的UI工作坊环境。由于其无与伦比的框架兼容性和丰富的开发、文档和测试功能，Monday.com、theGuardian、Intuit和许多其他公司的团队在整个行业中都在使用它。

今天，我很高兴地宣布《Storybook7》（SB7），这是官方两年多来的第一次重大发行，也是迄今为止最大的一次发行。

Storybook:thenextchapter

Storybook始于2016年。从那时起，官方率先提出了UI研讨会环境的想法，用于组件驱动的开发、文档和测试。

在此期间，前端生态系统发生了巨大变化。IE11终于消失了。TypeScript正在迅速占据JavaScript领域。Vite、Turbopack和Rspack正在给Webpack带来一些激烈的竞争。而pnpm现在是一个主要的npm替代方案。

Storybook随着这些变化而发展，我们长期以来一直支持主流惯例和新兴的最佳实践。例如，早在Vite取得目前的成功之前，Storybook就在21年年中首次支持了Vite。

然而，渐进式适应是困难的。有时，你需要一次大的释放来清理甲板并使你的堆栈现代化。Storybook7就是这个版本！

Storybook7更新UI

使用Storybook7的精简UI，您现在可以比以往任何时候都更轻松地发布出色的UI。画布大小已逐边扩展，为组件提供了更多空间。官方通过改进的间距和更精细的菜单增强了侧边栏，同时保持了信息密度不变。此外，官方还重新绘制了200多个自定义图标，以获得更清晰的视觉效果和更快的加载速度。让我们不要忘记自动黑暗模式！

Vite、NextJS和SveltKit的零配置支持

Storybook7引入了零配置Vite、NextJS和SveltKit支持。我们新的FrameworkAPI根据您的应用程序设置配置Storybook，包括您选择的生成器（Webpack和Vite）、渲染器（React、Vue、Angular、Svelte、HTML）等！

对于Vite来说，Webpack现在已经不复存在了。Storybook会根据应用程序的Vite设置自动进行配置，从而减少安装大小和启动时间。阅读更多故事书中的一流Vite支持。

对于NextJS，Storybook现在自动模拟路由器。还有对实用程序的内置支持，包括next/font、next/image和绝对导入。请自动在集成Next.js和Storybook中阅读更多内容。

对于SvelteKit，这意味着框架特定的设置是自动配置的，例如使用$app/path安全检索资产路径，支持$app/stores和特殊的$lib导入别名，以及使组件能够访问$app/environment。在SvelteKit的故事书中阅读更多内容。

改进型安全性的CSF3

Storybook7通过将组件故事格式3（CSF3）设置为默认格式，为编写故事带来了重大改进。与早期版本相比，CSF3具有两个主要优势：简洁性和可重用性。它通过丢弃大量样板来简化代码，并自动化故事的各个方面，如标题和侧边栏位置（基于磁盘位置）。

官方改进了CSF3中的TypeScript支持。更严格的类型提供了更好的编辑器内检查和自动完成，这对TypeScript用户来说是一个巨大的生活质量升级。

官方提供一个codemod，可以自动将您现有的故事转换为CSF3语法，为您节省升级时间。但是SB7是完全向后兼容的，所以如果你还没有准备好升级，你不需要改变任何东西。

npxstorybook@latestmigratecsf-2-to-3--glob="**/*.stories.js"

支持MDX2的文档大修

《Storybook7》对《Storybook文档》的全面修订是SB7中最大的变化，标志着与以前的《Storybook》相比有了巨大的改进。

Autodocs现在以组件为中心

在Storybook7中，您现在可以将文档直接附加到组件上。页面显示在侧边栏中，旁边是组件的故事，而不是以前的选项卡式UI。

您可以通过添加autodocs标记为组件启用自动生成的文档页面。

使用MDX2改进了手动文档

Storybook7包含支持MDX2的增强型手动文档。它带来了许多好处，包括改进的性能和人体工程学。新版本的编译速度快了25%，生成的代码运行速度是原来的两倍。此外，它还为在JSX元素中嵌套markdown提供了更好的支持。

为了适应一些突破性的变化，Storybook将在整个7.x时间段内保持对MDX1的选择加入支持，确保我们的用户平稳过渡。

Storybook7鼓励所有用户在CSF3中定义故事，然后在MDX中引用它们。这让你两全其美：在写故事时进行类型检查和自动完成，再加上使用markdown轻松创作。您可以使用下面的Storybook7迁移脚本将现有的MDX故事文件拆分为单独的MDX和CSF文件。

npxstorybook@latestmigratemdx-to-csf--glob"**/*.stories.mdx"

新文档块API–功能强大但简单

为了使您的文档更加有效，我们引入了一组更强大、更一致的文档块。这些UI块负责从呈现故事到显示源代码和生成args表的所有工作。他们可以使用of＝｛｝语法引用故事，这比引用故事ID字符串更安全、更干净。此外，我们还提供了一个useOf挂钩，用于创建自定义文档块，使您能够根据特定需求调整文档页面。

改进了交互测试和代码覆盖率

Storybook已迅速成为测试组件的最佳选择。你可以通过附加一个play函数将故事转换为测试。然后，使用TestingLibrary和Jest中熟悉的语法来模拟事件并断言DOM结构。

这在测试复杂的UI交互时尤其有用，例如表单控件或其他有状态组件。您可以在浏览器中调试事件流，并使用我们的测试运行器从命令行并行执行所有测试。

在Storybook7中，我们通过添加代码覆盖率改进了测试支持，该覆盖率可以扫描代码以查找未经测试的边缘案例。它可以帮助您编写更全面的测试，并增强您对所提供UI的信心

为了使您能够将交互组合成大家可读的组，我们在Storybook

//SignupForm.stories.ts\n\n//Replaceyour-frameworkwiththenameofyourframework\nimporttype{Meta,StoryObj}from'@storybook/your-framework';\nimport{userEvent,within}from'@storybook/testing-library';\nimport{SignupForm}from'./SignupForm';\n\nconstmeta:Meta<typeofSignupForm>={\ntitle:'SignupForm',\ncomponent:SignupForm,\n};\nexportdefaultmeta;\ntypeStory=StoryObj<typeofSignupForm>;\n\nexportconstSubmitted:Story={\nplay:async({args,canvasElement,step})=>{\nconstcanvas=within(canvasElement);\n\nawaitstep('Enteremailandpassword',async()=>{\nawaituserEvent.type(canvas.getByTestId('email'),'hi@example.com');\nawaituserEvent.type(canvas.getByTestId('password'),'supersecret');\n});\n\nawaitstep('Submitform',async()=>{\nawaituserEvent.click(canvas.getByRole('button'));\n});\n},\n};

生态系统CI提供更好的稳定性和更顺畅的升级

在快速变化的前端生态系统中支持数十个框架、渲染器和构建器是一项挑战。为了提高故事书的稳定性，我们开始将故事书视为一项服务，并希望在这个不断发展的环境中最大限度地提高其“正常运行时间”。

为了实现这一点，我们创建了Storybook生态系统CI。此功能针对大量标准项目配置矩阵测试StorybookPR。这一切都在一个公共状态页面中可视化，该页面显示了每日结果，并提供了Storybook稳定性的快照。如果你注意到一些东西似乎坏了，请查看此页面以了解故事书的运行情况。

设计插件样式以便于配置

使用Storybook设置样式工具对许多开发人员来说是一个常见的挑战。虽然有很多文章（包括我们博客上的几篇），但这些文章并不总是最新的，这导致了头痛和耗时的设置过程，其中充满了试错。

为了使这个过程更加简单明了，我们创建了一个新的样式插件。这是一个与框架无关的解决方案，可以与Tailwind、MaterialUI、Chakra、Emotion、Styledcomponents、SASS和PostCSS等流行工具无缝配合。

样式加载项使您能够加载全局样式并将其应用于组件，以及使用主题提供程序包装故事。它甚至有一个主题切换器，让你可以轻松地在主题之间切换。或者，也可以使用参数覆盖故事级别的主题值。

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

关于storybook是什么意思？用法、例句，Storybook 7.0 正式发布的介绍到此结束，希望对大家有所帮助。