首先使用NPX Storybook@最新INIT安裝故事書(shū)，以設(shè)置依賴性，配置和樣本故事。 2。在孤立文件夾中組織組件，並通過(guò)共同貼合的故事，測(cè)試和索引文件以進(jìn)行可伸縮。 3。使用ARG和控件進(jìn)行交互式Prop操縱，撰寫(xiě)涵蓋各種狀態(tài)（加載，殘疾等）的全面故事。 4。啟用插件本質(zhì)來(lái)生成文檔選項(xiàng)卡，視覺(jué)控制，動(dòng)作和視口切換，以獲取生命風(fēng)格指南。 5。遵循最佳實(shí)踐：使用一致的命名（例如，組件/按鈕），保持故事的更新，採(cǎi)用打字稿並乾淨(jìng)地導(dǎo)出組件。 6。通過(guò)A11Y測(cè)試，用於視覺(jué)回歸的色度，並在線發(fā)布以供團(tuán)隊(duì)訪問(wèn)。 7.將圖書(shū)館視為不斷發(fā)展的系統(tǒng) - 啟動(dòng)了核心組件的小規(guī)模，並迭代地添加文檔，測(cè)試和設(shè)計(jì)令牌，以在團(tuán)隊(duì)之間構(gòu)建共享，可持續(xù)的UI語(yǔ)言。

因此，您正在考慮構(gòu)建組件庫(kù) - 偉大的舉動(dòng)。如果您在團(tuán)隊(duì)中或跨多個(gè)項(xiàng)目中工作，那麼穩(wěn)固的組件庫(kù)可以使您保持一致，並加快開(kāi)發(fā)速度，並使測(cè)試更加容易。幫助您構(gòu)建和展示該庫(kù)的最佳工具之一？故事書(shū)。

這是入門(mén)方式以及設(shè)置時(shí)實(shí)際重要的方法。

為什麼要使用故事書(shū)作為組件庫(kù)？

Storybook為您提供了一個(gè)隔離開(kāi)發(fā)UI組件的沙盒。這意味著無(wú)需旋轉(zhuǎn)完整的應(yīng)用程序即可調(diào)整一個(gè)按鈕。您為每個(gè)組件寫(xiě)故事，這些組件基本上是不同的狀態(tài)或用例（例如加載按鈕，禁用按鈕等）。

這不僅是針對(duì)開(kāi)發(fā)人員 - 設(shè)計(jì)師，質(zhì)量保證和產(chǎn)品人員可以使用它來(lái)查看可用的內(nèi)容以及事情的行為。另外，它與測(cè)試工具，文檔和設(shè)計(jì)系統(tǒng)集成在一起。

設(shè)置故事書(shū)

如果您要開(kāi)始新鮮（或添加到現(xiàn)有的React，Vue或其他前端項(xiàng)目中），則最簡(jiǎn)單的方法是使用自動(dòng)化CLI：

 NPX Storybook@最新初始化

這將：

• 安裝故事書(shū)依賴性
• 配置基本設(shè)置（ main.js ， preview.js ）
• 添加樣本故事
• 設(shè)置腳本以本地運(yùn)行

設(shè)置後，運(yùn)行：

 NPM Run Storybook

並且您將看到具有示例組件的默認(rèn)UI。

組織組件庫(kù)

結(jié)構(gòu)很重要。乾淨(jìng)的文件夾設(shè)置使您的庫(kù)可擴(kuò)展。

這是一個(gè)實(shí)用模式：

 src/
├─..pontents/
│├├─....按鈕/
││││─..js.jsx
││├│前鈕扣。 stories.js
│││├前button.test.js
index.js
││├站是模態(tài)/
││││站
││││站
index.js
│││─Index.js（所有組件）

每個(gè)組件都有自己的文件夾，其故事文件就在其旁邊。此共同位置使得隨著組件的發(fā)展，可以輕鬆地找到和更新故事。

在您的.stories.js文件中：

 // button.stories.js
導(dǎo)出默認(rèn){
  標(biāo)題：“組件/按鈕”，
  組件：按鈕，
};

導(dǎo)出const primary = {
  args：{
    標(biāo)籤：“點(diǎn)擊我”，
    主：是的，
  }，，
};

導(dǎo)出const disabled = {
  args：{
    標(biāo)籤：“禁用”，
    禁用：是的，
  }，，
};

現(xiàn)在，您將在Storybook側(cè)邊欄中看到“組件”下的“按鈕”，具有兩個(gè)狀態(tài)。

寫(xiě)有用的故事

不要只是展示快樂(lè)的道路。想想：

• 不同的道具
• 加載狀態(tài)
• 錯(cuò)誤條件
• 響應(yīng)行為（如果適用）

使用ARG和控件，因此非DEV可以在UI中調(diào)整道具：

導(dǎo)出默認(rèn){
  標(biāo)題：“組件/輸入”，
  組件：輸入，
  argtypes：{
    變體：{
      控制：“選擇”，
      選項(xiàng)：['概述'，“填充”，“標(biāo)準(zhǔn)”]，
    }，，
  }，，
};

導(dǎo)出const default = {
  args：{
    標(biāo)籤：“名稱”，
    佔(zhàn)位符：“輸入您的名字”，
  }，，
};

現(xiàn)在，您將在Storybook控件中獲得下拉列表，以實(shí)時(shí)切換變體。

添加文檔和控件

Storybook會(huì)使用MDX或內(nèi)置DOC Generation自動(dòng)為每個(gè)組件生成“文檔”選項(xiàng)卡。

在main.js中啟用它：

 // .storybook/main.js
Module.exports = {
  故事：['../ src/components/ghyde/gy.stories.@(js|jsx| ts| tsx）']，
  插件：[[
    “@Storybook/addon-Endentials”，//包括控件，文檔，動(dòng)作等。
  ]，，
};

使用@storybook/addon-essentials ，您可以得到：

• 道具的視覺(jué)控制
• 自動(dòng)生成的文檔
• 動(dòng)作小組查看事件
• 視口開(kāi)關(guān)（移動(dòng)/桌面）
• 背景

這將您的故事書(shū)變成了生活方式指南。

保持可維護(hù)的最佳實(shí)踐

• 始終如一地名稱故事- 使用清晰的層次結(jié)構(gòu)，例如Components/Button或Forms/Input
• 使用描述性故事名稱- “與圖標(biāo)”比“示例2”更好
• 使故事與代碼同步- 過(guò)時(shí)的故事誤導(dǎo)用戶
• 使用打字稿- 改善自動(dòng)完成並減少故事中的錯(cuò)誤
• 乾淨(jìng)地導(dǎo)出組件- 使其易於從圖書(shū)館導(dǎo)入其他地方

另外，請(qǐng)考慮：

• 使用@storybook/addon-a11y添加可訪問(wèn)性測(cè)試
• 與色度集成以進(jìn)行視覺(jué)回歸測(cè)試
• 在線發(fā)布您的故事書(shū)（GitHub頁(yè)面，Vercel等），以供團(tuán)隊(duì)訪問(wèn)

最後的想法

用故事書(shū)構(gòu)建組件庫(kù)不僅僅是炫耀按鈕。這是關(guān)於為您的團(tuán)隊(duì)創(chuàng)建共享語(yǔ)言。當(dāng)每個(gè)人都可以看到可用的內(nèi)容及其工作原理時(shí)，您就可以減少重複並提高質(zhì)量。

開(kāi)始小 - 一些帶有好故事的核心組件。迭代。隨著時(shí)間的推移，添加文檔，測(cè)試和設(shè)計(jì)令牌。

請(qǐng)記?。航M件庫(kù)永遠(yuǎn)不會(huì)“完成”。但是藉助Storybook，您擁有合適的工具來(lái)可持續(xù)發(fā)展。

基本上，只需開(kāi)始建造 - 其餘的就隨之而來(lái)。

以上是用故事書(shū)構(gòu)建組件庫(kù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！