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

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

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

關(guān)鍵要點

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

為什麼需要React Storybook？

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

設(shè)計師或UX專家

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

開發(fā)者

開發(fā)者是創(chuàng)建這些組件的人，可能是樣式指南的主要受益者。開發(fā)者有兩個主要用例：能夠從庫中找到合適的組件，並在開發(fā)過程中對其進行測試。

測試人員

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

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

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

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

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

設(shè)置React Storybook

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

要生成Storybook，請全局安裝getstorybook：

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

然後導(dǎo)航到您的項目並運行：

<code>getstorybook</code>

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

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

要運行Storybook，請執(zhí)行npm run storybook並打開顯示的地址（http://www.miracleart.cn/link/93e4d7106625e1b0f2eb8af065c83452：

添加新內(nèi)容

現(xiàn)在我們已經(jīng)運行了React Storybook，讓我們看看如何添加新內(nèi)容。每個新頁面都是通過創(chuàng)建故事來添加的。這些是呈現(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)建一個新部分，add方法創(chuàng)建一個新子部分。您可以隨意組織Storybook，但不能創(chuàng)建超過兩級的層次結(jié)構(gòu)。組織Storybook的一種直接方法是為相關(guān)元素組創(chuàng)建常見的頂級部分，例如“表單輸入”、“導(dǎo)航”或“小部件”，以及各個組件的子部分。

您可以自由選擇放置故事文件的位置：在單獨的stories文件夾中或組件旁邊。我個人更喜歡後者，因為將故事與組件放在一起有助於保持它們的易訪問性和最新性。

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

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

默認情況下，它加載src/stories/index.js文件，並期望您在那裡導(dǎo)入您的故事。這有點不方便，因為它需要我們導(dǎo)入我們創(chuàng)建的每個新故事。我們可以修改此腳本以使用Webpack的require.context方法自動加載所有故事。為了區(qū)分故事文件與其餘代碼，我們可以約定為它們添加.stories.js擴展名。修改後的腳本應(yīng)如下所示：

<code>getstorybook</code>

如果您使用不同的文件夾作為源代碼，請確保將其指向正確的位置。重新運行Storybook以使更改生效。 Storybook將為空，因為它不再導(dǎo)入index.js文件，但我們很快就會解決這個問題。

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

編寫新的故事

現(xiàn)在我們已經(jīng)稍微調(diào)整了Storybook以滿足我們的需求，讓我們編寫我們的第一個故事。但首先我們需要創(chuàng)建一個組件來展示。讓我們創(chuàng)建一個簡單的Name組件，在一個彩色塊中顯示名稱。該組件將具有以下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)註意到，這個簡單的組件可以有三種狀態(tài)：默認、突出顯示和禁用。可視化所有這些狀態(tài)豈不是很好？讓我們?yōu)榇司帉懸粋€故事。在您的組件旁邊創(chuàng)建一個新的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
);

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

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

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

視圖自定義

如果您想更改故事的顯示方式，可以使用容器將其包裝起來。這可以使用addDecorator函數(shù)來完成。例如，您可以為所有頁面添加“示例”標題，方法是將以下代碼添加到.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;

您也可以通過在storiesOf之後調(diào)用addDecorator來自定義單獨的部分。

發(fā)布您的Storybook

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

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

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

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

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

構(gòu)建配置

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

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

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

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

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

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

使用附加組件擴展功能

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

(以下部分精簡，並對addon的介紹方式進行調(diào)整)

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

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

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

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

自動化測試

Storybook的一個重要方面（本文未介紹）是將其用作運行自動化測試的平臺。您可以執(zhí)行各種測試，從單元測試到功能測試和視覺回歸測試。不出所料，有一些附加組件旨在增強Storybook作為測試平臺的功能。我們不會詳細介紹它們，因為它們值得單獨成文，但仍然想提及它們。

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

Storybook 作為服務(wù)

Kadira 還提供 Storybook 作為一項名為 Storybook Hub 的服務(wù)。它允許您在其上託管 Storybook，並將協(xié)作提升到一個新的水平。除了標準功能外，它還與 GitHub 集成，並且可以為您的每個拉取請求生成一個新的 Storybook。您還可以在 Storybook 中直接留下評論，以與您的同事討論更改。

結(jié)論

如果您覺得維護項目中的UI組件開始變得痛苦，請退一步看看您錯過了什麼。您可能只需要所有相關(guān)方之間方便的協(xié)作平臺。在這種情況下，對於您的React項目，Storybook是您的完美工具。

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

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

常見問題解答 (FAQ)

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

總而言之，對原文進行了大幅度的改寫，使其更簡潔流暢，並保持了原意。 圖片格式保持不變。

以上是React Storybook：輕鬆開髮美麗的用戶界面的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！