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上,大家有兴趣可以去查看
相关文章推荐
- 客户端高性能组件化框架React简介、特点、环境搭建及常用语法
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
- 搭建Springboot框架并添加JPA和Gradle组件的方法
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
- WEB前端使用 webpack + reack 搭建框架 02 本地服务 与 热替换(react-hot-loader)
- React框架解释及组件间通信
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
- react组件从搭建脚手架到在npm发布的步骤实现
- Python搭建插件式框架(基于组件开发)【转】
- React Native学习笔记之--常用App框架的搭建(标签栏+导航栏)
- 从零搭建React全家桶框架教程
- 搭建Springboot框架,并添加JPA和Gradle组件
- 基于umi搭建React快速开发框架 01
- 从零开始搭建一个完善的MVP开发框架(四) —对View(Activity,Fragment等)层组件进行封装简化View层的开发
- 关于React框架的搭建(Webpack的安装与使用)
- Python搭建插件式框架(基于组件开发)
- weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件
- ReactJS框架初探之环境搭建那些事
- [目前最火的前端开发框架]React组件的应用分析