前端項(xiàng)目伊始，通常先設(shè)計(jì)精美界面。您會(huì)精心規(guī)劃和繪制所有UI組件及其各種狀態(tài)和效果。然而，開(kāi)發(fā)過(guò)程中，情況往往會(huì)發(fā)生變化。新的需求和不可預(yù)見(jiàn)的用例層出不窮。最初精美的組件庫(kù)無(wú)法涵蓋所有這些需求，您需要不斷添加新的設(shè)計(jì)。

如果此時(shí)您身邊還有設(shè)計(jì)專(zhuān)家，固然很好，但他們往往已經(jīng)轉(zhuǎn)投其他項(xiàng)目，留下開(kāi)發(fā)者獨(dú)自應(yīng)對(duì)這些變化。結(jié)果，設(shè)計(jì)的一致性開(kāi)始下降。難以追蹤組件庫(kù)中已有的組件及其狀態(tài)和外觀。

為避免這種設(shè)計(jì)混亂，通常最好為所有組件創(chuàng)建單獨(dú)的文檔。雖然有多種工具可用于此目的，但本文將重點(diǎn)介紹一款專(zhuān)為React應(yīng)用程序設(shè)計(jì)的工具——React Storybook。它允許您輕松瀏覽組件集合及其功能。React Native組件庫(kù)就是一個(gè)此類(lèi)應(yīng)用程序的實(shí)例。

關(guān)鍵要點(diǎn)

• 簡(jiǎn)化UI開(kāi)發(fā)： React Storybook簡(jiǎn)化了UI組件的開(kāi)發(fā)和管理流程，允許開(kāi)發(fā)者獨(dú)立構(gòu)建組件并實(shí)時(shí)可視化其行為。
• 增強(qiáng)協(xié)作： 它作為一個(gè)協(xié)作平臺(tái)，通過(guò)提供一個(gè)查看和交互所有UI組件的單一位置，彌合了設(shè)計(jì)師、開(kāi)發(fā)者和其他利益相關(guān)者之間的差距。
• 可定制和可擴(kuò)展： 通過(guò)附加組件和配置設(shè)置提供廣泛的定制選項(xiàng)，使開(kāi)發(fā)者能夠根據(jù)其特定項(xiàng)目需求定制工具。
• 支持自動(dòng)化測(cè)試： 與Jest等測(cè)試框架集成，方便在UI組件開(kāi)發(fā)環(huán)境中直接進(jìn)行自動(dòng)化測(cè)試。
• 用途廣泛且可擴(kuò)展： 適用于小型和大型項(xiàng)目，并支持React以外的其他JavaScript框架，使其成為各種開(kāi)發(fā)團(tuán)隊(duì)的多功能選擇。

為什么需要React Storybook？

那么，這個(gè)展示如何提供幫助呢？為了回答這個(gè)問(wèn)題，讓我們嘗試列出參與UI組件開(kāi)發(fā)的人員，并評(píng)估他們的需求。根據(jù)您的工作流程，此列表可能有所不同，但通常包括以下人員：

設(shè)計(jì)師或UX專(zhuān)家

負(fù)責(zé)用戶(hù)界面的外觀和感覺(jué)。項(xiàng)目原型設(shè)計(jì)階段完成后，設(shè)計(jì)師通常會(huì)離開(kāi)團(tuán)隊(duì)。當(dāng)出現(xiàn)新需求時(shí)，他們需要快速了解UI的當(dāng)前狀態(tài)。

開(kāi)發(fā)者

開(kāi)發(fā)者是創(chuàng)建這些組件的人，可能是樣式指南的主要受益者。開(kāi)發(fā)者有兩個(gè)主要用例：能夠從庫(kù)中找到合適的組件，并在開(kāi)發(fā)過(guò)程中對(duì)其進(jìn)行測(cè)試。

測(cè)試人員

測(cè)試人員會(huì)仔細(xì)檢查組件是否按預(yù)期實(shí)現(xiàn)。測(cè)試人員的一項(xiàng)主要工作是確保組件在各個(gè)方面都能正確運(yùn)行。雖然這并不能消除集成測(cè)試的必要性，但這通常比在項(xiàng)目本身中單獨(dú)進(jìn)行更方便。

產(chǎn)品負(fù)責(zé)人

接受設(shè)計(jì)和實(shí)現(xiàn)的人員。產(chǎn)品負(fù)責(zé)人需要確保項(xiàng)目的每個(gè)部分都符合預(yù)期，并且品牌風(fēng)格保持一致。

