Storybook是一个UI组件的开发环境。它允许我们浏览组件库，查看组件的不同状态，并交互式地开发和测试它们。Storybook运行在我们的应用程序之外；因此，我们可以独立地开发UI组件，而不必担心任何项目依赖性和需求。对于这篇介绍性博客文章的范围，我们将演示如何使用Storybook启动一个新的项目，以熟悉其平台和机制，该平台和机制来自于Auth0在Customer Success Infrastructure团队中开发的"Storybook Driven Development"实践。在以前的博客文章中，我们通过建立一个组件库来创建我们的项目的基础。如果你一直跟随我们，你可以继续在我们离开的地方继续前进。否则，请随意克隆惊奇银行应用程序回购，并检查可重用性的第一部分分支，其中包括我们在第一部分中所做的所有工作。git克隆https://github.com/auth0-blog/mavel-bank-app.gitcd惊奇银行应用程序/git checkout可重用性第1部分让我们从学习如何在全新的create react应用程序项目中设置故事书开始。设置故事书添加Storybook有两种选择：我们可以全局安装平台，也可以在本地启动平台。我们应该采用哪种安装路径？我们的同事Matt Machuga是我们研发团队的一位工程主管，如何租用服务器，他建议"对于全球安装来说，不特定于项目的CLI工具是很好的选择。"实际上，Matt试图"将其他所有工具都放在本地"。因此，正在使用的版本会被记录下来，并通过npm安装进行安装。"对于安装Storybook，我们有不同的选择：全局安装、使用npx的安装和本地手动安装。我会和你一起探讨这些选择，让你决定哪一个最适合你。但是，云服务器服务，我建议您和我一起通过本地手动安装，因为它让我们了解了很多关于故事书如何工作的知识。安装@storybook/react global要从shell安装并运行Storybook，请执行以下快速步骤：在shell中，确保您的项目目录是当前的工作目录，marvel app。接下来，全局安装@storybook/cli：npm i-g@故事书/cli上面，我们使用了几个npm参数的快捷方式。我代表install，-g代表标志——global。重新启动外壳。您可以通过关闭现有的窗口或选项卡并打开新的窗口或选项卡来完成此操作。最后，再次使用mavel app作为当前的工作目录，运行getstorybook命令，让StorybookCLI构建项目中使用Storybook所需的所有文件和文件夹。其中包括根项目下的.storybook文件夹和src文件夹下的stories文件夹。让我们看看在没有使用npx的全局安装的情况下如何实现这一点。安装@storybook/react使用npx我们可以模拟Storybook全局安装的相同行为，但是没有实际的全局安装。如果您的系统中安装了npm>=5.2，那么就可以使用npx了！在shell中，确保您的项目目录是当前的工作目录，marvel app。使用npx运行getstorybook命令：npx@storybook/cli getstorybooknpx动态下载并执行二进制文件。StorybookCLI将运行并在您的项目中创建所有必要的文件和文件夹，就像在上一节中一样。这个方法是启动和运行的最快方法！"npx允许我们运行对npm注册表中提供的CLI工具的一次性调用，而无需本地安装。"在推特上留言现在，让我们来探索故事书创造者所说的"慢启动"，私人云服务器，即故事书的本地手动安装。通过这个过程，我们将了解StorybookCLI安装的文件夹和文件是如何工作的。安装@storybook/手动反应在shell中，运行以下命令：净现值：npm i-D@故事书/反应另一个npm参数快捷方式。-D代表--save-dev。NPM故事脚本@storybook/react完成安装后。我们需要将以下脚本添加到包.json运行故事书："storybook"："启动storybook-p 9001-c.storybook"{"name"："漫威银行"，"version"："0.1.0"，"私人"：是的，"依赖关系"：{"node sass chokidar"："^1.3.3"，"npm run all"："^4.1.3"，"react"："^16.4.1"，云的服务器，"react dom"："^16.4.1"，"react脚本"："1.1.4"},"脚本"：{"build css"："节点sass chokidar src/-o src/"，个人免费云服务器，"观察css"："npm运行构建css&&node sass chokidar src/-o src/--watch--recursive"，"storybook"："启动storybook-p 9001-c.storybook"，"start react"："react脚本启动"，"start"："npm run all-p观察css start react"，"build react"："react脚本构建"，"build"："npm run all-s build css build react"，"test"："react scripts test--env=jsdom"，"eject"："react脚本弹出"},"开发依赖性"：{"@故事书/react"："^3.4.8"}}创建故事书配置文件正如故事书文档中所解释的那样，该平台是灵活的，可以用不同的方式进行配置。我们可以通过一个config目录来控制这个配置。在我们的storybook npm脚本中，我们添加了一个-c选项后跟.storybook，它告诉storybook在.storybook隐藏文件夹中查找配置选项。将项目根文件夹作为当前工作目录，让我们继续创建该文件夹：macOS/Linux/Windows系统：mkdir故事书接下来，我们需要创建一个配置文件文件在里面。故事书保存配置。让我们从以下代码开始：//.故事书/配置文件从"@storybook/react"导入{configure}；函数loadStories（）{需要（"../src/stories/索引.js");//你需要多少故事就需要多少。}配置（loadStories，模块）；故事书的工作方式与测试工具类似。这个配置文件加载configure方法，该方法以名为loadStories的函数和一个模块作为参数。loadStories将在其主体上定义stories。故事描述组件的单一状态。我们要为组件将具有的每个状态编写一个故事。类似于在测试故事中测试方法的笑话库。我们将从../src/stories编写并加载故事/索引.js它将位于根文件夹下。让我们创建这样的文件夹和文件来写我们的第一个故事。在src文件夹下创建一个stories子文件夹，然后创建一个索引.js里面有文件。.storybook仅用于配置文件。不要把你的故事文件夹放在这个隐藏的文件夹里。在故事书中写故事打开最近创建的索引.js在src/stories下，并使用以下代码填充它：//src/故事/索引.js从React导入React；从"@stories book/react"导入{storiesOf}；到目前为止，没有什么进展。我们导入React和storiesOf方法，它将帮助我们为组件创建故事。我们需要那个部件。此处导入按钮：//src/故事/索引.js从React导入React；从"@stories book/react"导入{storiesOf}；从"../../src/features/common/Button"导入按钮；故事书有一种声明性的语言。我们接下来要做的是告诉它我们想要Button的故事：//src/故事/索引.js从React导入React；从"@stories book/react"导入{storiesOf}；从"../../src/features/common/Button"导入按钮；存储（"按钮"，模块）；如果我们从一本真正的书的角度来思考，这就是这本书的装订和封面。我们需要用满页的故事来填满它。我们也使用add方法进行声明：//src/故事/索引.js从React导入React；从"@stories book/react"导入{storiesOf}；从"../../src/features/common/Button"导入按钮；storiesOf（"按钮"，模块）.add（"带文本"，（）=>());添加行为类似于在有故事的书中添加一章。我们想给每一章一个标题。在本例中，我们创建了一个标题为文本的故事。add将故事标题和呈现正在暂存的组件的函数作为参数。我们有写故事的基础。现在是时候通过运行故事书看看一切是否正常。"与测试类似，Storybook使用声明性语言编写故事，定义组件的预期表示和行为。"在推特上留言跑步故事书在shell中，运行以下命令：净现值：npm跑步故事书如果一切运行成功，我们将在shell中看到以下消息：信息故事书开始于=>：9001/打开那个网址，：9001/在浏览器中。让它加载。。。在那里我们拥有它的全部荣耀：我们自己的故事书！现在这是很基本的，但这是一个很好的开始！这是一个很好的时机，可以再次承诺解决故事书的集成问题：git状态git添加。git commit-m"集成故事书"将CSS与故事书集成为了传达按钮组件的表示和状态，我们需要向其添加样式。在src/features/common下，让我们创建按钮.scss并用以下代码填充它：//src/特征/通用/按钮.scss@导入"../../styles/theme"；.按钮{显示器：柔性；弯曲方向：row；对齐内容：中心；对齐项目：居中；高度：40px；宽度：160px；边框：2倍纯色$蓝色；边界半径：60px；字体系列：$primary font；字号：16px；颜色：蓝色；字母间距：1.27px；文本对齐：居中；文本转换：大写；}接下来，让我们将该样式表导入到按钮.js并添加Button作为Button组件的类名：从React导入React；进口"/按钮.css";const Button=道具=>

{道具标签}

；导出默认按钮；让我们省去我们的工作吧。我们现在应该看看故事书是如何刷新董事会和显示t