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
• 组建文档