您可能已經(jīng)注意到，所有相關(guān)人員的共同點(diǎn)是擁有一個(gè)包含所有組件的單一位置。在項(xiàng)目本身中查找所有組件可能會(huì)非常繁瑣。想想看，找到項(xiàng)目中所有可能的按鈕變體（包括其狀態(tài)（禁用、主要、次要等））需要多長(zhǎng)時(shí)間？因此，擁有一個(gè)單獨(dú)的庫(kù)會(huì)方便得多。

如果我已經(jīng)說(shuō)服您，讓我們看看如何在項(xiàng)目中設(shè)置Storybook。

設(shè)置React Storybook

要設(shè)置React Storybook，首先需要一個(gè)React項(xiàng)目。如果您目前沒(méi)有合適的項(xiàng)目，可以使用create-react-app輕松創(chuàng)建一個(gè)。

要生成Storybook，請(qǐng)全局安裝getstorybook：

<code>npm i -g getstorybook</code>

然后導(dǎo)航到您的項(xiàng)目并運(yùn)行：

<code>getstorybook</code>

此命令將執(zhí)行以下三項(xiàng)操作：

• 將@kadira/storybook安裝到您的項(xiàng)目中。
• 將storybook和build-storybook腳本添加到您的package.json文件中。
• 創(chuàng)建一個(gè).storybook文件夾，其中包含基本配置和一個(gè)包含示例組件和故事的stories文件夾。

要運(yùn)行Storybook，請(qǐng)執(zhí)行npm run storybook并打開(kāi)顯示的地址（http://m.miracleart.cn/link/93e4d7106625e1b0f2eb8af065c83452：

添加新內(nèi)容

現(xiàn)在我們已經(jīng)運(yùn)行了React Storybook，讓我們看看如何添加新內(nèi)容。每個(gè)新頁(yè)面都是通過(guò)創(chuàng)建故事來(lái)添加的。這些是呈現(xiàn)組件的代碼片段。getstorybook生成的示例故事如下所示：

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

storiesOf函數(shù)在導(dǎo)航菜單中創(chuàng)建一個(gè)新部分，add方法創(chuàng)建一個(gè)新子部分。您可以隨意組織Storybook，但不能創(chuàng)建超過(guò)兩級(jí)的層次結(jié)構(gòu)。組織Storybook的一種直接方法是為相關(guān)元素組創(chuàng)建常見(jiàn)的頂級(jí)部分，例如“表單輸入”、“導(dǎo)航”或“小部件”，以及各個(gè)組件的子部分。

您可以自由選擇放置故事文件的位置：在單獨(dú)的stories文件夾中或組件旁邊。我個(gè)人更喜歡后者，因?yàn)閷⒐适屡c組件放在一起有助于保持它們的易訪問(wèn)性和最新性。

故事在.storybook/config.js文件中加載，該文件包含以下代碼：

<code>npm i -g getstorybook</code>

默認(rèn)情況下，它加載src/stories/index.js文件，并期望您在那里導(dǎo)入您的故事。這有點(diǎn)不方便，因?yàn)樗枰覀儗?dǎo)入我們創(chuàng)建的每個(gè)新故事。我們可以修改此腳本以使用Webpack的require.context方法自動(dòng)加載所有故事。為了區(qū)分故事文件與其余代碼，我們可以約定為它們添加.stories.js擴(kuò)展名。修改后的腳本應(yīng)如下所示：

<code>getstorybook</code>

如果您使用不同的文件夾作為源代碼，請(qǐng)確保將其指向正確的位置。重新運(yùn)行Storybook以使更改生效。Storybook將為空，因?yàn)樗辉賹?dǎo)入index.js文件，但我們很快就會(huì)解決這個(gè)問(wèn)題。

(以下內(nèi)容與原文基本一致，略作調(diào)整，保持語(yǔ)義不變，并精簡(jiǎn)部分描述)

編寫(xiě)新的故事

現(xiàn)在我們已經(jīng)稍微調(diào)整了Storybook以滿足我們的需求，讓我們編寫(xiě)我們的第一個(gè)故事。但首先我們需要?jiǎng)?chuàng)建一個(gè)組件來(lái)展示。讓我們創(chuàng)建一個(gè)簡(jiǎn)單的Name組件，在一個(gè)彩色塊中顯示名稱(chēng)。該組件將具有以下JavaScript和CSS。

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

