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
• 組建文檔