您的位置:首页 > Web前端 > React

React 组件库框架搭建

2019-01-23 20:00 946 查看

前言

公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多。
做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下:

  • 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上,大家有兴趣可以去查看

  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: