閱讀本文??

1.您將了解到如何超快速0-1搭建并上線一個組件庫??

2.您將了解到什么是storybook??

3.您將了解到如何使用storybook搭建組件庫 ??

4.您將了解到如何使用Chromatic部署我們的組件庫??

3.您將了解到如何使用GitHub Action完成CI操作??

本文GitHub倉庫地址：taskbox^[2]

組件庫在線地址：taskbox^[3]

前言??

為什要造前端組件庫呢，更多的是抽離業(yè)務組件，實現(xiàn)復用，但是往往現(xiàn)實是殘酷的，一個優(yōu)秀的組件庫是非常龐大就具有難度的，但是通過這篇文章我們還是能從開發(fā)到上線完成一個簡單的組件庫，讓你了解整個流程

什么是StoryBook??

Storybook是一個UI組件的開發(fā)環(huán)境。它允許你瀏覽組件庫，并查看每個組件的不同狀態(tài)，并交互地開發(fā)和測試組件，非常簡單快捷，而且很多公司在使用，而且你可以開發(fā)不同技術棧的組件庫，相當方便，而且擁有一套成熟的CIDI方案

用我的話來說就是Storybook是一個可以讓你專注于編寫組件，而無需去關注文檔的一個強大的組件開發(fā)環(huán)境，想試驗，或者嘗試組件開發(fā)的小伙伴都可以值得一試，成本極低,可以快速上線。

Storybook 提供了一個沙箱來獨立構建 UI，因此您可以開發(fā)難以到達的狀態(tài)和邊緣情況。

強大的CIDI

開發(fā)步驟～?

初始化Storybook(Rect組件庫為例)??

#?Create?our?application:
npx?create-react-app?taskbox

cd?taskbox

#?Add?Storybook:
npx?-p?@storybook/cli?sb?init
復制代碼

介紹目錄結構??

• .storybook/main.js相當于我們組件庫的入口

• stories表示我們的組件所在目錄，Storybook會將這個數(shù)組目錄下的文件加載到我們看見的組件庫Index首頁
• addons表示我們使用到的插件

開始編寫一個簡單的組件??

將我們的組件寫在剛剛配置好的stories數(shù)組中的任一目錄即可

以最常見的Button組件為例子

Button.jsx

button.css

Button.stories.jsx

使用Butto.stories.jsx作為我們組件的載體，這樣Storybook就能很好的生成組件相關文檔，將組件展示在頁面中

使用 export 導出不同狀態(tài)的Button組件，這樣組件就算寫好了

看看效果??

部署我們的組件庫??

1.創(chuàng)建遠程Github倉庫并push代碼??

2.為項目安裝Storybook強大的工具鏈工具Chromatic?

yarn add -D chromatic
復制代碼

3.去Chromatic^[4]網(wǎng)站關聯(lián)我們github組件庫項目??

什么是Chromatic呢？

Chromatic 是一個基于云的工具鏈，用于 Storybook^[5]這有助于團隊更快地發(fā)布 UI 組件，使用它我們可以超快的完成CIDI，而且還可以很方便的管理我們的組件庫項目,可以去官網(wǎng)了解更多www.hellogithub.com/^[6]

4.部署上線??

關聯(lián)好項目后，我們會得到一個token

使用這個token執(zhí)行以下命令就能很好的構建并部署我們的Storybook

yarn?chromatic?--project-token=
復制代碼

5.獲得項目URL??

在執(zhí)行完上面的構建命令后，我們就會在命令行得到一個URL，這個URL就是我們的組件庫部署之后的在線地址，這樣你就可以把你的這個鏈接分享給你同事，或者朋友，讓他們看看你的組件庫啦!!!??

6.添加 GitHub Action 部署 Storybook??

現(xiàn)在我們的項目托管在 Github 倉庫，我們能夠使用持續(xù)集成 CI 服務完成 Storybook 自動化部署。GitHub Actions^[7] 是一個免費的 CI 服務，內置在 Github 中，輕松實現(xiàn)自動發(fā)布。

在項目根文件夾下創(chuàng)建一個新目錄命名為 .github 并在其中創(chuàng)建另一個 workflows 目錄。

像下面的一樣，創(chuàng)建一個新文件命名為 chromatic.yml。將 project-token 替換為你項目的 project token。

chromatic.yml

#?.github/workflows/chromatic.yml

#?Workflow?name
name:?'Chromatic?Deployment'

#?Event?for?the?workflow
on:?push

#?List?of?jobs
jobs:
??test:
????#?Operating?System
????runs-on:?ubuntu-latest
????#?Job?steps
????steps:
??????-?uses:?actions/checkout@v1
??????-?run:?yarn
????????#???Adds?Chromatic?as?a?step?in?the?workflow
??????-?uses:?chromaui/action@v1
????????#?Options?required?for?Chromatic's?GitHub?Action
????????with:
??????????#???Chromatic?projectToken,?see?https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/?to?obtain?it
??????????projectToken:?${{?XXXXXXXX?}}
??????????token:?${{?secrets.GITHUB_TOKEN?}}
復制代碼

然后提交我們本次修改到遠程倉庫就行了，設置了GitHub action后，當推送代碼時，你的 Storybook 將部署到 Chromatic 上。你可以在 Chromatic 的構建屏幕中找到所有已發(fā)布的 Storybook。

并且可以查看本次提交修改了什么代碼，能不能合并，很多功能，這里就不一一講解了，大家感興趣可以自己去探索一下

總結 ??

??這就樣我們的組件庫終于從零到編寫一個Button組件，從構建到發(fā)布，再通過GitHub Action和Storybook以及Chromatic的夢幻聯(lián)動實現(xiàn)了方便的持續(xù)集成。當然這篇短文只是幫助大家有個全面的認識，要想開發(fā)一個優(yōu)秀的組件庫是非常難的，要涉及很多東西，從代碼規(guī)范到各種插件再到測試都是需要花費很多精力的，但是有了Storybook可以讓我們很快的搭建起來屬于我們自己的組件庫，希望每個小伙伴都能有所收獲，去編寫一個屬于自己風格的組件庫吧??。

源代碼倉庫地址：taskbox^[8]??

組件庫在線地址：taskbox^[9]

結束語??

那么我的每個前端都值得擁有自己的組件庫，就像每個冬天都擁有秋褲??這篇文章結束了，每個前端都值得擁有自己的組件庫，希望這個冬天你不缺秋褲穿??，文章的目的其實很簡單就是對日常工作的總結和輸出，不管菜不菜輸出總是有意義的，也希望通過文章認識更多志同道合的朋友，如果你也喜歡折騰，歡迎加我好友，一起沙雕，一起進步。