您可能已經(jīng)注意到，這個(gè)簡(jiǎn)單的組件可以有三種狀態(tài)：默認(rèn)、突出顯示和禁用?？梢暬羞@些狀態(tài)豈不是很好？讓我們?yōu)榇司帉?xiě)一個(gè)故事。在您的組件旁邊創(chuàng)建一個(gè)新的Name.stories.js文件，并添加以下內(nèi)容：

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);

打開(kāi)Storybook并查看您的新組件。結(jié)果應(yīng)如下所示：

隨意嘗試更改組件的顯示方式及其源代碼。請(qǐng)注意，由于React的熱重載功能，每當(dāng)您編輯故事或組件時(shí)，更改都會(huì)立即出現(xiàn)在您的Storybook中，無(wú)需手動(dòng)刷新瀏覽器。但是，當(dāng)您添加或刪除文件時(shí)，可能需要刷新。Storybook并不總是注意到這些更改。

(以下內(nèi)容同樣精簡(jiǎn)并調(diào)整，保持語(yǔ)義一致)

視圖自定義

如果您想更改故事的顯示方式，可以使用容器將其包裝起來(lái)。這可以使用addDecorator函數(shù)來(lái)完成。例如，您可以為所有頁(yè)面添加“示例”標(biāo)題，方法是將以下代碼添加到.storybook/config.js：

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

您也可以通過(guò)在storiesOf之后調(diào)用addDecorator來(lái)自定義單獨(dú)的部分。

發(fā)布您的Storybook

完成Storybook的工作并認(rèn)為它已準(zhǔn)備好發(fā)布后，您可以將其構(gòu)建為靜態(tài)網(wǎng)站，方法是運(yùn)行：

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

默認(rèn)情況下，Storybook構(gòu)建到storybook-static文件夾中。您可以使用-o參數(shù)更改輸出目錄?，F(xiàn)在您只需要將其上傳到您喜歡的托管平臺(tái)即可。

如果您正在GitHub上處理項(xiàng)目，您可以通過(guò)將其構(gòu)建到docs文件夾并將它推送到存儲(chǔ)庫(kù)來(lái)發(fā)布您的Storybook?？梢詫itHub配置為從那里提供您的GitHub Pages網(wǎng)站。如果您不想將構(gòu)建的Storybook保存在存儲(chǔ)庫(kù)中，也可以使用storybook-deployer。

構(gòu)建配置

Storybook配置為支持故事中的許多功能。您可以使用與create-react-app相同的ES2015 語(yǔ)法編寫(xiě)，但是，如果您的項(xiàng)目使用不同的Babel配置，它將自動(dòng)拾取您的.babelrc文件。您還可以導(dǎo)入JSON文件和圖像。

如果您覺(jué)得這還不夠，您可以通過(guò)在.storybook文件夾中創(chuàng)建一個(gè)webpack.config.js文件來(lái)添加額外的webpack配置。此文件導(dǎo)出的配置選項(xiàng)將與默認(rèn)配置合并。例如，要在您的故事中添加對(duì)SCSS的支持，只需添加以下代碼：

<code>npm i -g getstorybook</code>

不要忘記安裝sass-loader和node-sass。

您可以添加任何所需的webpack配置，但是，您不能覆蓋入口、輸出和第一個(gè)Babel加載器。

如果您想為開(kāi)發(fā)和生產(chǎn)環(huán)境添加不同的配置，您可以導(dǎo)出一個(gè)函數(shù)。它將使用基本配置和設(shè)置為“DEVELOPMENT”或“PRODUCTION”的configType變量來(lái)調(diào)用。

使用附加組件擴(kuò)展功能

Storybook本身非常有用，但為了使其更好，它還有一些附加組件。在本文中，我們只介紹其中一些，但請(qǐng)務(wù)必稍后查看官方列表。

(以下部分精簡(jiǎn)，并對(duì)addon的介紹方式進(jìn)行調(diào)整)

Storybook自帶兩個(gè)預(yù)配置的附加組件：Actions和Links。您無(wú)需進(jìn)行任何額外的配置即可使用它們。

• Actions: 允許您在“Action Logger”面板中記錄組件觸發(fā)的事件。
• Links: 允許您在組件之間添加導(dǎo)航。

