前端進階（7） - react、vue 組件開發利器：storybook

react、vue 組件開發利器：storybook

對於前端開發來講，組件化技術已是一門必修課了，這其中又主要以 react 和 vue 爲主。但平時在開發組件，尤爲是公共組件或者第三方組件庫的時候，每每會有一些困擾：

• 不能很好的管理多個組件，尤爲是在組件預覽的時候，不能一目瞭然
• 在組件預覽的時候，也不能很好的反應一個組件的多個不一樣狀態
• 自動化交互測試能夠使用 enzyme，但不少時候還得手動測試，就比較麻煩了
• 在寫文檔的時候，須要將組件預覽和文檔寫在一塊兒，並須要切換到不一樣的狀態，就比較吃力了

因此，storybook 就是爲了解決這些問題而出現的，它爲你的組件搭建了一個強大的開發環境，主要提供瞭如下的幾個功能：

• 提供了一個強大的 UI 組件管理頁面，能夠很便捷、清晰的分組、管理多個組件或一個組件的多個不一樣狀態
• 在自動化交互測試以外，能夠很方便的進行手動交互測試，而且能夠動態改變組件參數，查看視圖變化
• 能夠將組件預覽導出爲靜態資源，這樣就能夠很方便查看組件的文檔和不一樣參數對應的不一樣視圖
• 還有一系列的插件，提供了不少額外的功能，幫助你更好的開發、測試、優化組件

社區已經有不少組件庫都在使用 storybook 開發，好比：

• react-dates 的 storybook react-dates - storybook
• react-native-web 的 storybook react-native-web - storybook

再順便截個圖吧

1. 框架適配

• React
• React Native
• Vue
• Angular
• Polymer
• Mithril: 目前尚處 alpha 階段
• Marko: 目前尚處 alpha 階段
• HTML: 目前尚處 alpha 階段
• Svelte: 目前尚處 alpha 階段
• Riot : 目前尚處 alpha 階段

2. 開發與命令

2.1 如何寫一個 story

查看 storybook - Writing Stories，瞭解怎麼寫 stories 與怎麼用插件。

2.2 添加 storybook

# 安裝全局命令
npm i -g @storybook/cli

# 初始化已有項目（不會對原項目產生影響，只添加必要的配置與腳本而已）
cd my-project-directory
getstorybook

# 運行 storybook
npm run storybook

若是須要手動添加 storybook 或它的插件，能夠查看：

• Storybook for React
• Storybook for Vue
• Storybook for Angular

2.3 將組件預覽導出爲靜態資源

# 添加到 package.json 的 scripts
{
  "export-storybook": "build-storybook -c .storybook -o .out"
}

# 運行命令
npm run export-storybook

3. 後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）