每個前端都值得擁有自己的組件庫
1.您將了解到如何超快速0-1搭建并上線一個組件庫??
2.您將了解到什么是storybook??
3.您將了解到如何使用storybook搭建組件庫 ??
4.您將了解到如何使用Chromatic部署我們的組件庫??
3.您將了解到如何使用GitHub Action完成CI操作??
本文GitHub倉庫地址：taskbox[2]
組件庫在線地址：taskbox[3]
前言??什么是StoryBook??為什要造前端組件庫呢，更多的是抽離業(yè)務(wù)組件，實現(xiàn)復(fù)用，但是往往現(xiàn)實是殘酷的，一個優(yōu)秀的組件庫是非常龐大就具有難度的，但是通過這篇文章我們還是能從開發(fā)到上線完成一個簡單的組件庫，讓你了解整個流程
storybook-introStorybook是一個UI組件的開發(fā)環(huán)境。它允許你瀏覽組件庫，并查看每個組件的不同狀態(tài)，并交互地開發(fā)和測試組件，非常簡單快捷，而且很多公司在使用，而且你可以開發(fā)不同技術(shù)棧的組件庫，相當(dāng)方便，而且擁有一套成熟的CIDI方案
用我的話來說就是Storybook是一個可以讓你專注于編寫組件，而無需去關(guān)注文檔的一個強大的組件開發(fā)環(huán)境，想試驗，或者嘗試組件開發(fā)的小伙伴都可以值得一試，成本極低,可以快速上線。
Storybook 提供了一個沙箱來獨立構(gòu)建 UI，因此您可以開發(fā)難以到達的狀態(tài)和邊緣情況。
image-20211111211003832強大的CIDI
Kapture 2021-11-11 at 21.20.46開發(fā)步驟～?初始化Storybook(Rect組件庫為例)??
#?Create?our?application:
npx?create-react-app?taskbox
cd?taskbox
#?Add?Storybook:
npx?-p?@storybook/cli?sb?init
復(fù)制代碼
介紹目錄結(jié)構(gòu)??
.storybook/main.js相當(dāng)于我們組件庫的入口
image-20211113153902925stories表示我們的組件所在目錄，Storybook會將這個數(shù)組目錄下的文件加載到我們看見的組件庫Index首頁addons表示我們使用到的插件
image-20211113154131712開始編寫一個簡單的組件??
將我們的組件寫在剛剛配置好的
stories數(shù)組中的任一目錄即可
image-20211113154759633以最常見的Button組件為例子
image-20211113155016731Button.jsx
carbon (11)button.css
carbon (12)Button.stories.jsx
使用Butto.stories.jsx作為我們組件的載體，這樣Storybook就能很好的生成組件相關(guān)文檔，將組件展示在頁面中
carbon (13)使用 export 導(dǎo)出不同狀態(tài)的Button組件，這樣組件就算寫好了
看看效果??
image-20211113171721757部署我們的組件庫??
1.創(chuàng)建遠程Github倉庫并push代碼??
image-202111131719284322.為項目安裝Storybook強大的工具鏈工具Chromatic?
yarn add -D chromatic
復(fù)制代碼
3.去Chromatic[4]網(wǎng)站關(guān)聯(lián)我們github組件庫項目??
什么是Chromatic呢？
Chromatic 是一個基于云的工具鏈，用于 Storybook[5]這有助于團隊更快地發(fā)布 UI 組件，使用它我們可以超快的完成CIDI，而且還可以很方便的管理我們的組件庫項目,可以去官網(wǎng)了解更多www.hellogithub.com/[6]
Kapture 2021-11-13 at 17.28.204.部署上線??
關(guān)聯(lián)好項目后，我們會得到一個token
使用這個token執(zhí)行以下命令就能很好的構(gòu)建并部署我們的Storybook
yarn?chromatic?--project-token=
復(fù)制代碼
Chromatic running5.獲得項目URL??
在執(zhí)行完上面的構(gòu)建命令后，我們就會在命令行得到一個URL，這個URL就是我們的組件庫部署之后的在線地址，這樣你就可以把你的這個鏈接分享給你同事，或者朋友，讓他們看看你的組件庫啦!!!??
6.添加 GitHub Action 部署 Storybook??
現(xiàn)在我們的項目托管在 Github 倉庫，我們能夠使用持續(xù)集成 CI 服務(wù)完成 Storybook 自動化部署。GitHub Actions[7] 是一個免費的 CI 服務(wù)，內(nèi)置在 Github 中，輕松實現(xiàn)自動發(fā)布。
在項目根文件夾下創(chuàng)建一個新目錄命名為 .github 并在其中創(chuàng)建另一個 workflows 目錄。
image-20211113175306390像下面的一樣，創(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?}}
復(fù)制代碼
然后提交我們本次修改到遠程倉庫就行了，設(shè)置了GitHub action后，當(dāng)推送代碼時，你的 Storybook 將部署到 Chromatic 上。你可以在 Chromatic 的構(gòu)建屏幕中找到所有已發(fā)布的 Storybook。
image-20211113180323477并且可以查看本次提交修改了什么代碼，能不能合并，很多功能，這里就不一一講解了，大家感興趣可以自己去探索一下
image-20211113180927430總結(jié) ????這就樣我們的組件庫終于從零到編寫一個Button組件，從構(gòu)建到發(fā)布，再通過GitHub Action和Storybook以及Chromatic的夢幻聯(lián)動實現(xiàn)了方便的持續(xù)集成。當(dāng)然這篇短文只是幫助大家有個全面的認識，要想開發(fā)一個優(yōu)秀的組件庫是非常難的，要涉及很多東西，從代碼規(guī)范到各種插件再到測試都是需要花費很多精力的，但是有了Storybook可以讓我們很快的搭建起來屬于我們自己的組件庫，希望每個小伙伴都能有所收獲，去編寫一個屬于自己風(fēng)格的組件庫吧??。
源代碼倉庫地址：taskbox[8]??
組件庫在線地址：taskbox[9]
結(jié)束語??
256f7a595ff14172a9f3bcc34b26a487那么我的每個前端都值得擁有自己的組件庫，就像每個冬天都擁有秋褲??這篇文章結(jié)束了，每個前端都值得擁有自己的組件庫，希望這個冬天你不缺秋褲穿??，文章的目的其實很簡單就是對日常工作的總結(jié)和輸出，不管菜不菜輸出總是有意義的，也希望通過文章認識更多志同道合的朋友，如果你也喜歡折騰，歡迎加我好友，一起沙雕，一起進步。
關(guān)于本文
來源：速凍魚https://juejin.cn/post/7030570376329429022