Knobs: 允許您通過(guò)在運(yùn)行時(shí)直接從UI修改React屬性來(lái)自定義組件。安裝方法：npm i --save-dev @storybook/addon-knobs，注冊(cè)方法：在.storybook/addons.js中導(dǎo)入。使用withKnobs裝飾器包裝故事。

Info: 允許您添加有關(guān)故事的更多信息，例如其源代碼、描述和React propTypes。安裝方法：npm i --save-dev @storybook/addon-info，注冊(cè)方法：在.storybook/preview.js中使用addDecorator。

自動(dòng)化測(cè)試

Storybook的一個(gè)重要方面（本文未介紹）是將其用作運(yùn)行自動(dòng)化測(cè)試的平臺(tái)。您可以執(zhí)行各種測(cè)試，從單元測(cè)試到功能測(cè)試和視覺(jué)回歸測(cè)試。不出所料，有一些附加組件旨在增強(qiáng)Storybook作為測(cè)試平臺(tái)的功能。我們不會(huì)詳細(xì)介紹它們，因?yàn)樗鼈冎档脝为?dú)成文，但仍然想提及它們。

• Specifications: 允許您直接在故事文件中編寫(xiě)單元測(cè)試。
• Storyshots: 允許您根據(jù)故事執(zhí)行Jest快照測(cè)試。

Storybook 作為服務(wù)

Kadira 還提供 Storybook 作為一項(xiàng)名為 Storybook Hub 的服務(wù)。它允許您在其上托管 Storybook，并將協(xié)作提升到一個(gè)新的水平。除了標(biāo)準(zhǔn)功能外，它還與 GitHub 集成，并且可以為您的每個(gè)拉取請(qǐng)求生成一個(gè)新的 Storybook。您還可以在 Storybook 中直接留下評(píng)論，以與您的同事討論更改。

結(jié)論

如果您覺(jué)得維護(hù)項(xiàng)目中的UI組件開(kāi)始變得痛苦，請(qǐng)退一步看看您錯(cuò)過(guò)了什么。您可能只需要所有相關(guān)方之間方便的協(xié)作平臺(tái)。在這種情況下，對(duì)于您的React項(xiàng)目，Storybook是您的完美工具。

您是否已經(jīng)在使用Storybook？您打算嘗試一下嗎？為什么？或者為什么不呢？我很樂(lè)意在評(píng)論中聽(tīng)到您的聲音。

(FAQ部分精簡(jiǎn)，并調(diào)整結(jié)構(gòu))

常見(jiàn)問(wèn)題解答 (FAQ)

• React Storybook與其他UI開(kāi)發(fā)工具有何不同？ React Storybook允許開(kāi)發(fā)者獨(dú)立構(gòu)建組件，使開(kāi)發(fā)過(guò)程更快更高效，并提供實(shí)時(shí)可視化測(cè)試環(huán)境。
• 我可以在其他JavaScript框架中使用React Storybook嗎？ 是的，它支持Vue.js和Angular等框架。
• 如何向我的Storybook添加附加組件？ 通過(guò)npm或yarn安裝，添加到.storybook/addons.js文件，并根據(jù)文檔進(jìn)行配置。
• React Storybook的學(xué)習(xí)曲線如何？ 如果您熟悉JavaScript和React，應(yīng)該很快就能上手。
• 我可以將React Storybook用于大型項(xiàng)目嗎？ 是的，它被Airbnb、IBM和Lyft等大型組織使用。
• 如何與他人共享我的Storybook？ 可以使用Storybook Deployer將其部署到靜態(tài)托管服務(wù)，如GitHub Pages或Netlify。
• 我可以在React Storybook中測(cè)試我的組件嗎？ 是的，它提供可視化測(cè)試環(huán)境，并可與Jest等測(cè)試庫(kù)集成。
• 如何自定義Storybook的外觀？ Storybook提供主題定制、自定義webpack配置和創(chuàng)建自定義附加組件等選項(xiàng)。
• 我可以將React Storybook用于移動(dòng)應(yīng)用程序開(kāi)發(fā)嗎？ 是的，它支持React Native。
• React Storybook是開(kāi)源的嗎？ 是的，它托管在GitHub上，并歡迎來(lái)自世界各地開(kāi)發(fā)者的貢獻(xiàn)。

總而言之，對(duì)原文進(jìn)行了大幅度的改寫(xiě)，使其更簡(jiǎn)潔流暢，并保持了原意。 圖片格式保持不變。

以上是React Storybook：輕松開(kāi)發(fā)美麗的用戶(hù)界面的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！