React 元件庫框架搭建

摘要： 前言 公司業務積累了一定程度，需要搭建自己的元件庫，有了元件庫，整個團隊開發效率會提高恨多。 做元件庫需要提供開發除錯環境，和元件文件的展示，調研了幾個比較主流的方案，如下： docz 配置簡單，功能相對來說也較完善。我們現在專案是用的umi框架，正好官方也提供了開發庫的...

前言

公司業務積累了一定程度，需要搭建自己的元件庫，有了元件庫，整個團隊開發效率會提高恨多。

做元件庫需要提供開發除錯環境，和元件文件的展示，調研了幾個比較主流的方案，如下：

• docz 配置簡單，功能相對來說也較完善。我們現在專案是用的umi框架，正好官方也提供了開發庫的腳手架，也集成了docz，因此我們決定採用它來開發我們的元件庫。
• storybook 功能比較全面，支援自定義webpack配置等特性
• docsifyjs 寫文件比較友好，對vue支援比較好，react 用的不是特別多

元件庫搭建

• monorepo（多包倉庫）

  現在比較流行的是 monorepo （多包倉庫）,我們採用 lerna

  框架去管理開發專案。lerna我認為最主要的功能給我們提供了包的版本管理，快速釋出npm等。像鼎鼎大名的babel就是採用這種方式來管理。lerna 初始化專案大家可以看下官方文件，要注意它的兩種模式

  • Fixed/Locked（鎖定，固定模式） 預設初始化就是使用的這種方式。此方式包升級相對應的所有包都會升級成新版本
  • Independent (獨立模式) 支援單獨包的改動升級版本

  lerna 專案檔案目錄描述

  ├── README.md專案介紹
  ├── lerna.jsonlerna 配置檔案
  ├── package.json
  ├── packages包目錄
  │└── ***-component具體包檔案
  └── yarn.lock

• 建立componet元件庫

  我們在 packages 檔案目錄下建立我們的元件庫，可以起名為 ***-component , 接下來就是初始化專案，可以用umi提供的腳手架去建立，根據文件建立即可。我們介紹下檔案目錄的用途

  • 框架目錄

    ├── bcomponents存放我們的業務元件
    ├── components存放基礎元件
    │├── resource資源元件
    │└── tag標籤元件 
    ├── index.js入口檔案
    ├── style樣式檔案
    │├── index.js
    │├── index.less入口樣式
    │├── minxinsless minxins
    │└── themes預設主題
    ├── utils工具目錄
    │└── utils.js工具類

  • 元件目錄

    ├── resourceresource元件資料夾
    │├── index.js入口檔案
    │├── index.lessless描述檔案
    │├── index.mdx文件和案例
    │├── resource.js元件內容
    │├── resourceContext.js元件內容
    │└── resourceGroup.js元件內容
    └── tagtag元件
    ├── index.js入口檔案
    └── index.mdx文件和案例

• 開發，打包，釋出

  我們介紹了框架目錄，大家可以按約定去開發。由於 umi-plugin-library 目前開發還不是完善，文件也不是很全。通過檢視原始碼總結了一下命令，包含開發，打包，釋出到github pages 上.

  yarn dev
  yarn build:doc
  yarn deploy:doc
  yarn build
  

成果展示

結束語

我簡單的介紹了組建搭建，搭建的過程中還有許多小細節需要我們注意。我把專案放到了github上，大家有興趣可以去檢視