新手安裝storybook在react專案上

跟團隊一起開發專案的時候,每個人自己都會包許多自己有用到的component,可是當我們去看別人寫的元件時,很難一眼就看出這個元件的外觀長怎樣、可以傳入哪些參數、傳入的參數有什麼作用…等,甚至我們都需要先在某個頁面把這個元件引入來預覽,可是又因為不知道要傳哪些必填參數,倒是元件也顯示不出來。

storybook 就是在專案中幫你建立一個頁面,顯示所有有建立stories(stories是一個副檔名有.stories.js的檔案,例如:Button.stories.js)的 component,並且下面會有控制項讓你切換看看哪些參數分別會有哪些效果,這樣就可以很快速地知道別人的元件要怎麼使用,脫離瞎子摸象的開發方式。

Storybook跑起來的畫面預計會長這樣:

你可以預覽元件的長相、並且可以在下面切換他的屬性。

 

安裝storybook

進入到你的 react 專案的根目錄底下

$ npx sb init

跑完之後你會看到package.json多了兩行script

"scripts": {
 //...
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
}

這時候可以先下指令讓他跑起來

$ yarn storybook

 

 

設定config

在根目錄,有多了一個資料夾.storybook

裡面有main.jspreview.js

 

main.js

module.exports = {
  stories: [
    "../src/components/**/*.stories.mdx",
    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

stories

就是你要讓storybook讀取的檔案類型,因為我這邊用的是typescript,所以他有幫我寫上tstsx類型。一般專案應該只要js就可以了。他是相對路徑,所以要先../離開main.js所在的.storybook資料夾,才會從根目錄開始算你的檔案路徑。

addons

其中@storybook/addon-essentials就是在你寫好stories時,點選左上角的docsstorybook會自動把你所有組件傳入的props變成文件。

這兩個套件也可以在package.json當中看到已經被安裝了。(現在不懂沒關係,等等寫了就知道了。)

 

 

撰寫stories

首先你要先寫好自己的 component,通常我會開一個與 component 同名的資料夾,然後裡面放 component 本身的檔案,和他的同名的.stories檔案

待續…

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。