React 組件庫框架搭建

前言

公司業務積累了一定程度，需要搭建自己的組件庫，有了組件庫，整個團隊開發效率會提高恨多。
做組件庫需要提供開發調試環境，和組件文檔的展示，調研了幾個比較主流的方案，如下：

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

組件庫搭建

• monorepo（多包倉庫）

  現在比較流行的是monorepo（多包倉庫）,我們採用lerna框架去管理開發項目。lerna我認爲最主要的功能給我們提供了包的版本管理，快速發佈npm等。像鼎鼎大名的babel就是採用這種方式來管理。lerna 初始化項目大家可以看下官方文檔，要注意它的兩種模式
  • Fixed/Locked（鎖定，固定模式） 默認初始化就是使用的這種方式。此方式包升級相對應的所有包都會升級成新版本
  • Independent (獨立模式) 支持單獨包的改動升級版本

  lerna 項目文件目錄描述

  ├── README.md              項目介紹
  ├── lerna.json             lerna 配置文件
  ├── package.json          
  ├── packages               包目錄
  │   └── ***-component      具體包文件
  └── yarn.lock

• 創建componet組件庫

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

  • 框架目錄

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

  • 組件目錄

    ├── resource                  resource組件文件夾
    │   ├── index.js                入口文件
    │   ├── index.less              less描述文件
    │   ├── index.mdx               文檔和案例
    │   ├── resource.js             組件內容
    │   ├── resourceContext.js      組件內容
    │   └── resourceGroup.js        組件內容
    └── tag                       tag組件
        ├── index.js                入口文件
        └── index.mdx               文檔和案例

• 開發，打包，發佈

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

  • yarn dev 啓動開發環境
  • yarn build:doc 構建文檔
  • yarn deploy:doc 構建文檔併發布到github pages
  • yarn build 構建組件產物

成果展示

結束語

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

• component
• 組建文檔